花了一個晚上在弄Hugo的環境，得把過程記下來避免之後忘記
關於Hugo
Hugo本身是使用Go語言編寫，可以讓使用者快速建置一個靜態網站
準備軟體
- msysGit：Git相關的操作我大多習慣使用安裝好之後會出現的Git Bash來進行，安裝時建議都使用預設值就好，裝好後的一些設定可在網上找到教學
- Sublime Text 3：用來打文章跟做一些設定相當方便的軟體
建置過程
官方有提供滿清楚的文件說明如何安裝及設定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 目標資料夾路徑
成功的話就會在底下出現一堆訊息，原本空白的資料夾也會多了一些東西出來，該資料夾可以視為根目錄
初始化
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 aaa@example.com
- 下指令
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
网友评论