惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
大猫的无限游戏
大猫的无限游戏
博客园 - 聂微东
Jina AI
Jina AI
The Cloudflare Blog
V
Visual Studio Blog
博客园_首页
量子位
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 【当耐特】
爱范儿
爱范儿
博客园 - 三生石上(FineUI控件)
小众软件
小众软件
博客园 - 司徒正美
阮一峰的网络日志
阮一峰的网络日志
Last Week in AI
Last Week in AI
V
V2EX
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 叶小钗
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
WordPress大学
WordPress大学
宝玉的分享
宝玉的分享
T
Tailwind CSS Blog
博客园 - Franky

ALBERTAZ

How I Built a Scannable 3D QR Code Generator | Every QR Code OpenStreetMap Data Pipeline for Canvas Maps | EveryCityMap 每日关灯:今天这题理论最少 8 步 OpenStreetMap + Canvas 城市地图实践:EveryCityMap 的五个工程取舍 OpenStreetMap + Canvas 城市地图实践:EveryCityMap 的五个工程取舍 博客 CDN 迁移到 Cloudflare R2 博客 CDN 迁移到 Cloudflare R2 Migrate my website to SvelteKit2 Migrate my website to SvelteKit2 漫谈编辑器 漫谈编辑器 Pure ESM package Pure ESM package 又折腾博客了 Rewrite my website with Svelte Rewrite my website with Svelte 字体漫谈-网站字体最佳实践 字体漫谈-网站字体最佳实践 你不知道的 Web Components - 现状 你不知道的 Web Components - 现状 你不知道的 Web Components - 过去和未来 你不知道的 Web Components - 过去和未来 Node 应用本地 HTTPS Node 应用本地 HTTPS docker 部署 Gatsby 应用 docker 部署 Gatsby 应用 再提示『您的磁盘几乎已满』算我输 再提示『您的磁盘几乎已满』算我输 G6-Mobile 的前世今生 G6-Mobile 的前世今生
又折腾博客了
https://www.albertaz.com/about · 2022-07-09 · via ALBERTAZ

疫情隔离期间对博客又双叒叕做了一次大改,因为我发现只有在每次折腾大改后的一段时间,才有动力写作更新。

框架和部署调整

最早我的博客是 15 年用 Hexo 写的,顺便写了一款主题 hexo-theme-pisces, 用 Github Pages 托管。之后在 17 年,换 Vue 重写了一次。 new-blog-0

19 年后,用 React 和 Gatsby 又重写了一次,换了套简约皮肤,内容上加了日常笔记,部署到了阿里云。这个版本的存活时间算是迄今最长了。

new-blog-1

直到这次,由于阿里云续费价格太高(毕竟套路云),我这种自娱自乐的小站果断换到了 Vercel 免费部署。

整站框架上也用了 Svelte 重写,感兴趣我怎么做的可以去看前一篇文章 rewrite-my-blog-with-svelte

index-desktop

SvelteKit 提供了非常多的 adaptor 来帮助我们部署项目,除了 Vercel,还兼容 Netlify、Cloudflare、Azure 等各种云平台。我用 adapter-vercel,配合 Vercel 简单直接的操作,关联 github 在每次 PR 后自动 CI/CD,体验非常丝滑。

Vercel 还支持给部署的域名申请 SSL 证书,不过由于我已经换到了腾讯云做 DNS 域名解析,这里就没有替换了。

内容和主题

博客内容方面,除了 PostsNotes,这次增加了一些之前做过的分享 Slides

new-blog-2

偶尔的画画涂鸦 Drawing 依然保留,新增了 Uses,看看你有没有跟我相同的装备。

样式主题方面,除了支持深色/浅色模式,我还增加了 12 套主色调的主题配色。之前也看过有不少网站会生成随机颜色的主题配色,但我还是觉得随机配色少了点味道,不如不配。因此我花了不少功夫设计这 12 套皮肤的色彩搭配和名称,欢迎切换体验。

new-blog-3

字体方面,针对中文、英文,内容类型分别做了处理,具体我在这篇文章有写: 字体漫谈-网站字体最佳实践

CDN 和云存储

为了提供服务器端加速、提升访问速度,加上我用到不少图片、字体等静态资源,所以选择一个 云存储和 CDN 服务也是很重要的(在国内前提是域名备案)。

之前我一直用七牛云,这次我换成了又拍云。

七牛云的 CDN 加速按流量阶梯计费,HTTPS 相比 HTTP 流量价格更高,海外动态加速会额外收费,赠送的福利包括 10 GB HTTP(注意不是 HTTPS) 下载流量和 10GB的对象存储空间。

new-blog-4

相比之下,又拍云则给的更多。加入又拍云联盟后,每个月可以有 10GB 对象存储空间和 15 GB 流量,HTTP/HTTPS 均可,且都支持 CDN 加速。

new-blog-5

此外又拍云还支持一键开启 WebP 自适应功能,我正愁一堆大尺寸图片需要压缩优化,又拍云完美解决了。并且玩法还很多,比如:

  • 缩略图: ${draw.meta.cover}!small
  • 自动转成有损 WebP:${node.properties.src}!/format/webp
  • 自动转成无损 WebP:${draw.meta.cover}!small/format/webp/lossless/true

现在我全站在没有花时间处理原图的情况下,都支持了 WebP 自适应。

虽然又拍云联盟每年需要申请一次,在网站底部添加又拍云链接,但流量和图片处理上的优势显然是更优的选择。

国内外线路分流

由于我站点部署在 Vercel,但静态资源被我单独放到了国内云存储,如果希望同时面向国内和国外用户加速,就需要对站点和静态资源分别处理。所以我首先给静态资源单独配置了域名 cdn.albertaz.com,绑定到又拍云云存储服务。

对于静态资源,由于又拍云 CDN 还支持对海外流量 CDN 加速,这就可以同时对国内外流量加速。 对于站点本身,Vercel 服务器在国外,国外访问自然没问题,国内线路则需要通过 CDN 全站加速。

因此在 DNS 解析配置上

  • 对于站点本身 www 域名,境外直接解析到 Vercel 服务器,默认(境内)解析到又拍云全站加速服务器
  • 对于静态资源 cdn 域名,境外和默认都解析到又拍云云存储服务器,交给他去分流加速。

new-blog-6

以上,国内外线路分流和加速就完成了。

总结

感谢 Vercel 和又拍云。希望这版博客能活的更久。