Hugo -最好用的靜態網站生成器

Hugo是由Go語言實現的靜態網站生成器。簡單、易用、高效、易擴展、快速部署。

爲何選擇 Hugo ？

• 快！世界上最快的靜態網站生成工具！5秒生成6000個頁面！
• 超詳細的文檔，雖然是英文的
• 活躍的社區
• 更加自由的內容組織方式
• 豐富的主題，目前主題數量已經超過 Hexo

安裝 Hugo

1. 二進制安裝（推薦：簡單、快速）

Windows

• 前往 github.com/gohugoio/hu…
• 下載 hugo_X.XX_Windows-64bit.zip
• 解壓獲得 hugo.exe
• 將 hugo.exe 所在目錄添加至系統環境變量
• 安裝完成！

Mac下直接使用 Homebrew 安裝：

brew install hugo
複製代碼

2. 源碼安裝

源碼編譯安裝，首先安裝好依賴的工具：

• Git

• Go (at least Go 1.11)

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install 
複製代碼

go install --tags extended 若是須要 Sass/SCSS 支持.

若是是Windows用戶,  `$HOME` 環境變量是 `%USERPROFILE%`
複製代碼

提示：我的有時喜歡這樣操做，打開文件夾 /src , 在文件夾下右擊 選擇 git bash here ，git clone https://github.com/gohugoio/hugo.git ,而後 cd hugo ，go install

[安裝過程當中會報錯] go get 報錯"https fetch failed: Get https://golang.org/x..."

因爲國內鏈接不上golang.org ，當用go get安裝有依賴golang.org的包時會報錯Fetching https://golang.org/x，若是不用代理的話就須要手動下載了。

在$GOPATH/src路徑下建立golang/x文件夾並下載想要的包，在windows下以上面報錯爲例。以上報錯沒法獲取https://golang.org/x/net text image sync如今咱們來手動獲取。

打開Git Bash

mkidr -p ~/go/src/golang.org/x  //注意路徑
cd ~/go/src/golang.org/x
git clone https://github.com/golang/net.git
git clone https://github.com/golang/text.git
git clone https://github.com/golang/image.git
git clone https://github.com/golang/sync.git
複製代碼

這樣咱們再go get時就成功了。

驗證安裝是否成功

hugo version
複製代碼

其餘系統請參考官方文檔——安裝

建立站點

hugo new site yannotes.cn
cd yannotes.cn
複製代碼

在執行完 hugo new site 命令後你會獲得一個包含如下文件的目錄 :

├── archetypes/
├── config.toml
├── content/
├── data/
├── layouts/
├── static/
├── resources/
├── public/
└── themes/
複製代碼

• archetypes: 儲存.md的模板文件，相似於hexo的scaffolds，該文件夾的優先級高於主題下的/archetypes文件夾
• config.toml: 配置文件
• content: 儲存網站的全部內容，相似於hexo的source
• data: 儲存數據文件供模板調用，相似於hexo的source/_data
• layouts: 儲存.html模板，該文件夾的優先級高於主題下的/layouts文件夾
• static: 儲存圖片,css,js等靜態文件，該目錄下的文件會直接拷貝到/public，該文件夾的優先級高於主題下的/static文件夾
• themes: 儲存主題
• public: 執行hugo命令後，儲存生成的靜態文件

添加主題（皮膚）

到 皮膚列表 挑選一個心儀的皮膚，好比你以爲 Hyde 皮膚不錯，找到相關的 GitHub 地址，建立目錄 themes，在 themes 目錄裏把皮膚 git clone下來：

git clone https://github.com/spf13/hyde.git themes/hyde

# 編輯你的 config.toml 配置文件使用該主題
echo 'theme = "hyde"' >> config.toml
複製代碼

themes：even ： github.com/olOwOlo/hug…

git clone https://github.com/olOwOlo/hugo-theme-even themes/even
複製代碼

添加文章

• 建立一個 about 頁面：

$ hugo new about.md
複製代碼

about.md 自動生成到了 content/about.md ，打開 about.md 看下：

+++
date = "2018-12-02T01:46:53+08:00"
draft = true
title = "about"

+++
正文內容
複製代碼

內容是 Markdown 格式的，+++ 之間的內容是TOML 格式的，根據你的喜愛，你能夠換成 YAML 格式（使用 --- 標記）或者 JSON格式。

• 建立第一篇文章，放到 post 目錄，方便以後生成聚合頁面。

$ hugo new post/first.md
複製代碼

它會在站點的根目錄下的 content 目錄下, 建立 post/first.md 目錄和文件的.

打開編輯 post/first.md ：

---
date: "2018-12-02T01:46:53+08:00"
title: "first"

---
### Hello Hugo

 1. aaa
 1. bbb
 1. ccc

複製代碼

本地運行Hugo

在你的站點根目錄執行 Hugo 命令進行調試：

$ hugo server --theme=hyde --buildDrafts --watch
複製代碼

使用 --watch參數能夠在修改文章內容時讓瀏覽器自動刷新。

瀏覽器裏打開： http://localhost:1313

• 導航目錄的處理

[[menu.main]]
  name = "Home"
  weight = 10
  identifier = "home"
  url = "/"
[[menu.main]]
  name = "Archives"
  weight = 20
  identifier = "archives"
  url = "/archives/"
[[menu.main]]
  name = "Tags"
  weight = 30
  identifier = "tags"
  url = "/tags/"
複製代碼

這些就是站點的導航配置管理. url = "/tags/" 表示是在站點根目錄下的 content/tags/ 目錄, 其餘相似, 一一對應便可.

添加評論系統

gitment

在使用 gitment 過程當中, 關鍵是 repo 參數的值問題,它是你的倉庫名稱(不是完整路徑)~, 好比我這裏是~

louyan.github.io

部署

假設你須要部署在 GitHub Pages 上，首先在GitHub上建立一個Repository，命名爲：louyan.github.io （louyan替換爲你的github用戶名）。

在站點根目錄執行 Hugo 命令生成最終頁面：

$ hugo --theme=hyde --baseUrl="http://louyan.github.io/"
複製代碼

若是一切順利，全部靜態頁面都會生成到 public 目錄，將pubilc目錄裏全部文件 push到剛建立的Repository的 master 分支。

$ cd public
$ git init
$ git remote add origin https://github.com/louyan/louyan.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master
複製代碼

瀏覽器裏訪問：http://louyan.github.io/

這個網站 YAN的札記 就是我使用hugo生成的。

---

關於hugo更詳細的資料，也可參考：Hugo 從入門到會用