部署 Hugo 网站到 Netlify

原文连接：部署 Hugo 网站到 Netlify

Netlify 是什么？它是一家云计算公司，为静态网站提供托管和 serverless 后端服务。

关键在于，与 GitHub 相比，Netlify 托管的网站速度更快，也更稳定。

本文就来介绍如何部署一个 Hugo 网站到 Netlify 和一些额外设置。

主题子模块化

首先要 Fork 主题到你本身的帐号，这样便可以自定义主题，又能够 Pull 到最新的更新。

而后要把 Hugo 网站的主题子模块化，由于 Netlify 不支持子模块之外的方法来使用主题，如最多见的：

git clone https://github.com/olOwOlo/hugo-theme-even themes/even

若是原来使用的是 git clone 则须要先删除主题（注意备份），再在网站根目录下输入添加主题子模块的命令：

git submodule add https://github.com/linehk/hugo-theme-even.git themes/even

若是在网站根目录下出现 .gitmodules 文件，且内容跟个人相似，则表示成功：

[submodule "themes/even"]
    path = themes/even
    url = https://github.com/linehk/hugo-theme-even.git

能够选择在 .gitignore 中加入 public/ 来忽略掉 public 文件夹，由于已经不须要了。

而后 git push 到远程仓库便可。

部署

跟官网宣传的同样，部署 Hugo 网站到 Netlify 很是简单，步骤以下：

1. 点击官网右上角的 Sign up 来注册登陆
2. 登陆成功后会转到相似 https://app.netlify.com/teams... 的连接，点击 New site from Git 新建网站
3. 选择前面部署到的代码托管平台，如：GitHub
4. 选择前面上传到的远程仓库

5. 【可选】在 Build command 加入 --cleanDestinationDir --forceSyncStatic --gc --ignoreCache --minify 等额外参数，这些参数的做用以下：

   • --cleanDestinationDir：构建前先清理目标文件夹，即 public
   • --forceSyncStatic：强制同步 static 文件夹
   • --gc：构建后执行一些清理任务（删除掉一些没用的缓存文件）
   • --ignoreCache：构建时忽略缓存
   • --minify：压缩网页（Debug 时慎用）
6. 最后点击 Deploy site 便可

通过部署后已经能够经过 Netlify 分配的域名来访问网站了，如：https://sulinehk.netlify.com/

自定义域名

对于想对网站使用主域名而言，自定义域名很简单：

1. 找到 Domain settings 选项卡，点击进入域名设置
2. 在 Custom domains 一项下点击 Add domain alias 来添加自定义域名
3. 在弹出来的输入框输出主域名便可，如：www.sulinehk.com
4. 在域名商处添加以下的 DNS 记录，等待 DNS 刷新，看到主域名处出现 NETLIFY DNS 的墨绿色标志即表明成功

dns1.p01.nsone.net
dns2.p01.nsone.net
dns3.p01.nsone.net
dns4.p01.nsone.net

设置重定向

仍是在 Custom domains 选项卡，点击 How to redirect the default Netlify subdomain to your primary domain 展开查看代码。

个人代码以下：

# These rules will change if you change your site’s custom domains or HTTPS settings

# Redirect default Netlify subdomain to primary domain
https://sulinehk.netlify.com/* https://www.sulinehk.com/:splat 301!

在 static 目录下新建文件 _redirects，粘贴代码进去。

开启 HTTPS

在 HTTPS 选项卡下的 SSL/TLS certificate 选项开启便可。

证书的签发者为 Let’s Encrypt，支持自动续期。也能够自定义别的签发者。

若是想在 Chrome 地址栏里看到小绿锁（小灰锁），还须要把全部连接都替换成以 https:// 开头的连接。

接着在页面按下 F12 来打开开发者工具，并切换到 Network，刷新页面，查看有什么请求不是以 https:// 发出的，修改相关页面来替换。

展现状态徽章

在 Status badges 选项卡下有个连接代码，该连接代码能够展现该网站的部署状态。

你能够在网站的 GitHub 仓库下的 README.md 文件中展现它，或者将它放在网站主页的 footer 上。

这是个人连接代码：

[![Netlify Status](https://user-gold-cdn.xitu.io/2019/6/18/16b68e92e8f41b91?w=136&h=20&f=svg&s=4820)](https://app.netlify.com/sites/sulinehk/deploys)

还有它的展现效果：

参考连接

Using git submodule for Hugo themes