Published on

Hugo - Static Site Generator

Authors

gopher-hero

Hugo 是用 Go 語言開發的靜態網站生成器。優點是建置速度極快,使用上指令簡單,再加上主題眾多,可以輕鬆快速建立自己的網站,是一個非常方便又省時的工具。

以下簡單介紹如何使用 Hugo 建立自己的 Blog

安裝 Hugo

使用 Homebrew 安裝 Hugo。

如果你是 Mac 以外的使用者,請看 官方文件 來進行安裝

brew install hugo

初始化

建一個新的專案,這裡就先用 my-blog 示範。

hugo new site my-blog
cd my-blog

加入主題

檢查一下有沒有 themes 這個資料夾,如果沒有需要先建立。

mkdir -p themes

選一個自己喜歡的主題 Hugo Themes,這裡用 hugo-theme-nix 這個主題示範

cd themes && git clone https://github.com/LordMathis/hugo-theme-nix

加入範例設定檔與文章

接著將主題內的範例設定檔和文章複製一份到根目錄下。

cp -r themes/hugo-theme-nix/exampleSite/* ./

這個步驟主要是複製主題內 exampleSite 下的設定檔 config.toml 跟文章 post,快速建立網站。 不同的主題使用的設定檔多少會有些差異,詳情請看各主題的使用文件

建立測試站

啟動本地端 dev 模式。

hugo server -D

使用瀏覽器開啟 http://localhost:1313/ 就能看到測試站了。

產出靜態檔案

hugo -D

在根目錄底下會產生出 public,直接將整個資料夾丟到網路上的空間就大功告成了!

另外提一下,GitHub 不支援直接建置 Hugo 的專案,所以需要再把 public 目錄 push 到 GitHub 上的專案。

心得後記

Hugo 真的很好上手,自建一個 Blog 網站沒花多少時間。大部份的時間反而都花在找主題跟 Firebase 和 DNS 設定上。下次有機會再來談談如何把剛剛蓋好的網站丟上 Firebase 吧。