原文地址：码农在新加坡的个人博客

使用个人博客也有一年多的时间，这一年多的时候踩了很多坑，也学到了很多知识。
这里分享一个系列教程：从零开始搭建个人博客，把我的经验分享在这里。
系列地址：https://left-pocket.github.io

从零开始搭建个人博客（四）- hugo自动部署到vercel

我们当前已经把hugo部署到Github Pages上。但是Github Pages有两个小问题：

• 国内访问慢，有些地区访问Github Pages可能超时
• Github禁止百度抓取网页，意味着你的网站没办法在百度上搜到。

当然你可以部署到自己的云服务器上，但是当我们没有云服务器的时候，就要找一些免费的托管商。 Vercel就是这样一个满足我们需求的托管商。
其中大名顶顶的Next.js,create-react-app,Nuxt.js等就是部署在部署托管在vercel的。

Vercel可以支持一键导入Github, Gitlab，非常方便。

部署到Vercel

想要把自己的博客部署到Vercel，有两种方式：

1. 源码托管，Vercel会自动编译成目标文件。
2. 目标文件托管，把Github Pages导入Vercel。

经过我的实验，两种方式都可以成功，看个人喜好。 不过目标代码托管比较简单。
我这里两种托管方式都介绍。

无论哪种方式，都需要先注册一个Vercel账号：
Vercel 我这边直接使用github注册，同时方便从Github导入仓库。

下面介绍下如何进行源码部署：

一、New Project

二、Import Git Repository->Add Git Repository

选择源文件仓库 left-pocket-test然后点击Import

1. FRAMEWORK PRESET 自然是Hugo
2. Build Command 是hugo
3. Output directory是public
4. Environment Variables 填写hugo版本。不然会默认使用很旧的版本。

使用hugo version查看你的hugo版本。
NAME: HUGO_VERSION, VALUE: 0.89.4

四、点击发布

一、如果出现：

WARN 2021/11/29 14:03:51 found no layout file for "HTML" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

这是因为你的主题并没有发布到你的Github上，只是发布了一个软链接。 去到你的themes目录：

➜ even git:(master) rm -rf .git

如果还是没有变动需要提交，重命名even提交，然后再改回来，就可以正常提交了。

二、如果出现：

ERROR 2021/11/29 14:10:32 mkdir /vercel/path0/public: file exists

意思是public文件已经存在了，Vercel没办法给你编译成目标文件，你需要从Github删除public并忽略public文件提交到Github。

方式：
你把public rename一下，并把public加到 .gitignore里面提交，然后再把名字改回来，就自动被忽略了。

mv public public2

git add public public2
git commit -m "mv"
git push

echo 'public'>>.gitignore

mv public2 public

git add public2
git commit -m "gitignore"
git push

这样public就会忽略提交了且从Github删除。 点击Redeploy重新部署。（要从主界面重新进入，才是main branch） 等一会就发布成功了。

如果左边的小窗口显示正常，就说明发布成功，点击Visit

可以看到发布成功了。

可以看到Vercel自动给分配了一个域名。
下一篇将讲解申请免费域名并绑定你的博客地址。

注意：
BUILD COMMAND是可以支持多行命令的，如果你有定制化的需求。
比如：

• 同时部署Github Pages和Verel，想要修改config.toml里面的域名。
• 想增加一个sitemap.xml等等。

可以像我一样：

sed -i "s/left-pocket.github.io/www.left-pocket.tk/g" config.toml; hugo; cd public; cp sitemap.xml gg_sitemap.xml; cd ../

是不是很强大。

目标代码托管

目标代码托管类似，只是不需要Vercel帮你编译你的源文件，而是直接托管你的目标代码：

一、New Project

二、选择left-pocket-test.github.io并Import

1. FRAMEWORK PRESET 选Other
2. 点击Deploy

托管成功。

下一章节讲讲述申请免费域名并绑定到个人博客。

<全文完>

欢迎关注我的微信公众号：码农在新加坡，有更多好的技术分享。