花了一個晚上在弄Hugo的環(huán)境能犯，得把過程記下來避免之後忘記
關(guān)於Hugo
Hugo本身是使用Go語言編寫屯蹦，可以讓使用者快速建置一個靜態(tài)網(wǎng)站
準(zhǔn)備軟體
- msysGit：Git相關(guān)的操作我大多習(xí)慣使用安裝好之後會出現(xiàn)的Git Bash來進(jìn)行第煮，安裝時建議都使用預(yù)設(shè)值就好完慧，裝好後的一些設(shè)定可在網(wǎng)上找到教學(xué)
- Sublime Text 3：用來打文章跟做一些設(shè)定相當(dāng)方便的軟體
建置過程
官方有提供滿清楚的文件說明如何安裝及設(shè)定Hugo，網(wǎng)路上也可以找到中文版的文件
以下是我的建置過程：
安裝Hugo
到官網(wǎng)提供的下載點根據(jù)自己的作業(yè)系統(tǒng)下載對應(yīng)的安裝包件炉，我使用的64位元的Windows市殷，所以下載
hugo_0.34_Windows-64bit.zip(目前最新版本為0.34)將下載回來的zip解壓縮愕撰，資料夾裡面會有三個檔案碍粥，最重要的是hugo.exe逃顶，將該資料夾的路徑加到環(huán)境變數(shù)的path中
在cmd下指令
hugo version
如果出現(xiàn)類似Hugo Static Site Generator v0.34 windows/amd64 BuildDate: 2018-01-22T12:07:11Z這樣的訊息就代表安裝成功
初始化Blog及安裝主題
- 找個地方當(dāng)做是要存放Blog的資料夾，下指令
hugo new site 目標(biāo)資料夾路徑
成功的話就會在底下出現(xiàn)一堆訊息磕蛇，原本空白的資料夾也會多了一些東西出來音羞，該資料夾可以視為根目錄
git clone https://github.com/laozhu/hugo-nuo
成功的話就會看到有資料夾生出來了
- 每個主題有不同的值可以設(shè)定窘面，但都是在根目錄底下的
config.toml做設(shè)定翠语，主題的說明文件上應(yīng)該都會說明設(shè)定方式，一般在這邊可能會花上比較多時間财边，以Hugo Nuo這個主題來說肌括，我將hugo-nuo\static\img底下的圖片替換掉，此外透過hugo-nuo\static\css\bundle.css修改側(cè)邊欄的字型酣难、頭像屬性還有文章超連結(jié)的顏色(bundle.css的內(nèi)容是壓縮過的谍夭，原始碼可在hugo-nuo\src\styles\partials底下找到，方便對照)
字型可在Google Fonts找自己喜歡的下載下來放到
hugo-nuo\static\fonts後再修改bundle.css憨募，比如我選用的是Inconsolata字型
創(chuàng)建頁面
- 關(guān)於頁面：在根目錄下指令
hugo new about.md
會在content資料夾底下產(chǎn)生一個about.md紧索，打開該檔案，Hugo Nuo主題的關(guān)於頁面設(shè)定方式如下：
---
title: "關(guān)於"
date: 2018-01-27T20:19:21+08:00
layout: "about"
menu: "main"
weight: 50
comments: false
---
title：標(biāo)題馋嗜，預(yù)設(shè)為檔名
date：日期齐板，創(chuàng)建時會自動帶出
layout：頁面布局，有about和links兩種可選
menu：該頁面是否加入到側(cè)邊欄
weight：權(quán)重葛菇，用來調(diào)整該頁面在側(cè)邊欄排序甘磨，和其他側(cè)邊欄顯示的項目為相對
comments：不一定要有，調(diào)整允不允許評論
- 一般頁面：建議使用同一個資料夾集中管理眯停，例如在根目錄下指令
hugo new post/welcome.md
會在content/post資料夾底下產(chǎn)生一個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：此篇文章的標(biāo)籤，會顯示在文章底部莺债，在標(biāo)籤頁面點選Hugo標(biāo)籤也可找到本篇文章
draft：是否為草稿
順帶一提可在archetypes資料夾當(dāng)中的default.md設(shè)定文章預(yù)設(shè)的模板滋觉，建立新文章的時候就會套用這個模板，可以省下一些時間
預(yù)覽
- 產(chǎn)生靜態(tài)頁面：在根目錄下指令
hugo
會產(chǎn)生Blog的靜態(tài)頁面齐邦，預(yù)設(shè)放在public資料夾底下
- 預(yù)覽：在根目錄下指令
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
會產(chǎn)生靜態(tài)頁面並產(chǎn)生預(yù)覽內(nèi)容椎侠，可以在瀏覽器經(jīng)由http://localhost:1313/查看，且支援熱部署(livereload)措拇，修改文章或是css之類的東西時是不用重啟的我纪，相當(dāng)方便
部署到Github Pages
首先到Github網(wǎng)站申請一個帳號，如果已經(jīng)有帳號了可以直接跳到下一步
在首頁點選New repository丐吓，
Repository name輸入你的username.github.io浅悉，比如說username為example，就輸入example.github.io券犁，創(chuàng)建好之後會看到一行網(wǎng)址
https://github.com/你的username/你的username.github.io.git术健，之後做部署時需要它找一個要拿來做為本地repository的資料夾，按右鍵打開git bash粘衬，如果是第一次使用荞估，需先設(shè)定部署時的使用者名稱及email(只要設(shè)定一次即可)
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上創(chuàng)的Repository被拉下來了，將Blog根目錄的public資料夾內(nèi)的東西都複製到Repository資料夾中稚新，接著下以下指令泼舱，將內(nèi)容部署到Github Pages
git add -A
git commit -m "輸入你要打的內(nèi)容"
git push origin master
額外設(shè)定
- Google Analytics
可以到Google Analytics去新建資源並取得追蹤編號，設(shè)定到根目錄的config.toml當(dāng)中
# Google Analytics UA number
googleAnalytics = "UA-XXXXXX-X"
- 不蒜子
如果要在文章或Blog本身加入訪客數(shù)的統(tǒng)計枷莉，可以用用看不蒜子娇昙，設(shè)定方式可以參考這篇文章，依據(jù)使用主題不同會有不一樣的設(shè)定方式笤妙。我個人是將js引入到hugo-nuo\layouts\partials\head.html冒掌、網(wǎng)站統(tǒng)計放到hugo-nuo\layouts\partials\footer.html、文章統(tǒng)計放到hugo-nuo\layouts\post\single.html
後記
感覺起來Hugo滿容易使用的蹲盘，但目前好像還沒有發(fā)現(xiàn)像Hexo那樣有一些plugin可以用股毫，顯得簡潔許多，也可以更專注在Blog的內(nèi)容上
其他參考資料
- 利用Github Pages和基于Go的Hugo搭建個人博客
- 如何使用 Hugo 搭建個人博客
- 用Hugo和GitHub Pages搭建博客
- Hugo 快速的靜態(tài)網(wǎng)頁引擎
- 使用Hugo搭建靜態(tài)站點
- hugo使用備忘錄
- Hugo is cool
本文首發(fā)於GitHub Pages
