将博客迁移到了 Cloudflare Pages
共 2869字，需浏览 6分钟
·
2022-07-24 22:28
上个月把博客从 hexo 迁移到了 hugo，博客数据、发布流程全部托管到 github。之后把之前写的一篇《那些年曹大写的文章》搬了过来，其他文章暂时下线了。
上周在折腾博客 css 的时候，aofei 说不如迁移到 Cloudflare，还能全球 cdn 加速。于是又动手迁移到 Cloudflare Pages，顺便又修改了一些 css，目前博客样式比较顺我的意。这篇文章记录下折腾的过程，希望能给读者带来一些参考。
迁移到 Cloudflare Pages
Cloudflare Pages 和 Github Pages 都能方便地部署静态博客页面，前者功能更强大，不仅支持自动部署、设置页面规则将 www.qcrao.com 解析到 qcrao.com，还能配置 url 自动重定向，并且能够分析页面访问量（之前是基于 google analytics）。
迁移过程很简单，在 Cloudflare Pages 页面，创建部署，目录设置成 github 上的 blog repo。设置构建命令，接着只要 github 上的 blog repo 有更新，这边就会自动部署。
这里有一点要注意的是：通过设置环境变量来控制 hugo 的版本和本地一致，否则在本地和线上看到的页面效果会有差异。我当时遇到的问题是 Cloudflare 生成的页面不能点击图片进行放大，本地则是 OK 的。
DNS 配置
Cloudflare Pages 上对 DNS 的配置步骤有提示和说明，比较友好。
我之前的域名在腾讯云上托管，这回得修改 DNS 服务器到 Cloudflare，需要去腾讯云域名管理页面修改。
下面这条 www -> qcrao.com 的记录是在为了让我们在输入 https://www.qcrao.com 时跳转到 https://qcrao.com。
另外，Cloudflare 会自动将 https 证书设置好，完全不需要我们操心。
老文章重定向
之前用 hexo 发布文章后，url 里会带上日期，非常长且没有什么意义。切到 hugo 后，url 没有日期了，且加上了一个 post 路径。同一个 md 文件，发布之后链接不一样：
【老地址】https://qcrao.com/2019/04/02/dive-into-go-slice
->
【新地址】https://qcrao.com/post/dive-into-go-slice/
如果不设置重定向，原来的地址就会失效。
Cloudflare 刚好有一个重定向的功能，非常方便，一行命令就解决了：
/:year/:month/:day/* /post/:splat
前面是老 url，后面是重定向的新地址。将老 url 里的年、月、日匹配上，splat 表示 * 号内容，这样就能把年月日从 url 中去掉，并且加上了 /post。重定向的功能就完成了，且非常优雅且顺滑。
当我们访问 https://qcrao.com/2019/04/02/dive-into-go-slice 时，会自动跳转到：
CSS 美化
很惭愧，我并不会 CSS，他们都说特别简单，下次我一定学😅。
一开始想要美化 CSS 的原因是在手机端看博客文章时，结尾部分的版权声明字体过于大，而文章正文的字体又显得特别小（我特地和曹大博客在手机端的效果做了对比）。
当然我自己是不知道怎么『美化』的，所以请教了 aofei，几行代码就解决了：
@media only screen and (max-width: 800px) {
.post-archive {
font-size: 16px;
}
.post-content {
font-size: 16px;
}
.post-archive h2 {
margin: 0;
font: bold 16px / 1.1 "ff-tisa-web-pro", Cambria, "Times New Roman", Georgia, Times, sans-serif;
}
.post-archive .date {
font-size: 16px;
padding-right: .7em;
}
}
第一行代码限定在小屏幕下，执行之后的 CSS。具体匹配哪些元素要用谷歌浏览器的『检查』功能。
问了几次 aofei 如何修改 CSS 后，我自己成功地将 cmd markdown 渲染出来的引用格式移植到了博客上。
过程也很简单：先用『检查』功能找到 cmd markdown 页面上的引用对应什么元素，然后在它的 css 文件里找到对应的代码，copy 到本地 style.css 里就 ok 了。好在 hugo 足够快，改完代码能立马看到效果，我就可以不断地尝试。
static 目录下面的文件会移到网站根目录
当我们想让一些文件在执行 hugo 命令后出现在网站根目录下，只需要将它们放到 themes/maupassant/static 就行了。例如，我在博客首页右边栏放了一张《Go 程序员面试笔试宝典》，它是一个全局资源。
因此图片路径要用 /book.png。一开始我用的是 book.png，结果我切到『归档』页面后，图片无法展示。
关于博客的样式可能暂时折腾到这里为止，之后要有规律地更新文章了。
毕竟内容才是最重要的！