部署 Hugo 在 Netlify

jia@jiatool.com (Jia) — Sat, 13 Jun 2020 22:10:00 +0800

前言

參考這篇「如何使用 Hugo 建立一個靜態網站」創建了一個靜態網站出來，本篇則示範如何將 Hugo 部署到 Netlify 上。

* 至於 "Netlify 如何註冊"、"使用 Flask 創建" 的相關文章，也可以參考我之前寫的另外一篇「使用Python、Flask和Netlify創建簡單的靜態網站」。

部署到Netlify

首先在專案根目錄新增一個檔案 netlify.toml。
* 此處可以參考官方說明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


[build]
publish = "public"
command = "hugo --gc --minify"
[context.production.environment]
HUGO_VERSION = "0.72.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
[context.split1]
command = "hugo --gc --minify --enableGitInfo"
[context.split1.environment]
HUGO_VERSION = "0.72.0"
HUGO_ENV = "production"
[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
[context.deploy-preview.environment]
HUGO_VERSION = "0.72.0"
[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
[context.branch-deploy.environment]
HUGO_VERSION = "0.72.0"
[context.next.environment]
HUGO_ENABLEGITINFO = "true"

將專案 Git 推上去(Push)到提供代管的服務平台，目前 Netlify 可以連接的有 GitHub、GitLab、Bitbucket 三個。
有關 Git 相關教學，可參考其他人的文章。

前往 Netlify 去新增一個網站(New site from Git)。

選擇Git平台

這邊它會自動抓取根目錄的 netlify.toml 檔案。

自動抓取設定檔

接下來等它部署完成。

部署完成

網域設定

前往 Domain settings 來去設定我們的網域。
* 至於如何購買網域，可以參考如何從 Google Domains 購買網域

Add custom domain

輸入網域

這邊會有這個警告，因為我們還沒去 DNS 設定啊~

Check DNS configuration

像我是使用 Google Domains ，裡面就可以設定 DNS。
"名稱" 隨你設定；選擇 "CNAME"；
"網域名稱" 輸入 Netlify 專案中預設的 subdomain (如上圖)

DNS 設定

HTTPS 設定

回到 Netlify 專案頁面往下滾，會看到 HTTPS 的設定，
點擊 Verify DNS configuration

HTTPS設定

當通過驗證後，會呈現如下圖。

HTTPS設定

前往你設定的網址(例如：https://blog.jiatool.com/)來看看是否成功吧~
不過要注意 SSL 憑證可能沒那麼快設定好生效，需要一段時間，
不確定多久，但我過了一小時去看已經好了。

SSL憑證已生效

遇到問題

如果你和我一樣使用 zzo主題，並且在部署時遇到以下錯誤：

JSON parse error

目前我有兩種解決辦法。

第一種
將 netlify.toml 檔案裡的 --minify 刪除，按照官方說明此參數是代表
minify any supported output format (HTML, XML etc.)

第二種
我發現只要將 content > en > publication 的資料夾移除即可，因此如果不會用到這個版型，就先將它拿掉吧。

我也有在 GitHub 上詢問過主題的作者，但他目前好像也不知道為什麼(? 🤣

如有遇到其他問題，或文章內容有誤，歡迎底下留言~😙

參考：
Host on Netlify | HUGO 官方
 Netlify 免費版！自建 Hugo 站台，並綁定域名與SSL安全憑證教學 | 梅問題教學網

這世界本來就瘋狂，你儘管去做認為正確的事。

—— 新海誠

Hugo on IT 空間

部署 Hugo 在 Netlify

前言

部署到Netlify

網域設定

HTTPS 設定

遇到問題