2023年，如何搭建一个独立博客？

时隔多年重新搭建自己的博客，体验完全不一样了。记得第一个博客是搭建在 SAE 上的 WordPress，后面陆续在各种 VPS 上搭建过，但都没写长久。今天我用的方式是 GitHub 托管源码和图片，Vercel 部署，Cloudflare 托管域名和反向代理图片请求。整个过程下来非常丝滑。

一个好的模板重要性不言而喻，自己写得舒服，读者看得也舒服。经过一番调研，发现两个比较有特色的模板。一个是 astro-air-blog，这个具有很强的 Apple 风格，另一个是 tw93 的博客，用了自己同样很喜欢的霞鹜文楷的字体。

考虑到后者是基于 Jekyll 的，一个 Ruby 框架，自己早年又有被 Ruby 和 CocoaPods 残虐的经历，最终选择了纯 JavaScript 的 astro-air-blog 模板。

这个模板的作者很贴心，写了一个真的很详细的 Astro Air Blog 详细使用指南，即使没有技术基础，跟着一步步做也很容易。所以关于这部分，我就不多描述，重点将原作者没有涉及到等内容。

在 GitHub 上的 astro-air-blog 页面使用模板创建自己的项目之后，就可以到 Vercel 上新建项目，并导入 GitHub 的仓库，点击部署就可以了。

部署成功之后，Vercel 会分配一个 vercel.app 后缀的域名。这时候，通过 vercel.app 已经可以访问博客了。但使用官方提供的域名一点都不 cool，所以我们还需要绑定一个自己的域名。绑定自己域名还有一个好处就是可以让国服玩家也能顺利访问博客。

早就知道 Cloudflare 托管域名很方便，于是就直接在 Cloudflare 上申请了一个域名，虽然价格没有某些其他平台便宜，但胜在方便。如果域名不在 Cloudflare 上申请，也也可以在自己的域名服务商的管理后台进行配置，让 Cloudflare 托管。

第 1 步，在 Vercel 的 Project Settings - Domains 页面增加自定义域名，比如我用的是 blog.maymagic.us。添加之后，页面上会报错，这时候不用担心，因为我们还没有配置域名解析。

第 2 步，在 Cloudflare 上配置域名解析。内容在上一步的页面上也有提示，即一条 CNAME 记录到 cname.vercel-dns.com。按照这个在 Cloudflare 的域名解析页面添加记录即可。添加后，Vercel 页面会停止报错，开始安装 SSL 证书。

第 3 步，Vercel 页面安装证书完成之后，仍然是不能通过域名访问的。还需要等缓存刷新，一般几分钟即可。

到这里，已经可以通过自定义域名访问我们的新博客了。但是，博客上的文章并不是我们自己的文章，而是模板自带的，所以我们需要替换成我们自己的。

将 GitHub 仓库克隆到本地，编辑博客文章所在目录 src/pages/posts 下的 .md 文件即可。推荐将原始的 posts 目录换个名字，比如 posts-example，然后新建一个空的 posts 自己使用。

编辑之后，进行提交并推送到 GitHub。之后我们就不需要手动操作了，Vercel 会自动拉取最新的源码进行构建和部署。部署完成后，会有一个邮件提示，这时候刷新页面，就可以看到最新发布的博客文章了。

很多时候，我们的博客里还需要添加图片，所以有一个图片服务器也很重要。这种图片服务器也被称为「图床」。Vercel 虽然是免费的，但是也是有额度限制，不适合用来托管图片。

图床的服务五花八门，为了更方便地掌控图片数据，我把选型范围缩小到了 GitHub 存储。这时候 GitHub 的访问就成了最大的问题，但这恰好又是 Cloudflare 的优势。于是使用 Cloudflare 代理访问 GitHub 图片的方案应运而生。

这里参考了使用 GitHub 私有仓库和 Cloudflare Workers 搭建个人图床 - 知乎 这篇文章。

大致的流程就是：

第 1 步，创建 GitHub 仓库，可以是私有的，用来存储图片。

第 2 步，创建 Cloudflare Worker，对 GitHub 仓库的图片资源进行反向代理。反向代理的意思是，最终访问时是直接请求 Cloudflare，对真正的后端 GitHub 无感知。

第 3 步，在 Cloudflare Worker 中绑定自定义域名，通过自定义域名访问图片。

这样做的另一个好处是，博客中记录的是自定义域名的图片链接，我们可以随时更换图床提供商，而不用修改博客内容。

设置完成后，上传图片到 GitHub 仓库，就可以用下面的方式添加到博客中。

PicGo 是一个用于快速上传图片并获取图片 URL 链接的工具。PicGo 对 GitHub 支持很友好，通过 PicGo 我们可以很方便地将剪贴板或者本地的图片上传到上一步建立的图床。

经过一番试用，我推荐使用 PicGo 的 Electron 客户端，功能够用，操作简单。唯一不足的就是 Electron，但我 64GB 内存的机器毫不畏惧。也有 VSCode 插件，但差不多两年没有维护了，有弃坑的可能，而且功能上与 Electron 客户端没有大的差别，没有使用的必要。

PicGo 的配置如下：

这里有个小 Tips，存储路径设置为了 assets/2023/，这是为了防止同一个文件夹下文件数量过多，到时候检索、整理不方便，对访问速度是没有影响的。

总共只花了不到半天的时间就弄好了这个博客，而且过程及其丝滑，或许这就是「云原生」的魅力所在吧。但搭建只能说是万里长征的第一步，在这之后的更新维护才是最重要的。希望自己能持续输出下去。

接下来的计划有两个，一个是把近期在 Obsidian 上记录的一些笔记，和之前发布的微信公众号的内容同步到博客上；另一个是给博客增加一个评论组件。