Hugo Basics

安裝

linux:

1

sudo snap install hugo

mac:

1

brew install hugo

檢查 hugo 版本

1

hugo version

建立一個 hugo repo

1

hugo new website "your_blog"

初始化專案

1
2

cd your_blog/
git init

加入喜歡的主題，從 https://themes.gohugo.io/ 去選一個

1

git submodule add "theme-url" themes/"theme"

E.g. hugo-stack

1

git submodule add "~/" themes/hugo-stack

Setting

路徑下會有 config.yml 或 config.toml ，加入 theme ，以及你想要網頁要放的 網址。

其他，就直接複製 themes/ 下的 config.yml 或 config.toml 的內容。

看個人需求，自己修改內容。

需要修改 baseurl, theme

• baseurl: 你即將要部署你的網站到哪個網址
• theme: 你的主題

config.toml

1
2
3
4

# config.yaml
baseurl: your-website-url
languageCode: en-us
theme: your-theme

E.g.

1
2
3
4

# config.yaml
baseurl: https://davidzwei.github.io/
languageCode: en-us
theme: hugo-theme-stack

TODO:

等我有空再來寫一篇關於 hugo-theme-stack 如何客製化。

Build

編譯到 static website

路徑會在 /public

編譯在本地 server

1

hugo server

把 草稿的文章也編譯出來

1

hugo server -D

網站會暫時部署在本地這個網址下 http://localhost:1313/

可以到此網址下檢查一下

直接生成，不顯示在 local server

(要 deploy 前，記得要直接下此指令)

1

hugo

Deploy

我是部署到個人 github.io 主頁 ，也有人會用自己花錢申請 domain ，或是用 netilfy。不過，我是免費仔，然後覺得用 netilify 結尾的網站不美觀，所以決定部署在 github 主頁。

我是用兩個 github repo 來管理專案:

1. 一個放目前這個 hugo 專案，也可以當作備份，可以隨時切換桌機或筆電來寫文章。
   • 我把設 private
2. 另一個是 github 主頁的 repo (user-name/github.io) ，用來放編譯出來的靜態網頁。
   • 設 public

先用 submodule 來管理編譯出來的網頁，將目前路徑下的 /public 連結到遠端 [github.io](http://github.io) repo。

1

git submodule add "https://user-name/github.io" /public

接著， compile ，在 /public 下產生靜態網頁檔案。

1

hugo

最後，進到 /public ，確認遠端 repo 正確，就可以推了

1

cd public/

確認遠端 repo 是否正確

1

git remote -v

commit, push

1
2
3

git add .
git commit "My first blog"
git push origin main

References

1. hugo document: https://gohugo.io/documentation/
2. hugo themes: https://themes.gohugo.io/