距离上次更新本文已经过去了 218 天,文章部分内容可能已经过时,请注意甄别

本文将教您使用 cloudflare pages 来白嫖部署 hexo 博客。

1. 注册 cloudflare

这部分就省略了,用邮箱注册就可以了

cloudflare pages 的免费版本功能如下:

  • 并发构建数:1(如果有多个 pages,同一时刻只能进行其中一个的构建)
  • 每月构建数:500(每个月只能帮你构建 500 次)
  • 自定义域名:100 个
  • 一个 pages 最多 20,000 个文件
  • 最大单个文件限制:25MB
  • 每日限制函数请求数:100,000 次(超出后会失败)
  • 静态文件请求次数:无限

这些限制对于一个过气(压根没人看)的个人博客来说绰绰有余了,而且 cloudflare 的防护能力在哪里,被盗刷访问量的几率并不大。而且静态文件的访问次数是没有做任何限制的。

image.png

2. 配置 cloudflare pages

参考官方文档:Deploy a Hexo site · Cloudflare Pages docs
请注意,官方文档中的部署命令有错误!

在你的账户主页,点击左侧的 workers & pages,随后点击页面上的 Pages

image.png

随后点击 connect to git,绑定你的 GitHub 或者 Gitlab 账户。我选择绑定 GitHub,这里的绑定操作就点几下的事情(我忘记截图了)

image.png

绑定了账户后可以在这里看到你的仓库。我的 hexo 在 github 上有两个仓库,一个是 hexo 源配置的仓库,包括 md 源文件和主题等配置项,另外一个是 github.io 静态文件的仓库,是从本地使用 hexo d 命令推送到 github 上的。这里要选择的应该是 hexo 原配置仓库,这样你的 md 文件有变动就会触发更新,而不需要手动执行 hexo d

image.png

选择了之后,会弹出来让你选择分支、部署命令、发布页面

  • 分支:根据你自己的情况选择
  • Framework perset:这里面没有 hexo,保留为 None 即可
  • 部署命令:npm run build
  • 发布页面:public

配置如下图所示

image.png

请注意,在 cf 的官方文档里面,提到部署命令使用 hexo generate,这是错误的!因为该命令会报错找不到 hexo,无法正常部署!如下便是我依照官方文档使用了 hexo generate 命令之后的错误输出,报错了 hexo: not found

plaintext
1
2
3
4
5
6
7
8
9
11:50:19.363	Some issues need review, and may require choosing
11:50:19.363 a different dependency.
11:50:19.363
11:50:19.363 Run `npm audit` for details.
11:50:19.383 Executing user command: hexo generate
11:50:19.391 /bin/sh: 1: hexo: not found
11:50:19.393 Failed: Error while executing user command. Exited with error code: 127
11:50:19.400 Failed: build command exited with code: 1
11:50:20.318 Failed: error occurred while running build command

使用 npm run build 就能正常部署,稍等几分钟你就能获得一个链接,博客就部署成功了。

image.png

点击 Custom domains 来配置你的自定义域名,因为我的主域名并没有在 cloudflare 上使用,所以这里得选择右侧的 my dns provider 来配置 CNAME 解析。

image.png

去你的域名控制台添加对应 CNAME 即可,添加 CNAME 解析后,点击下方的 check DNS records 验证是否配置成功。

image.png

成功了之后你就可以用自定义域名来访问这个 cloudflare pages 了,而且 ssl 证书也会自动部署,不需要我们做任何额外操作。

The end

cf 的这个配置还是挺简单的,不过有个缺点就是国内 cf 的访问速度很捉急,甚至有可能打不开。不过 hexo 静态博客的优势在于我们可以弄一大堆镜像站,这样主站挂了也不担心😜。

如果你是本站的访问者,本站的站点分布如下,只需要在域名的 blog 后面加个数字即可,还是很好记住的。如果哪天你发现主站打不开了,可以试试其他镜像站,总有一个能打开的。

plaintext
1
2
3
4
5
blog.msunow.top   主站(又拍云CDN)
blog1.musnow.top netlify部署(主站回源站)
blog2.musnow.top vercel部署
blog3.musnow.top cloudflare pages部署
musnows.github.io