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