原文链接:部署 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 非常简单,步骤如下:
- 点击官网右上角的 Sign up 来注册登录
- 登录成功后会转到类似 https://app.netlify.com/teams... 的链接,点击 New site from Git 新建网站
- 选择前面部署到的代码托管平台,如:GitHub
- 选择前面上传到的远程仓库
-
【可选】在 Build command 加入
--cleanDestinationDir --forceSyncStatic --gc --ignoreCache --minify
等额外参数,这些参数的作用如下:-
--cleanDestinationDir
:构建前先清理目标文件夹,即 public -
--forceSyncStatic
:强制同步 static 文件夹 -
--gc
:构建后执行一些清理任务(删除掉一些没用的缓存文件) -
--ignoreCache
:构建时忽略缓存 -
--minify
:压缩网页(Debug 时慎用)
-
- 最后点击 Deploy site 即可
经过部署后已经可以通过 Netlify 分配的域名来访问网站了,如:https://sulinehk.netlify.com/
自定义域名
对于想对网站使用主域名而言,自定义域名很简单:
- 找到 Domain settings 选项卡,点击进入域名设置
- 在 Custom domains 一项下点击 Add domain alias 来添加自定义域名
- 在弹出来的输入框输出主域名即可,如:www.sulinehk.com
- 在域名商处添加如下的 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)