迁移到 cloudflare pages

2023-01-03

今天整理自己的 github 的时候，突然发现自己的博客被人 fork 了，然后点进去一看，那人居然把我的名字和头像改了，然后堂而皇之地把所有文章都挂在自己的网站上。人类的多样性总是让我震惊，而我也想不通他这么做的理由，于是只能 block 了事。

把整个网站的源代码直接公开在 github 上就是会有这样的麻烦。搜索了一下资料，发现两点：

只有 付费用户 才能将仓库设置为 private ，同时还让 github.io 可见
只有 付费用户 才能禁止他人 fork 公开仓库

看来只能跑路了，以前用 cloudflare 搭过一个小网站，体验还不错，于是就准备花一个小时迁移过去。

和 github pages 的区别

优点：

私有仓库，不用担心别人直接克隆你的网站
更大容量。在两者都是免费帐号的前提下，github page 有 1GB 的限制¹, 而 cloudflare 支持 20,000 个文件，单个文件上限 25MB ，总计上限 500GB²
内置访问情况统计

缺点：

更容易被墙。之前部署在 cloudflare 上的反代 worker 都已经被墙了，如果 pages.dev 将来被墙也是意料之中的事情；github.io 背靠 github 以及 microsoft ，被墙的可能性更小
国内访问速度可能不如 github pages. 这也是网上常有人拿来比较的点，然而就我个人的体验来说似乎差不多？（可能还 cloudflare 稍快）

如何部署

部署非常方便，只要连接到 git 代码仓库即可，但需要注意以下几点：

子域名在配置的时候就要设置好，部署之后是没法更改的，只能删了重来
默认的 hugo 版本非常低，需要在环境变量中设置 HUGO_VERSION

如何无痛迁移

无论如何以前的 github.io 链接已经都访问不了了，但是还是有更“无痛一点的方法”，通过配置仓库的 404 页面即可让旧链接自动跳转到新站点。

在 github page 仓库的根目录下创建 404.html 文件，填入如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Site migrated :(</title>
    <script>
      window.onload = function () {
      const destination = window.location.href;
      const redirectLocation = window.location.href.replace(
      "hsingko.github.io",
      "hsingko.pages.dev"
      );
      document.getElementById("body").innerHTML = "站点已转移至 cloudflare"
      window.location.href = redirectLocation;
      }
    </script>
  </head>
  <body id="body" style="text-align: center">
    Page not found
  </body>
</html>

这样就能让搜索引擎以及从其他网站上过来的人自动到新的地址了。