将Hexo源码托管到GitHub并使用Cloudflare pages自动部署

从WordPress转到Hexo已经一年多了，这段时间一直在电脑上写文章，然后部署到腾讯云cos上，确实比以前省心很多。但是这一年没怎么关注，惊觉腾讯云的COS免费额度没了、CDN赠送流量没了，直到收到邮件说HTTPS请求都要按次数收费时，我知道是时候告别腾讯云了！

最开始尝试了把生成好的静态文件托管到AWS Amplify上，可以绑定域名托管静态网站。

后来发现Amplify可以绑定GitHub仓库，使用hexo-deployer-git插件把静态文件部署到仓库里，每次部署就可以自动更新了，但还是要在本地命令行操作。

于是再找能不能把源代码也放到网上、云端生成静态网页的方法，发现GitHub Actions就可以实现。尝试了一段时间以后，觉得Actions的操作太麻烦，还要去抄一大段代码，我又看不懂。

于是找到了Cloudflare Pages。

它有这几个好处：

由于我刚被AWS的DNS托管坑了0.5美元(收费项目没有提示、没有通知），于是果断放弃了Amplify，决定把网站放到业界良心Cloudflare上，虽然它在国内的访问速度比不上AWS，但是对于静态网站来说也够用了。

要在Cloudflare Pages托管静态网站，总共以下几步：

创建Cloudflare账户：如果还没有Cloudflare账户，先注册一个。
连接GitHub账户：登录Cloudflare控制台后，进入Workers & Pages部分，选择Pages，然后点击Connect to Git，选择GitHub进行授权。
选择仓库：授权后，选择您要部署的GitHub仓库。如果还没有创建仓库，先在GitHub上创建一个新仓库来存放Hexo文件，支持private仓库。
配置构建设置：在Cloudflare Pages中，配置Hexo的部署分支（通常是 main 或 master）、构建命令（Hexo是npm run build）和构建输出目录（Hexo是 public文件夹）。
保存并部署：点击“保存并部署”按钮，Cloudflare Pages将自动从GitHub仓库拉取代码并构建网站。部署过程通常需要几分钟。
访问网站：部署完成几分钟后，就可以通过Cloudflare分配的子域名（如abc.pages.dev）访问部署好的网站。
配置自定义域名：配置自己的域名，需要将域名托管在Cloudflare上进行域名解析，就能Cloudflare Pages的设置中添加自定义域名，会自动颁发SSL证书使用HTTPS，确保数据传输安全。

通过以上步骤，就能轻松地在Cloudflare Pages上托管Hexo网站。对于个人博客网站来说，Cloudflare Pages相当于提供了永久免费的托管服务。

在部署的过程中我也踩了一个坑：

刚做好的博客一直构建失败，发现是由于初始化博客时，克隆自hexo-starter这个仓库里有一个yarn.lock文件，会影响到Pages的构建程序，删掉该文件后就正常了。

部署完成后，发现Pages会自动将main分支之外的其他分支部署为预览模式并分配临时域名，于是灵机一动，在本地不方便安装环境时，直接云端编辑文章，并预览，发布时合并到main分支不就搞定了。同时在Pages构建设置中，设置需要部署预览的分支名称叫preview，其他分支都跳过部署。

按照这个流程：