部署 Hugo 網站到 Netlify

原文連接：部署 Hugo 網站到 Netlify

Netlify 是什麼？它是一家雲計算公司，爲靜態網站提供託管和 serverless 後端服務。

關鍵在於，與 GitHub 相比，Netlify 託管的網站速度更快，也更穩定。

本文就來介紹如何部署一個 Hugo 網站到 Netlify 和一些額外設置。

Netlify Logo

主題子模塊化

首先要 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. 登陸成功後會轉到相似 app.netlify.com/teams/lineh… 的連接，點擊 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 分配的域名來訪問網站了，如：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