Hugo建站

使用Github、Vercel托管免费部署Hugo博客网站

本文整理Hugo建站的过程，本站使用Hugo搭建，代码托管到Github,同时使用Github账号同步到Vercel,通过Vercel自动编译，自动部署，然后购买了个域名绑定，就有了各位看到的本站目前的样子，平时写文章的时候直接本地编写markdown,写完后用Github desktop上传，不用命令行操作，比较简单已用。

常规步骤

大部分Hugo建站的都是本地安装hugo，然后挑选下载主题到hugo安装目录，我最开始也是这么做的，但是安装调试步骤还是有一点复杂的，并且我用的主题按照官方配置编译总是报错，折腾了很久，喜欢折腾的用户可以尝试，像快速用起来的用户可以直接看第二节，用我修改调整好的模板，应该半小时就可以搭建起来。

hugo下载地址：https://github.com/gohugoio/hugo/releases

hugo官方主题地址：https://themes.gohugo.io

快速搭建

本站模板Github仓库地址，hugo-theme-stack-mod ，主题基于https://github.com/CaiJimmy/hugo-theme-stack 修改而来，挑了很久，这个主题的功能界面个人觉得比较舒服，而且分类，标签，年度存档等功能都有，使用我修改的主题后，如果需要更详细的配置还是需要大家去阅读官方作者的使用文档，包括修改网站标题这种基本配置，还有其他更详细的配置，基本上在我的模板基础上修改了网站标题，头像，就可以正常使用了，剩下的配置可以慢慢摸索，下面说一下使用步骤。

Fork我的模板仓库到你的Github账户，或者下载下来源码，自己建Github仓库再上传源码也可以，重要的是把源码传到自己仓库，仓库名字随意按照自己的喜好起，未来编辑文章资料都是存在你的仓库，推荐用Github desktop,这样就不用命令行操作了。

修改两个文件，根目录下的hugo.toml和config/_default目录下的config.toml两个文件，把里面的baseurl和title换成你自己的，有一点提醒一下，baseurl最后的结束需要有"/"，至此使用hugo-theme-mod的网站搭建完成了80%,剩下的就是部署，源码目录里面有些实例文章，所以可以先不用去写文章，先部署看效果。

网站部署

本站选择用Vercel部署，很多人应该知道，其实Github也能免费部署用户的博客网站，此功能叫做Github Page,之所以不用Github Page主要是因为国内访问质量堪忧，不少国内地区直连是无法访问的，或者网速特别慢，但是使用Vercel部署，全国都可以访问，并且延迟极低，免费使用Vercel的cdn服务,基本全国延迟都是绿的。Vercel提供的这个服务很棒，为了避免薅羊毛，所以也有比较严格的风控机制，同一台机器只能注册一个Vercel账号，就算换梯子，换IP也没用，注册页面直接选择用Github账号登录，同时导入您建立的github网站仓库。

Vercel导入成功后，需要对这个网站项目做两个设置：

  1. Project setting->Build and Deployment->Framework Settings 设置Framework preset选择Hugo(此处不一定需要手动设置，系统很多时候就自动检测到了)
  2. Project setting->Environment Variables 此处需要增加一个环境变量，Key添加HUGO_VERSION，Value添加0.145.0，保存即可，这个设置的主要作用是指定Vercel编译部署的时候用到的Hugo版本，它默认用的版本很低，会导致项目编译失败。环境变量设置位置如下图：

hugo environment Variables

至此所有部署工作结束。

网站访问

上面工作完成后，网站就可以访问了，未来你需要编写文章的时候，只要编写完成后将内容同步到Github仓库，Vercel就会自动编译生成新的网站，进入Project setting->Domains中可以看到Vercel给自动生成的域名，格式为“*.vercel.app”,浏览器输入这个域名就可以访问了。如果您自己购买了域名，也是在此处进行配置，按照Vercel的提示，通常需要解析两个域名

  1. 首先将根域名比如flashspace.org A解析到76.76.21.21，并且在Vercel中设置301重定向到www.flashspace.org，这样用户访问flashspace.org也会自动跳转到www.flashspace.org
  2. 然后将二级域名www.flashspace.org CNAME解析到cname.vercel-dns.com，这样就可以用上Vercel的CDN服务了

模板更改点

模板我主要做了以下修改：

  1. 基本的配置，比如中文
  2. sitemap.xml修改，去掉了tag，分类，云标签等内容，避免了这些内容被搜索引擎索引，影响seo优化，sitmap中只有网站首页及我们写的文章
  3. 增加了robots.txt文件，屏蔽了page页面的索引，同样是作为seo优化(请把sitemap中的路径修改成自己的域名)
  4. 去掉了把文章的description自动作为副标题的代码，因为最佳seo实践推荐description文字要150~160个字，这个会导致我们的首页文章索引看起来极为臃肿。

以上作为一个使用Hugo框架，使用stack主题的一个快速搭建的总结，后续在继续补充进一步的细化设置，希望有缘看到这个内容的朋友能参考我的步骤不走弯路的快速0成本搭建也给属于自己的小网站。