HUGO 靜態網站⽣生成器 2 分鐘上⼿手 Create Static Website with Hugo in 2 minutes Fukuball Lin @ Go Taiwan 

關於我 Fukuball / 林林志傑 Fukuball Lin @ Go Taiwan 簡介 幕僚僚⼯工程師 

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 

靜態網站好處 • 不⽤用⾃自⼰己 Host 資料庫 • 部署容易易，GitHub Page 就可以 Host • ⽂文章修改在版控之中 簡介 Fukuball Lin @ Go Taiwan 專注於寫⽂文章！ 

安裝 • Mac： • 其他平台：參參閱 https://gohugo.io/ overview/installing/ • 或者下載 Binary 執⾏行行檔 安裝 Fukuball Lin @ Go Taiwan $ brew install hugo 

兩兩分鐘上⼿手（1） 上⼿手 Fukuball Lin @ Go Taiwan // 新建⼀一個靜態網站 $ hugo new site mysite // 進入 theme ⽬目錄 $ cd mysite/themes // 安裝 theme $ git clone https://github.com/halogenica/beautifulhugo.git // 回到根⽬目錄 $ cd .. 

兩兩分鐘上⼿手（2） 上⼿手 Fukuball Lin @ Go Taiwan // 打開編輯器 // 創建 archetypes/default.md，貼上： +++ title = "{{ replace .TranslationBaseName "-" " " | title }}" date = "{{ .Date }}" draft = true subtitle = "" tags = [] +++ // 修改 config.toml 內容 

兩兩分鐘上⼿手（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 

檔案結構配置 上⼿手 Fukuball Lin @ Go Taiwan archetypes/ # 放置⾃自動⽣生成⽂文章內容配置相關檔案 content/ # 放置⽂文章實際內容相關檔案 data/ # 放置⼀一些參參數值 layouts/ # 放置網⾴頁排版相關檔案 static/ # 放置 css, js, fonts, media 等靜態檔案 themes/ # 放置主題相關檔案 config.toml # 設定檔 

Layout 調整 • 兩兩種⽅方法 • 直接調整所使⽤用 Theme 的 Layout • 複製⼀一份 Theme 的 Layout ⾄至 layouts/ 中調整 深入 Fukuball Lin @ Go Taiwan 

Disqus 評論功能 • config.toml 中增加 disqusShortname = ‘yourdisqusname' • 查看 Theme 中的 disqus template 中 如何打開評論功能，通常在⽂文章中設 定⼀一個參參數就可以打開，比如： comments: true 深入 Fukuball Lin @ Go Taiwan 

語法⾼高亮 • 查看 Theme 中的 head template， 加入： 深入 Fukuball Lin @ Go Taiwan hljs.initHighlightingOnLoad(); 

數學式 • 查看 Theme 中的 head template， 加入： 深入 Fukuball Lin @ Go Taiwan MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} }); 

更更深入使⽤用 Hugo • Template ⽂文件：https://gohugo.io/ templates/overview/ 深入 Fukuball Lin @ Go Taiwan 不難，⾃自⼰己看 

從 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 

Q & A Find Me Twitter @fukuball Github @fukuball Facebook @fukuball Fukuball Lin @ Go Taiwan