[Hugo] 架站步驟分享

利用Hugo架網站其實不難（MacOS），只是若想要讓網站成為自己心目中的版面還要多花一些功夫就是了。Hugo官網上也有簡單的教學，讓使用者可以快速架設Hugo網站。

Windows作業系統可以參考這篇。

Hugo簡介

Hugo是由Go寫成的靜態網頁產生器（static site generator），網站主要內容以Markdown格式撰寫，經Hugo編譯成HTML後可供瀏覽器瀏覽，其最大的優點為建置速度相較於其他靜態網頁產生器（如Jekyll）快上許多，另外便是其英文教學文檔還算清楚。

在MacOS或Linux環境下安裝相對簡單。

1
brew install hugo

不知道什麼是brew的人可以參考Homebrew的官網。

安裝後確認是否安裝成功：

1
2
$ hugo version
Hugo Static Site Generator v0.74.3/extended darwin/amd64 BuildDate: unknown

版本號可能會不一樣，只要不要輸出錯誤訊息就好了。

1
hugo new site my_site

my_site是專案資料夾的名稱，可以自己決定。

Hugo沒有預設主題，必須要加入主題才能使網站運作。Hugo蒐集了許多的主題（theme），可以選擇自己喜歡的主題下載。這邊以Axiom為例。

1
2
3
cd my_site
git init
git submodule add https://github.com/marketempower/axiom.git themes/axiom

如果不想用git的話，也可以直接去GitHub下載整個專案，並放置在themes資料夾中。

如果想要以某個主題為基礎來創建新主題，也可以直接下載或以git clone、git subtree的方式處理。官方的建議是用git submodule。

如果確定要用該主題，可以在配置檔config.toml加入theme = "axiom"：

1
echo 'theme = "axiom"' >> config.toml

或著可以在預覽階段指定主題。

通常每個主題都會附上範例網頁，部分主題還會有說明文檔，可以各主題的範例網頁做為選擇的參考。

1
hugo new posts/my-first-post.md

Hugo會在content資料夾下建立posts/my-first-post.md，打開後會發現裡面有關於頁面建立時間的資訊，可以在其下方隨意加入一些內容。

開啟Hugo server便可預覽目前的成果：

1
hugo server -D

-D表示預覽所有非草稿及草稿（標註draft = true）頁面。如果沒在config.toml加入theme = "axiom"，可以在開啟server時指定主題：

1
hugo server -t axiom

接著在任何瀏覽器輸入http://localhost:1313/以預覽網站；在終端機按Ctrl+C便可關閉server。

在預覽過程中可能會發現和主題作者所提供的範例頁面有所出入（某部分無法順利顯示等），這便要視各主題有沒有要求任何必要變數使模板順利運作。如果原作者有提供說明文檔或範例頁面的原始碼，就可以藉此推敲出其中的端倪。

在所有設定（配置檔內容、草稿與否等）都配置好的情況下便可直接執行以下指令：

1
hugo

Hugo會建立public目錄，其內容包括靜態網頁所需的HTML、CSS、JS檔。hugo指令亦可藉flags（-D、-t等）輔助配置。