使用 Hugo 搭建博客

之前寫的一些文章筆記都託管在簡書和 Segmenfault 上，但因爲簡書內容愈來愈垃圾，一直都打算轉移到 github pages 上，但因爲我的緣由拖到如今。最近恰好有些時間，比較了一些靜態博客生成工具，最後選擇用 Hugo 來生成和管理本身的博客。

Hugo

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

---

安裝

環境：macOS

brew install hugo

# 檢查安裝成功
hugo version # Hugo Static Site Generator v0.30.2 darwin/amd64 BuildDate: 2017-12-13T17:35:33+08:00

---

開始使用

生成 site 目錄

hugo new site blog
cd blog
git init
#Congratulations! Your new Hugo site is created in /Users/steven/MyProjects/Demo/blog.

#Just a few more steps and you're ready to go:
#
#1. Download a theme into the same-named folder.
#   Choose a theme from https://themes.gohugo.io/, or
#   create your own with the "hugo new theme <THEMENAME>" command.
#2. Perhaps you want to add some content. You can add single files
#   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
#3. Start the built-in live server via "hugo server".
#
#Visit https://gohugo.io/ for quickstart guide and full documentation.

# 目錄結構
tree blog
#blog
#├── archetypes
#│   └── default.md
#├── config.toml
#├── content
#├── data
#├── layouts
#├── static
#└── themes

config.toml 是配置文件，在裏面能夠定義博客地址、構建配置、標題、導航欄等等。

themes 是主題目錄，能夠去 themes.gohugo.io 下載喜歡的主題。

content 是博客文章的目錄。

安裝主題

去 themes.gohugo.io 選擇喜歡的主題，下載到 themes 目錄中，而後在 config.toml 中配置 theme = "even" 便可。其餘配置可見 theme 說明

下面以我比較喜歡 Even 主題 舉個例子

1. 下載

• 能夠直接 clone 到 themes 目錄下，優勢是若是對主題有調整需求能夠同時提交到 git 控制中。

  git clone https://github.com/olOwOlo/hugo-theme-even themes/even

• 也能夠添加到 git 的 submodule 中，優勢是後面講到用 travis 自動部署時比較方便。若是須要對主題作更改，最好 fork 主題再作改動。

  git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even

2. 使用

若是須要調整更改主題，須要在 themes/even 目錄下從新 build

cd themes/even && npm i && npm start

第一篇文章

hugo new post/my-first-post.md

文章頂部能夠設置一些 meta 信息，例如：

---
title: "My First Post"
date: 2017-12-14T11:18:15+08:00
weight: 70
keywords: ["hugo"]
description: "第一篇文章"
tags: ["hugo", "pages"]
categories: ["pages"]
author: ""
---

這裏是文章內容

預覽

執行命令，使用 Hugo 生成靜態內容並在啓動本地 HTTP Server。而後便可訪問 http://localhost:1313/ 查看效果。

hugo server -D
#...
#Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

Hugo server 會檢測文件變化，自動刷新瀏覽器。

---

部署到 GitHub Pages

最終咱們須要把博客部署到一個託管服務，免費穩定的 Github Pages 是個很好的選擇。再結合 Travis 自動部署，發佈文章會變得很簡單。

1. 先把源碼提交到 GitHub 的一個 repo (源碼 repo)

   git add -A
   git commint -m "initial all files"
   git remote add origin https://github.com/<username>/blog
   git push -u origin master

2. 準備發佈博客使用的 pages repo

   Github Pages 有多種類型：我的、組織、我的的某個項目、組織的某個項目。具體細節官方文檔可見 GitHub Pages。本文使用的是 <username>.github.io。

3. 首先在 Github 上建立 <username>.github.iorepo，同時 config.toml 的 baseURL 要設置成 https://<username>.github.io
4. 生成 Github Access Token，至少要有 public_repo 的權限。

   

5. 配置 Travis

   去 Travis CI 註冊關聯 Github 的帳號，而後同步帳戶並激活 blog repo。

   

   接着進入 blog 的設置頁面，選擇自動部署觸發條件，並把剛剛生成的 GitHub Access Token 添加到環境變量裏。

   

6. 在 blog repo 中添加 .travis.yml

   sudo: false
   language: go
   git:
       depth: 1
   install: go get -v github.com/gohugoio/hugo
   script:
       ‐ hugo
   deploy:
       provider: pages
       skip_cleanup: true
       github_token: $GITHUB_TOKEN
       on:
           branch: master
       local_dir: public
       repo: <username>/<username>.github.io
       fqdn: <custom-domain-if-needed>
       target_branch: master
       email: <github-email>
       name: <github-username>

   部分參數解釋：

   • 默認狀況下，travis 會自動下載 git submodules
   • github_token: $GITHUB_TOKEN 要和 travis 設置的環境變量名一致
   • fqdn: 若是須要設置自定義域名，能夠在這裏設置，travis 會自動生成 CNAME 文件提交，同時要設置 config.toml 中的相應的 baseURL

7. 最後，能夠手動去 travis 觸發一次 build 檢查效果。若是設置了提交觸發 build，以後每次 blog repo 有提交都會自動 build，再也不須要關心 travis 狀態。