HUGO 靜態網站生成器 2 分鐘上手 / Create Static Website with Hugo in 2 minutes

1. 今天的講題剛好也有講到部落格，這邊跟大家介紹一個非常適合用來寫部落格的工具 HUGO，這是一個最近非常紅的靜態網站生成器，非常容易使用，如果有寫過程式的人應該都能在 2 分鐘內上手。

HUGO 的官方網站文件非常詳盡，他的 Quick Start 也是標榜 2 分鐘上手，不過如果你照著 HUGO 的 Quick Strart 去做，可能會遇到雷，在產生第一篇文章時就會發生錯誤，可能是因為版本不同的原因，我這邊已經有幫大家除過雷了，只要跟著投影片做就沒有問題。

2. 好，首先跟各位介紹一下我自己，我是林志傑，網路上常用的名字是 Fukuball，所以各位可以用 Fukuball 這個關鍵字找到我。我現在在 KKBOX 工作，之前在 iNDIEVOX 當過技術長、目前也是 CodeTengu 碼天狗技術週刊作者群之一，我使用 PHP 及 Python，最近對機器學習很有興趣。

3. 那 HUGO 是什麼呢？其實就是一個靜態網站生成器，目前已經有很多靜態網站生成器了，像是 Jekyll、Middleman、Roots 等等，那 HUGO 的作者為何要再開發一個同樣的東西呢？這邊作者有寫下他的抱怨，主要就是因為其他靜態網站生成器安裝複雜、有許多 dependencies，然後 render 網站的速度在頁面到達幾百篇時就會開始覺得慢。

所以他才做了 HUGO，為了要避免上述的問題，作者發現使用 Go Language 能夠做出一個很好的解決方案。Go 安裝容易、dependencies 少、而且速度快，所以用 Go 寫的 HUGO 在 render 靜態頁面時實測 5000 篇文章，生成整個網站只需要 6 秒，其他生成器都要數分鐘以上。

4. 像這樣的靜態網站生成器非常適合用來架設個人部落格或是內容網站，他的好處是不必再自己 Host 一個資料庫，且非常容易部署，只要用 GitHub Page 就可以部署自己的部落格，然後由於網站內容都是用 markdown 寫的，你可以將文章的修改過程記錄在版控之中，這是資料庫網站比較難做到的。部署容易、不用再管資料庫及伺服器，你就可以更專注於寫文章！

5. 好，那接下來我們就來實際使用一下 HUGO 看看。在 Mac 上只要用 brew 就可以安裝好 HUGO，其他平台也很容易安裝，大家可以自己看看參考連結。如果不想安裝，其實也可以直接下載 Binary 執行檔來使用，這就是用 Go 寫的好處之一。

6. 安裝好 HUGO 之後，讓我們來兩分鐘上手一下。

首先新建一個靜態網站出來，指令是 hugo new site mysite。

再來進入 theme 的目錄，讓我們安裝一個 theme 來使用，這邊我選擇使用 beautifulhugo 這個 theme，大家也可以去官方網站挑選自己喜歡的 theme 來使用。

安裝完 theme 之後就回到網站根目錄。

7. 接下來這一步很重要，在使用 HUGO 產生文章時，他會需要一個 template，我們要先建立這個 template 在 archetypes 目錄底下，命名為 default.md，然後把這一段內容貼進去。

這樣才有辦法順利使用 HUGO 指令產生文章，官方網站的 Quick Start 沒有寫到這段，所以在這邊會遇到問題。

接下來可以修改 config.toml 設定成自己想要的設定。

8. 做完這些之後我們就可以開始使用 hugo new 這個指令來產生文章了，我們來產生一下這些文章 about.md、post/go.md、post/php.md、post/python.md。

寫好這些文章之後，使用 hugo server -t beautifulhugo - -buildDrafts 來開啟網站 server。其中 -t 的意思是要使用那個 theme，對應到 theme 裡面的資料夾名稱。buildDrafts 的意思就是設為草稿的文章也要 build。Server 開起來之後，文章或頁面有做任何修改，都可以馬上看到。

文章完成之後，可以將文章的草稿設為 false，然後使用 hugo 這個指令就會產生靜態頁面到 public 資料夾，這些靜態頁面你就可以放到 GitHub Page 上去，這樣就完成了一個靜態網站了。

以上就是兩分鐘上手了，真的非常簡單！

9. 上手之後，我們再來深入了解一下。首先是網站的檔案配置，archetypes 是用來放置生成文章的配置相關檔案。content 是用來放置文章實際內容的相關檔案。data 可以用來放一些參數。layouts 用來放置網頁排版相關檔案。static 用來放置 css, js, 圖片相關檔案。themes 用來放置主題相關檔案。config.toml 則是用來放置網站的設定。稍微知道這些資料夾的用意之後，大家可以參考一下 theme 裡面的範例，參考一下 theme 的範例如何使用這些配置。

10. 我們這邊稍微講一下如何調整 Layout，有兩種方法可以調整 Layout，一個是直接調整所使用 Theme 的 Layout。另一種是複製一份 Theme 的 Layout 至 layouts/ 中調整。我們來實際動手做做看。

官方是推薦第二種方法。

11. 如果要開啟 Disqus 評論功能要怎麼做呢？由於 Layout 可以直接寫 html，基本上照著 Disqus 的說明做就可以，但 Hugo 有幫忙整合所以可以直接在 config.toml 中增加 disqusShortname。然後再查看一下 Theme 中的 disqus template 中如何打開評論功能，通常在文章中設定一個參數就可以打開，比如：comments = true。我們來實際動手做做看。

12. 如果要讓程式語法高亮要怎麼做呢？查看 Theme 中的 head template，加入以下這段 script 及 css。我們來實際動手做做看。

