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

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

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

Netlify Logo

主题子模块化

首先要 Fork 主题到你自己的账号，这样即可以自定义主题，又可以 Pull 到最新的更新。

然后要把 Hugo 网站的主题子模块化，因为 Netlify 不支持子模块以外的方法来使用主题，如最常见的：

1

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

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

1

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

如果在网站根目录下出现 .gitmodules 文件，且内容跟我的类似，则表示成功：

1
2
3

[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/linehk/sites 的链接，点击 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 的墨绿色标志即代表成功
1
2
3
4

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 展开查看代码。

我的代码如下：

1
2
3
4

# 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 上。

这是我的链接代码：

1

[![Netlify Status](https://api.netlify.com/api/v1/badges/04d31b4a-979e-4e29-970b-e769f41130df/deploy-status)](https://app.netlify.com/sites/sulinehk/deploys)

还有它的展示效果：Netlify Status

参考链接

Using git submodule for Hugo themes