使用Hugo+Github Pages建置Blog

花了一個晚上在弄Hugo的環境，得把過程記下來避免之後忘記

關於Hugo

Hugo本身是使用Go語言編寫，可以讓使用者快速建置一個靜態網站

• 官網
• GitHub

準備軟體

• msysGit：Git相關的操作我大多習慣使用安裝好之後會出現的Git Bash來進行，安裝時建議都使用預設值就好，裝好後的一些設定可在網上找到教學
• Sublime Text 3：用來打文章跟做一些設定相當方便的軟體
  • 參考教學1
  • 參考教學2

建置過程

官方有提供滿清楚的文件說明如何安裝及設定Hugo，網路上也可以找到中文版的文件

以下是我的建置過程：

安裝Hugo

• 到官網提供的下載點根據自己的作業系統下載對應的安裝包，我使用的64位元的Windows，所以下載hugo_0.34_Windows-64bit.zip(目前最新版本為0.34)

• 將下載回來的zip解壓縮，資料夾裡面會有三個檔案，最重要的是hugo.exe，將該資料夾的路徑加到環境變數的path中

• 在cmd下指令

hugo version

如果出現類似Hugo Static Site Generator v0.34 windows/amd64 BuildDate: 2018-01-22T12:07:11Z這樣的訊息就代表安裝成功

初始化Blog及安裝主題

• 找個地方當做是要存放Blog的資料夾，下指令

hugo new site 目標資料夾路徑

成功的話就會在底下出現一堆訊息，原本空白的資料夾也會多了一些東西出來，該資料夾可以視為根目錄

初始化

• Hugo有許多主題可以選擇，選擇一個自己看得順眼的主題，將其clone到themes資料夾底下，例如我選的是Hugo Nuo這個主題，先在cmd移動到themes資料夾，接著下指令

git clone https://github.com/laozhu/hugo-nuo

成功的話就會看到有資料夾生出來了

安裝主題

• 每個主題有不同的值可以設定，但都是在根目錄底下的config.toml做設定，主題的說明文件上應該都會說明設定方式，一般在這邊可能會花上比較多時間，以Hugo Nuo這個主題來說，我將hugo-nuo\static\img底下的圖片替換掉，此外透過hugo-nuo\static\css\bundle.css修改側邊欄的字型、頭像屬性還有文章超連結的顏色(bundle.css的內容是壓縮過的，原始碼可在hugo-nuo\src\styles\partials底下找到，方便對照)

字型可在Google Fonts找自己喜歡的下載下來放到hugo-nuo\static\fonts後再修改bundle.css，比如我選用的是Inconsolata字型

創建頁面

• 關於頁面：在根目錄下指令

hugo new about.md

會在content資料夾底下產生一個about.md，打開該檔案，Hugo Nuo主題的關於頁面設定方式如下：

---
title: "關於"
date: 2018-01-27T20:19:21+08:00
layout: "about"
menu: "main"
weight: 50
comments: false
---

title：標題，預設為檔名

date：日期，創建時會自動帶出

layout：頁面布局，有about和links兩種可選

menu：該頁面是否加入到側邊欄

weight：權重，用來調整該頁面在側邊欄排序，和其他側邊欄顯示的項目為相對

comments：不一定要有，調整允不允許評論

• 一般頁面：建議使用同一個資料夾集中管理，例如在根目錄下指令

hugo new post/welcome.md

會在content/post資料夾底下產生一個welcome.md，以這篇文章的頁面資訊為例

---
title: "建置Hugo Blog"
author: "Carrie Lai"
cover: "/media/posts/createHugoBlog/hugo01.png"
date: 2018-01-28T00:09:10+08:00
tags: ["Hugo"]
draft: false
---

cover：顯示在首頁的封面圖

tags：此篇文章的標籤，會顯示在文章底部，在標籤頁面點選Hugo標籤也可找到本篇文章

draft：是否為草稿

順帶一提可在archetypes資料夾當中的default.md設定文章預設的模板，建立新文章的時候就會套用這個模板，可以省下一些時間

預覽

• 產生靜態頁面：在根目錄下指令

hugo

會產生Blog的靜態頁面，預設放在public資料夾底下

• 預覽：在根目錄下指令

hugo server

[K25lBuilding sites … [?25h
                   | EN
+------------------+----+
  Pages            |  8
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 26
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Total in 163 ms
Watching for changes in D:\myHugoBlog\site\{content,data,layouts,static,themes}
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

會產生靜態頁面並產生預覽內容，可以在瀏覽器經由http://localhost:1313/查看，且支援熱部署(livereload)，修改文章或是css之類的東西時是不用重啟的，相當方便

livereload

部署到Github Pages

• 首先到Github網站申請一個帳號，如果已經有帳號了可以直接跳到下一步

• 在首頁點選New repository，
  Repository name輸入你的username.github.io，比如說username為example，就輸入example.github.io，創建好之後會看到一行網址
  https://github.com/你的username/你的username.github.io.git，之後做部署時需要它

• 找一個要拿來做為本地repository的資料夾，按右鍵打開git bash，如果是第一次使用，需先設定部署時的使用者名稱及email(只要設定一次即可)

git config --global user.name "你的username"
git config --global user.email [email protected]

• 下指令

git clone https://github.com/你的username/你的username.github.io.git

可以看到剛剛在Github上創的Repository被拉下來了，將Blog根目錄的public資料夾內的東西都複製到Repository資料夾中，接著下以下指令，將內容部署到Github Pages

git add -A
git commit -m "輸入你要打的內容"
git push origin master

額外設定

• Google Analytics

可以到Google Analytics去新建資源並取得追蹤編號，設定到根目錄的config.toml當中

# Google Analytics UA number
googleAnalytics = "UA-XXXXXX-X"

• 不蒜子

如果要在文章或Blog本身加入訪客數的統計，可以用用看不蒜子，設定方式可以參考這篇文章，依據使用主題不同會有不一樣的設定方式。我個人是將js引入到hugo-nuo\layouts\partials\head.html、網站統計放到hugo-nuo\layouts\partials\footer.html、文章統計放到hugo-nuo\layouts\post\single.html

後記

感覺起來Hugo滿容易使用的，但目前好像還沒有發現像Hexo那樣有一些plugin可以用，顯得簡潔許多，也可以更專注在Blog的內容上

其他參考資料

• 利用Github Pages和基于Go的Hugo搭建个人博客
• 如何使用 Hugo 搭建个人博客
• 用Hugo和GitHub Pages搭建博客
• Hugo 快速的靜態網頁引擎
• 使用Hugo搭建静态站点
• hugo使用备忘录
• Hugo is cool

本文首發於GitHub Pages