Hugo | 用Vercel完成blog自动化部署

2021-09-05

2966字

甘普基本变形定律

Hugo

一些没必要的起因

一开始其实没想装自动化，一是Hugo更新比Hexo快得多，也没有很麻烦，当我弄明白可以不删除Public文件夹之后，更是只剩下复制粘贴一下命令行的步骤；二是搜索“Hugo 自动化部署”出来的文章太多，工具也太多，偏偏也都没怎么太说明白，我看自动化部署犹如雾里看花越看越暗香浮动月黄昏，美则美矣，一头雾水；三是我总对自己的校对能力有不切实际的自信，怎么会有人天天写错别字呢！！

——有啊，我。

一篇文章连改六回还是有错别字和格式问题之后我跌跌撞撞地又打开了Google，这次学乖了，既然Hugo这边没有能把我教明白的，那我去隔壁Hexo偷偷师嘛！这一偷还真给我偷到了，隔壁Hexo还真的有一篇把原理讲得非常好的文章（如何使用 GitHub Actions 自动部署 Hexo 博客），仔细读了七八遍之后有了一些没来由的膨胀，感觉可以动手了。

自动化部署是什么

上面那篇文章已经讲得很好，总体而言，就是使用一系列自动化工具，实现“在Github上修改Blog源文件”→“工具自动进行编译和部署”→“打开网站，发现已经更新到了Blog上”这个过程。

其中第二步是不需要人来参与的，因此整体流程非常舒服，不但改个错别字（只需要打开Github改一下MD）很方便，也解决了在非常用电脑环境下想更新Blog的问题，嘛，比如出去旅游当晚想写个游记，又发现没带笔记本电脑。

目前我看到的自动化部署工具有好几种，最常见的是Github Action，利用Github自己的工作流进行部署，需要两个仓库或者两个分支，一个储存Blog源文件（根目录下所有的文件），另一个作为静态页面仓库（Public文件夹）。除此之外比较常见的有Travis CI、Webhook、Nginx等等，我没都看，但猜想应该都是一些自动化部署服务。我最后选用了Vercel，性质上应该和这几个很类似。

为什么选Vercel

最直接的原因是写了半天没写对Github Action的配置，花样跑不动，愤而放弃了Github Action。~~但是这么说也太逊了~~

另外一个原因是之前做Blog文章字数统计的时候请教过的怡红院落给我推荐了Vercel，我研究过一阵子，也大概走了走流程，非常简单。所以感情上也比较偏向于用Vercel而不是更陌生的服务来解决问题。哇他人真的好好，这次出错的原因特别刁钻，也多亏了他帮忙找到问题所在，不然我可能还要想十个小时……

最后就是我始终还是不太喜欢公开Blog仓库的感觉，Vercel可以在授权的情况下读取隐私仓库。

使用Vercel进行自动部署

这部分想直接引用几篇我参考的文章，因为实在没什么好说的——如果不是像我一样报了那么多错的话，大概五分钟就解决问题了。

流程上的话，我自己用的方法是这样的

在Github上新建一个仓库，Push Hugo Blog的源文件上去。这里我为了方便起见分支和服务器节点名字都用了新的

git init
git remote add vercel github仓库地址 //这里的vercel是服务器简称，可以随便换一个
git push vercel main //用main分支的目的是和push public文件夹的分支（master）区别分开，记得提前在Github上设置好

用Github登录Vercel，在Vercel上新建一个项目，在Let’s build something new页面左边的Import Git Repository，直接Import仓库。
跳过Create a Team，Configure Project选项中选择FRAMEWORK PRESET为Hugo，Build and Output Settings里覆盖BUILD COMMAND为hugo --gc（官方的默认命令会编译草稿文件），同时Vercel的Hugo版本比较老，所以需要在Environment Variables选项卡里指定环境变量，在NAME栏中填写HUGO_VERSION，VALUE (WILL BE ENCRYPTED)栏填写版本号（我填写的是0.78.1），点击添加
点Deploy，等它走完一系列流程
结束了，接下来可以去Github仓库试试看自动编译部署能不能运行，随便修改一个posts文件夹里的MD文章，然后刷新Vercel分配的网址看看是不是已经修改了。成功的话Go to Dashboard，点击Setting-Domains绑定一下自己的域名就可以了。

参考文章：

Hugo 之旅

Vercel 上自动部署你的个人博客 Hugo

妈妈，我登上月球了

直接控诉我报过的错的话这篇文章就会充满了涕下沾襟的哭诉，但是我不想每次回顾这篇文章都被从前的自己折磨一遍，所以还是长话短说。

无法找到模板

Deploy时在Buliding阶段报错，报错为：

Error: module "eureka" not found; either add itas a Hugo Module or store it in"/verce1/path0/themes ".: module does not exist
Error:Command "hugo -D --gc" exited with 255

原因：这是由于之前采用了git submodule的方式下载了主题的原因，如果使用git submodule，将Blog源代码上传到Github仓库的时候，Github会识别主题文件自动跳转到作者的主题仓库，或者识别为一个子模块（文件夹上显示一个白色箭头）。这时候Vercel会无法识别。

解决方案：删除原来的主题文件夹，直接下载主题文件并复制到themes/主题文件名里面。（所以之前自定义Blog的时候直接在根目录下进行设置非常重要，否则只能哭着重新来一遍了），注意themes/主题文件名这里的名称要和\config\_default\config.yaml里的theme名保持一致。比如如果config.yaml里是theme: eureka，那么文件夹就要建立为themes/eureka。最后重新push一遍到仓库。

站点依赖项

Deploy时在Buliding阶段报错，报错为：

Error: add site dependencies: load resources: loading templates: "/vercel/path0/layouts/docs/doc_list.html:3:1": parse failed: template: docs/doc_list.html:3: function "warnf" not defined

Error: Command "hugo -D --gc" exited with 255

原因：这是最坑的地方…………这里是环境变量设置问题，Vercel本身默认的Hugo版本比较老，与我使用的Eureka模板不兼容，因此要在Environment Variables选项卡里指定环境变量。但指定了环境变量之后就会发现，不管是指定我安装时候的0.88.0版本，还是指定目前Hugo最新的0.88.1版本，都还是会报这个错！！还是会报这个错！！！

解决方案：这是因为……版本太新了……指定个……老一点的……版本……就……好……了……比如我们可以用……0.78.1！……就能用……就不会报错了……怎么会这样……怎么会这样啊…………

绑定域名

完成了以上步骤以后，Vercel会给新的Blog分配一个很长很难看的新地址，所以下一步就是绑定我自己购买的域名。

进入项目，点击Setting-Domains，输入自己的域名（记得之前把它和github.io解绑），点击添加，然后它会提供两个重定向的选择，我都用不上，所以只选了最下面一个Add mantyke.icu。之后在域名商那里绑定它提供的DNS。

这时候视情况，网站会显示lnvalid Configuration报错。这个不用管，它需要一点时间来生效。我这边大概前后过了半个小时的样子就可以用了。当然也可以用ping地址的方式来检查，如果数据还是从之前的github.io地址来走，就是没生效，等等就好。

最后，我恍然大悟

我折腾Blog装修这么起劲，究其原因，还是要追溯到小时候都在玩论坛和不老歌等等，没有充分享受过QQ空间的装修乐趣，因此需要一定心理补偿。

……一定就是这样没错啦！