13. 如果要讓文章可以寫數學式要怎麼做呢？一樣查看 Theme 中的 head template，加入以下這段 script 及 css。我們來實際動手做做看。

14. 如果要更深入使用 Hugo 的語法調整網站的介面，可以看一下官方網站的 Template 部份，這邊會告訴你怎麼取出文章，怎麼印文章，不難，大家一定可以自己看。

15. 最後，如果大家心動想要搬部落格了，這邊我提供從 Ghost Migrate 到 Hugo 的方法，因為我自己是使用 Ghost 寫部落格。首先第一步從 Ghost 匯出資料，他會給你一個 JSON 格式的檔案。第二步我們使用 migration 工具，安裝 Go 的套件 ghostToHugo，就可以一鍵完成搬家。我這邊也提供一個 Python 的 Script 可以 migration Ghost 文章到 Hugo。

16. 這就是我今天這個講題所有的內容，希望大家都有得到收獲，如果有問題可以現在發問，或者用上面這些方式與我聯繫，謝謝！

Transcript

1. HUGO 靜態網站⽣生成器 2 分鐘上⼿手 Create Static Website with Hugo in 2 minutes Fukuball Lin @ Go Taiwan
2. 關於我 Fukuball / 林林志傑 Fukuball Lin @ Go Taiwan 簡介 幕僚僚⼯工程師
3. Hugo 是什什麼？ • 靜態網站⽣生成器，ex. Jekyll, Middleman, Roots • 作者的抱怨：All had complicated installation dependencies and took far longer to render my blog with its hundreds of posts than I felt was acceptable. • ⽤用 Go 寫的！ • I wanted to develop a fast and full-featured website framework without any dependencies. The Go language seemed to have all the features I needed in a language. • 快！ • 實測 5000 篇⽂文章，⽣生成整個網站只需要 6 秒，其他⽣生成器則要數分 鐘 簡介 Fukuball Lin @ Go Taiwan
4. 靜態網站好處 • 不⽤用⾃自⼰己 Host 資料庫 • 部署容易易，GitHub Page 就可以 Host • ⽂文章修改在版控之中 簡介 Fukuball Lin @ Go Taiwan 專注於寫⽂文章！
5. 安裝 • Mac： • 其他平台：參參閱 https://gohugo.io/ overview/installing/ • 或者下載 Binary 執⾏行行檔 安裝 Fukuball Lin @ Go Taiwan $ brew install hugo
6. 兩兩分鐘上⼿手（1） 上⼿手 Fukuball Lin @ Go Taiwan // 新建⼀一個靜態網站 $ hugo new site mysite // 進入 theme ⽬目錄 $ cd mysite/themes // 安裝 theme $ git clone https://github.com/halogenica/beautifulhugo.git // 回到根⽬目錄 $ cd ..
7. 兩兩分鐘上⼿手（2） 上⼿手 Fukuball Lin @ Go Taiwan // 打開編輯器 // 創建 archetypes/default.md，貼上： +++ title = "{{ replace .TranslationBaseName "-" " " | title }}" date = "{{ .Date }}" draft = true subtitle = "" tags = [] +++ // 修改 config.toml 內容
8. 兩兩分鐘上⼿手（3） 上⼿手 Fukuball Lin @ Go Taiwan $ hugo new about.md $ hugo new post/go.md $ hugo new post/php.md $ hogo new post/python.md $ hugo server -t beautifulhugo --buildDrafts // 完成！！！！ $ hugo -t beautifulhugo // Build static pages
9. 檔案結構配置 上⼿手 Fukuball Lin @ Go Taiwan archetypes/ # 放置⾃自動⽣生成⽂文章內容配置相關檔案 content/ # 放置⽂文章實際內容相關檔案 data/ # 放置⼀一些參參數值 layouts/ # 放置網⾴頁排版相關檔案 static/ # 放置 css, js, fonts, media 等靜態檔案 themes/ # 放置主題相關檔案 config.toml # 設定檔
10. Layout 調整 • 兩兩種⽅方法 • 直接調整所使⽤用 Theme 的 Layout • 複製⼀一份 Theme 的 Layout ⾄至 layouts/ 中調整 深入 Fukuball Lin @ Go Taiwan
11. Disqus 評論功能 • config.toml 中增加 disqusShortname = ‘yourdisqusname' • 查看 Theme 中的 disqus template 中 如何打開評論功能，通常在⽂文章中設 定⼀一個參參數就可以打開，比如： comments: true 深入 Fukuball Lin @ Go Taiwan
12. 語法⾼高亮 • 查看 Theme 中的 head template， 加入： 深入 Fukuball Lin @ Go Taiwan <script src="https://yandex.st/highlightjs/8.0/ highlight.min.js"></script> <link rel="stylesheet" href="https://yandex.st/ highlightjs/8.0/styles/tomorrow-night.min.css"> <script>hljs.initHighlightingOnLoad();</script>
13. 數學式 • 查看 Theme 中的 head template， 加入： 深入 Fukuball Lin @ Go Taiwan <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} }); </script> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/ libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
14. 更更深入使⽤用 Hugo • Template ⽂文件：https://gohugo.io/ templates/overview/ 深入 Fukuball Lin @ Go Taiwan 不難，⾃自⼰己看
15. 從 Ghost 到 Hugo • 第⼀一步：從 Ghost 匯出 GhostData.json • 第⼆二步：使⽤用 migration ⼯工具： • Go • go get -u github.com/jbarone/ghostToHugo • ghostToHugo GhostData.json • Python • https://github.com/fukuball/hugo/blob/master/ migrate/ghost-hugo.py 遷移 Fukuball Lin @ Go Taiwan
16. Q & A Find Me Twitter @fukuball Github @fukuball Facebook @fukuball Fukuball Lin @ Go Taiwan