Hugo + Github Pages 搭建我的博客

嘗試過 Hexo 、GatsbyJs、 Vuepress 搭建博客後，對這些工具最大的不滿，就是運行速度以及打包速度。

後來看到 Hugo ,號稱最快的靜態站點生成器後。

嘗試搭建博客，發現無論是運行速度，仍是打包速度超級快，果斷將我的博客遷移到 Hugo。 Hugo 官方的定義是：

Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.(Hugo 是使用 Go 編寫的快速而現代的靜態站點生成器，旨在使網站建立變得有趣。)

安裝 Hugo

Hugo 搭建我的博客前，須要先安裝 Git 和 Go 語言開發環境。

分別在 golang.org/dl/ 、git-scm.com/ 下載二進制安裝包，點擊默認設置安裝便可。

Mac 安裝 Hugo

既可使用 HomeBrew 安裝，也能夠在 github.com/gohugoio/hu… 下載二進制包安裝

brew install hugo 
複製代碼

Windows 安裝 Hugo

在 github.com/gohugoio/hu… 下載二進制包安裝

安裝完成後，在命令行輸入如下命令驗證安裝：

hugo version
複製代碼

輸出版本信息表示安裝成功，更多安裝方式查看 gohugo.io/getting-sta…

創建 Hugo 項目

一個 Hugo 項目就是一個站點，建立命令以下：

hugo new site [project-name]
複製代碼

例如個人站點名稱是 blog,建立命令以下：

hugo new site blog
複製代碼

建立完成後，在 blog 文件夾下會生成如下文件結構：

.
├── archetypes # 存放生成博客的模版
├── assets # 存放被 Hugo Pipes 處理的文件
├── config # 存放 hugo 配置文件 支持 JSON YAML TOML 三種格式配置文件
├── content # 存放 markdown 文件
├── data # 存放 Hugo 處理的數據
├── layouts # 存放佈局文件
├── static # 存放靜態文件 圖片 CSS JS文件
└── themes # 存放主題
複製代碼

添加主題

爲了快速搭建博客，可使用主題。使用主題後，只須要向 content 文件夾添加 Markdown 文件便可。

Hugo 有主題市場 themes.gohugo.io/ ，挑選了半天，選出了兩個自認爲好看的主題：

1. github.com/olOwOlo/hug…
2. github.com/yoshiharuya…

第一個更好看、功能更增強大，選擇了第一個。進入根目錄，克隆主題文件就是安裝主題。

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

啓動 Hugo

進入 blog/themes/even/exampleSite 文件夾，將 config.tom 文件拷貝到項目根目錄下，同時將 blog/themes/even/exampleSite/content 文件夾覆蓋掉根目錄下的 content 。

命令行輸入如下命令，啓動 Hugo :

hugo server
複製代碼

在瀏覽器打開 http://localhost:1313/ 便可查看效果。

配置主題

爲了我的使用，須要修改 config.tom 文件，根聽說明修改配置便可。

個人主題配置文件

進入 blog/themes/even 文件夾，會發現文件結構與新建的 Hugo 項目的文件結構幾乎是同樣的。這樣設置是爲了用戶的配置能夠覆蓋掉主題的配置。

好比我要自定義底部的顯示，hugo-theme-even 底部配置由 blog/themes/even/layouts/partials/footer.html 控制。

爲了覆蓋掉主題的配置，在項目根目錄下新建 blog/layouts/partials/footer.html 文件，填入自定義內容便可覆蓋掉主題配置。其餘文件的覆蓋是同樣的。

hugo-theme-even 使用了 Webpack 打包 js,css,而且文件名加入 hash 值，這種 css,js 是沒法覆蓋的，不過 hugo-theme-even 配置中有覆蓋這種 css,js 的參數，詳情參考個人文件配置。

添加新博客

添加新博客命令比較簡單，命令以下：

hugo new post/my-first-blog.md
複製代碼

這個命令會使用模板建立文件，首先查找用戶的模板文件，沒有就會查找主題的模板文件。

hugo-theme-even 的模版文件 blog/themes/even/archetypes/default.md 比較複雜，新建 blog/archetypes/default.md 文件覆蓋掉便可。

個人模板配置以下：

---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
description: ""
draft: true
tags: []
categories: []
---

<!--more-->

複製代碼

draft 參數控制網站上該頁面是否顯示。設置爲 false 或者去掉該參數才顯示。<!--more--> 以前的內容會自動做爲頁面摘要。

打包

爲了部署到線上，須要將 Markdown 文件打包成 HTML 文件。打包命令以下，even 是主題名：

hugo -t even
複製代碼

部署到 Github Pages

打包以後就是純 HTML 文件，理論上全部支持部署靜態頁面的網站都是支持的。

個人部署命令以下，更多部署方式查看 gohugo.io/hosting-and…

#!/bin/bash
# 部署到 github pages 腳本
# 錯誤時終止腳本
set -e

# 刪除打包文件夾
rm -rf public

# 打包。even 是主題
hugo -t even # if using a theme, replace with `hugo -t <YOURTHEME>`

# 進入打包文件夾
cd public

# Add changes to git.

git init
git add -A

# Commit changes.
msg="building site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# 推送到githu 
# nusr.github.io 只能使用 master分支
git push -f git@github.com:nusr/nusr.github.io.git master

# 回到原文件夾
cd ..

複製代碼

代碼

博客文件存放地址 github.com/nusr/blog

文章首發 nusr.github.io/