记录将 Hexo 静态博客从 Github Pages 迁移至 Cloudflare Pages 的过程
对比
| Github Pages | Cloudflare Pages | |
|---|---|---|
| 访问速度 | 较慢 | 较快 |
| 中文支持 | 无 | 有 |
| ipv6支持 | 无 | 有 |
| 自动化部署 | 有,但需自己写代码实现 | 有,实现直观简单,并且每次部署提供唯一的域名供预览,部署回滚很方便 |
| 提供的域名 | 由用户名组成,比较好记 | 由项目名加其它字符组成,不太好记 |
通过以上对比可以看出 Cloudflare Pages 有许多优点,虽然它提供的域名不太好记,但我有自己购买的域名,可以通过自定义域名进行访问。
回顾
先来回顾一下 Github Action 自动化部署过程。
我们知道 Github Pages 上显示的页面是仓库中一些诸如 HTML、CSS、JS 等一些静态文件(即 public 文件夹中存放的内容)组成的,之前为了实现自动化部署需要再新建一个仓库,用于存放 Hexo 项目的所有文件(假设仓库名为 HexoBlog),此外还需要在该项目中新建一个 yml 文件(假设文件名为 hexo-cli.yml),并将其放在 HexoBlog/.github/workflows 目录下,文件中的内容如下:
1 | name: HEXO CI |
文件中的
git config那两行需要换成自己的相关信息。
为了自动化时能够通过 SSH 访问仓库,还需要设置密钥对(密钥对可通过ssh-keygen生成),过程如下:
在 HexoBlog 仓库中找到
Settings -> Secrets,为其添加私钥,名称要和hexo-cli.yml文件中保持一致(假设为HEXO_DEPLOY_PRI)在静态文件存储仓库中找到
Settings -> Deploy keys,为其添加公钥(名称可设为HEXO_DEPLOY_PUB)。
此时在本地修改文件内容并 push 到 HexoBlog 仓库后,Github Action 就会自动执行代码进行部署,完成博客的更新。
开始迁移
访问 Cloudflare 进行注册登录
进入面板后左侧导航选择
Pages选择
新建项目->连接到 Git,此时授予 Github 中 HexoBlog 仓库的读写权设置项目名和分支名
设置构建和部署
框架预设选择
None构建命令填
npm run clean && npm run build(可在package.json中预设命令脚本)构建输出目录填
public
开始部署
自定义域名:使用 CNAME 解析或更换 DNS 服务器地址
注意:在迁移到 Cloudflare Pages 之后就不需要hexo-deployer-git了,需要删除_config.yml中的相关配置,同时也可以删除package.json和package-lock.json中对应安装模块的声明。
hexo-deployer-git会将 HexoBlog 仓库中的 public 文件夹中的内容,同步到静态文件存放仓库,同步仓库位置可在_config.yml文件中修改。可通过代码hexo deploy进行一键部署 。
- 本文标题:将博客迁移至 Cloudflare Pages
- 本文作者:kecho
- 创建时间:2022-08-08 12:19:37
- 本文链接:https://blog.kecho.top/2022/将博客迁移至 Cloudflare Pages.html
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!