又折腾博客了

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

框架和部署调整

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

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

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

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

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

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

内容和主题

博客内容方面，除了 Posts 和 Notes，这次增加了一些之前做过的分享 Slides。

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

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

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

CDN 和云存储

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

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

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

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

此外又拍云还支持一键开启 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 域名，境外和默认都解析到又拍云云存储服务器，交给他去分流加速。

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

总结

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