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

Louyan發表於2018-12-01
Go網站

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. 原始碼安裝

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


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 從入門到會用

相關文章