我的个人网站和公众号的结合

gopher云原生

发布于 2021-10-18 11:12:15

2K0

发布于 2021-10-18 11:12:15

文章被收录于专栏：gopher云原生gopher云原生

上个月底，接到个腾讯云客服的电话，询问我域名备案信息（一开始我还以为是诈骗电话），并让我将网站开放后在底部添加备案号以确保备案的审查可以通过。

回想起，我的域名 togettoyou.com 购买竟有 2 年多了，却一直处于闲置状态（其实是自己没能坚持下来，当初买域名是想搭建博客用的）。

正好趁放着国庆，就想把这个域名给利用起来，再搭一个博客的话，内心是不太想的，因为现在决定在公众号更文了，不想维护多处地方的排版（虽然都可以使用 markdown），还有个重要的原因是公众号可以得到伙伴们的关注，更文更有动力。

最终决定搭建一个网站只用作同步公众号的文章，站点本身不进行文章发布，但是要加上评论功能，因为我的号不能留言（了解到的留言号迁移方案都要大几千，太贵了，关注数多了再考虑，哈哈）。另外，微信是一个流量私域，网站同步文章的话还有个好处可以被搜索引擎收录，虽然不太期望能够带来流量，但万一呢。

结合我的需求，我定下的方案是 Vercel+Hugo+Etch+Waline，一套下来，一分钱不花哦。

静态网站方案

静态网站生成器我选择了 Hugo，因为是 Go 写的，理由无它。

静态网站托管方案最常见的有 GitHub Pages 和 Gitee Pages，但是 GitHub 在国内的访问速度众所周知，Gitee 呢速度倒是起飞，但个人用户并不支持自定义域名。所以这两个方案都被我排除了，最后选择了 Vercel 。

不得不说 Vercel 的使用体验下来是真的 Nice，与生俱来的 CI/CD 模式让你代码一提交，直接自动编译部署到线上，而且随时可以回滚版本。

最最最省心的是 Vercel 是支持直接创建 Hugo 模板的，下面就分享一下 Vercel 部署 Hugo 的教程。

Vercel 部署 Hugo

在 Vercel 网站[1] 注册并登录，这里有个小坑是，注册的时候是不能用 QQ 邮箱的（经过测试 foxmail 邮箱是可以的），会被拒掉，即使是使用 GitHub 账号注册，主邮箱也不能为 QQ 邮箱。

创建一个应用，选择 Clone Template ，找到 Hugo

这里需要关联你的 GitHub 账号，用于 Hugo 网站代码的存放，建议是选择私有仓库。

创建团队，跳过即可

然后就耐心等待部署完成吧

完结撒花

创建完成后 Vercel 其实会为我们的站点生成一个默认的域名，但绑定自己的域名才更酷 😎，找到域名绑定，输入你需要绑定的域名，按照提示信息设置 cname 解析即可。

至此，一个默认的 hugo 站点就部署起来了。

Hugo 主题选择

对于主题风格，我个人喜欢简洁至上，我选择的是 Etch[2] ，要更改主题，首先把你的 Hugo 站点代码 clone 到本地，然后将 Etch 代码下载到 themes 文件夹，如下（我把默认的主题删除了，并对 Etch 进行了一些魔改）：

随后更改 config.toml 内的主题为 theme = "etch" ，其他更多的配置参考 Hugo 文档[3] 。

请注意，Vercel 默认的 Hugo 版本并不是最新的，我建议是保持 Vercel 上的 Hugo 版本和你本地的一致，避免因线上线下版本不一致引发一些奇奇怪怪的问题，可以在项目根目录创建 vercel.json 来设定 Hugo 的版本，例如：

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.88.1"
    }
  }
}

为站点增加评论功能

评论系统其实已经是百花齐放了，有利用 Github Issues 的，有服务商提供的，有自行部署搭建的，我最终选择了 Waline[4] ，它可能并不是最强大的，但其功能对我来讲已经绰绰有余了。

Waline 有传统的服务端、数据库、客户端三部分，我的部署方案是服务端依旧使用 Vercel 一键部署，数据库选择 LeanCloud 国际版免费开发版，剩下的客户端指的就是集成在 Hugo 本身了，部署教程直接去看官方的文档很详细了。

我这里讲讲我是如何将客户端集成到 Hugo+Etch 的。

首先在 themes/etch/layouts/partials/head.html 使用 CDN 引入 Waline ：

{{ if .Params.comment -}}
<script src="//cdn.jsdelivr.net/npm/@waline/client"></script>
{{ end -}}

接着创建 themes/etch/layouts/partials/comment.html 文件，内容如下：

<div id="waline"></div>
<script>
  Waline({
    el: "#waline",
    dark: "auto",
    serverURL: "waline 服务端域名",
  });
</script>

修改 themes/etch/layouts/_default/baseof.html 为：

<!DOCTYPE html>
<html>
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        <main id="content">
        {{- block "main" . }}{{- end }}
        </main>
        {{ if .Params.comment -}}
        {{- partial "comment.html" . -}}
        {{ end -}}
        {{- partial "footer.html" . -}}
    </body>
</html>

最后在你需要开启评论功能的 md 文件中添加如下注释即可：