部署 Hugo 靜態網站

在 Mac 上使用 Hugo 運行個人網站

先安裝 Homebrew，再透過 Homebrew 安裝 hugo brew install hugo。

1

brew install hugo

CaiJimmy/hugo-theme-stack: Card-style Hugo theme designed for bloggers
- Stack | Hugo Themes (gohugo.io)
- Duran 的速寫筆記 (duranhsieh.com)

下載 Stack 主題，解壓縮後：

在 exampleSite 裡新建資料夾 themes
將 exampleSite 資料夾拉出來放外層
去掉 master，將 hugo-theme-stack-master 改名為 hugo-theme-stack 放入 themes 中。

在終端機，於 exampleSite 資料夾路徑下輸入 hugo server 運行網站

出現 http://localhost:1313/ 時，表示個人網站已經成功運行起來，將這行網址貼到瀏覽器，就會發現 Stack 這個主題的個人網站，已經成功在電腦上執行。

[!note] 如果無法執行，可用無痕視窗開啟

Config 參數設定

Config 格式若為 toml 檔時，使用 VSCode 安裝 TOML 插件。

基本參數

修改 config.yaml 檔中的預設參數設定

baseURL 網站網址
paginate 分頁連結，每頁顯示文章數。
title 網站標籤

在終端機上輸入 hugo server 將網站運行起來，可以看到標籤已經變成 Reno’s Blog。

permalinks

自訂每篇文章的網址：在每篇文章裡加 slug，會用自定義的 fish-shell 作為網址。

.yaml 中的設定

Site creation time 站點建立時間

社交網站的連結設定

新增文章

1

hugo new post/fish-shell.md

會在 /content/post 資料夾中建立 fish-shell.md。

分類文章、為文章加上標籤

頭字段(Front Matter)

line1~13 是 hugo 的文章設定，新建立的文章最前面都需貼上 Fron Matter 設定。 Hugo Content - Front Matter

title: 文章標題 description: 負標題，這篇文章的簡短介紹。 date: 撰寫日期，Hugo 預設會把最新的文章放在最前面。 draft: 可以指定這篇文章是不是草稿，Hugo 不會把標註為草稿(true)的文章顯示在網站上。 image: 標題圖片 pinned = true: 文章置頂

line6~11: 可為文章進行分類(categories)，以及加上標籤(tags)。

部署到 Github Pages

cd 到 Hugo 專案底下，執行 hugo 指令，打包 Hugo Site。

回到 Finder 上，會發現在 example Site 裡面多了一個 public 的資料夾，就是 Hugo 新產生出來的個人網站的程式碼。

複製 public 裡面全部的檔案跟資料夾放到==本地端== reiohuang.github.io 資料夾的 repository 裡，最後再把它上傳到遠端 Github 的 reiohuang.github.io 資料夾上。

git 初始化本地端 reiohuang.github.io 資料夾準備與遠端的 repository 綁定：

1
2
3


git init
git add .
git ci -m 'my first commit'

在 Github 中點擊 New repository，創建一個新的 repository。如果要使用 Github Pages 來架設個人網站，repository 的名字有命名規則，Github 帳號.github.io。

若使用 token 連接遠端時，需切換到 HTTPS

Github 在 2021/08/13 時，做了一次安全性更新，將密碼認證移除了。所以當本地 push 到遠端時，出現了以下提示訊息，表示需要重新調整設定，以 token 取代密碼，設定方式請參照 [[GitHub 改版使用個人令牌(token)]]。

本地端的資料夾與遠端儲存庫綁定，並 push 資料到 GitHub 遠端，Password 請輸入申請的 token。

成功上傳到 GitHub

開啟瀏覽器，網址列輸入 reiohuang.github.io，即可看到 Github Pages 已經成功地幫我們把 Hugo 的個人網站程式碼轉換成網站。

每次新增、修改文章時，記得最前面要貼上 Hugo 的文章設定，才能正常顯示。

添加評論功能

需要依靠其他的第三方網站才能達成，原理是因為 Github Pages 他是屬於靜態網頁，而評論功能是需要後端資料庫儲存，如果只使用 Github Pages 是沒有辦法加入評論功能。

進入 Hugo 首頁，Search the Docs 輸入 comments，點擊第一個連結，Hugo 預設支持的評論功能網站是 Disqus，所以要先進到 Disqus 這個網站申請一個帳號，在 Disqus 創建一個評論功能之後再回頭修改程式碼，把 Disqus 的帳號跟個人網站連結在一起。

注意：雖然 Hugo 預設支持的評論功能是 Disqus 網站，但是有的 Hugo 主題可能沒有開啟這個功能，所以要先檢查主題有沒有辦法加入評論功能。

在 config.yaml 設定檔裡面有找到 disqusShortname 的設定的話，就表示你使用的 Hugo 主題是支持 Disqus 評論功能，把申請的 Disqus 評論功能帳號填在這裡即可。

Disqus 評論功能

註冊 Disqus 後，點選 Add Disqus To Site 後，頁面拉到最下面點擊 GET STARTED 按鈕。

選擇下面 I want to install Disqus on my site

註冊網站

選取最下面 Basic 免費方案，點擊 Subscribe Now 按鈕。

因為 Hugo 平台沒有在選項裡面，所以選取最下面的 Universal Code

拉到最下面點擊 Configure 按鈕

設定 Disqus

Website URL：打上 Github Pages 幫我們架設的個人網站的網址

Appearance：可以選擇在個人網站上面呈現的評論系統要是什麼顏色，如果是 Auto 就會自動偵測你網站的顏色選擇適合的主題。

Comment and Moderation Settings 評論和審核設置

依喜好選擇，點擊 Complete Setup 按鈕後，最後再點擊 Dismiss Setup。

config.yaml 設定

disqusShortname 改成剛剛在 Disqus 上面申請的 Website Name 的值。不知道的可以點擊右上角 Edit Settings，回去看 Shortname。

將 Shortname 貼到 config.yaml 設定檔後存檔

執行 hugo server，隨選一篇文章，拉到最下面。看到此段表示你的 Disqus 設定已經設定好。Disqus 評論功能只有在你將設定上傳到 Github 之後才會生效。

回到終端機，按 Ctrl+C 停止 hugo server 運行，輸入 hugo 產生個人網站的程式碼。

將 exampleSite > public 資料夾裡全部內容複製到 reiohuang.github.io 資料夾中，勾選全部套用並取代。

提交 commit(add disqus) 並 push 到 Github

Utterances 評論功能

捨棄 Disqus 的理由：如何在hugo上安裝utterances?

把個人網站的評論跟 Github issues 討論區的功能結合在一起，別人只要來個人網站上留下評論，實際上就是在 Github repository 裡面開啟一個 issue，就可以在 issue 裡面看到所有的評論紀錄。如果要在 Hugo 上加入這個 Utterances 的評論功能，需要有 html 程式碼的基礎。

Utterances 評論產生的 issues 可以選擇你想放的 Repository 中：