Hugo + GitHub Pages 搭建自己的網(wǎng)站

大家好，我是站長 polarisxu。

很早之前，我使用 WordPress 搭建了個人博客：http://blog.studygolang.com，畢竟那時候 WordPress 是首選。現(xiàn)如今，大家似乎更喜歡靜態(tài)博客，各種語言的靜態(tài)博客生成器輪子不斷，比如 Go 語言的 Hugo 就是一個靜態(tài)博客生成器。我個人認為，靜態(tài)博客生成器流行的一個很大原因，是 Markdown 的流行，開發(fā)人員習(xí)慣了使用 Markdown 進行寫作。

對于我，有另外一個痛點。最近在公眾號寫了一些文章，希望同步到博客，只是文字還好處理些，如果涉及到圖片，微信公眾號上傳了一次，博客還得再來一次，挺費勁的。同時，為了保留最原始的文字，原始博文放在 GitHub 是一個不錯的選擇（用 Git 保留你的修改，不要太棒好嘛！）。

既然博文都保存在了 GitHub 上，怎么方便快速的基于 GitHub 來搭建自己的博客呢？（有些人直接就讓在 GitHub 閱讀，雖然可以，但體驗還是不太好，而且看起來沒有那么高大上，是不是？）

我想過使用 GitBook 來搭建，安裝時，發(fā)現(xiàn)官方已經(jīng)不維護 gitbook-cli 了，而且每次新增加文章，都得維護目錄等，也是挺費勁的。于是放棄了這種方式。

這時我想到了通過靜態(tài)博客生成器來搞。最喜歡 Go，自然 Hugo 成為第一選擇。

廢話不多少，記錄下我搭建的過程。

01 安裝 Hugo

你可以通過 https://github.com/gohugoio/hugo/releases 下載相應(yīng)的安裝包，我喜歡源碼安裝。

$?go?get?-v?github.com/gohugoio/hugo

如果你也想通過源碼安裝，請自行準備好 Go 環(huán)境。

查看版本同時驗證是否安裝成功：（查看該文時，最新版本可能變了）

$?hugo?version
Hugo?Static?Site?Generator?v0.76.5?darwin/amd64?BuildDate:?unknown

02 使用 Hugo

在你本機某個目錄執(zhí)行如下命令，創(chuàng)建一個網(wǎng)站，我使用 polarisxu 這個名字。

$?hugo?new?site?polarisxu
Congratulations!?Your?new?Hugo?site?is?created?in?/Users/xuxinhua/project/testhugo/polarisxu.

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?"?command.
2.?Perhaps?you?want?to?add?some?content.?You?can?add?single?files
???with?"hugo?new?/.".
3.?Start?the?built-in?live?server?via?"hugo?server".

Visit?https://gohugo.io/?for?quickstart?guide?and?full?documentation.

進入 polarisxu 目錄，查看目錄結(jié)構(gòu)如下：

$?tree
.
├──?archetypes
│???└──?default.md
├──?config.toml
├──?content
├──?data
├──?layouts
├──?static
└──?themes

6?directories,?2?files

接下來需要為我們的網(wǎng)站指定一個主題，這里我們選擇 https://themes.gohugo.io/hermit/ 這個主題。

$?git?clone?https://github.com/Track3/hermit.git?themes/hermit

將該主題增加到網(wǎng)站的配置文件中，這樣才能生效：

echo?'theme?=?"hermit"'?>>?config.toml

測試下是否成功，運行：

$?hugo?serve

打開瀏覽器訪問：http://localhost:1313/，看到如下內(nèi)容：

對該主題進行一些配置。一般的，主題會有例子，我們直接拷貝例子中的 config.toml 覆蓋網(wǎng)站的 config.toml：

$?cp?-rf?themes/hermit/exampleSite/config.toml?.

再次運行 hugo serve，頁面如下：

可見，這個頁面內(nèi)容可以通過 config.toml 配置，根據(jù)需要做一些修改，頁面變成這樣：（不同主題可能不一樣）

不過點擊 「文章」 和 「關(guān)于」 都報 404。

增加列表頁

在 content/posts 目錄下新增一個文件：_index.md，內(nèi)容如下：

---
title:?"文章列表"
---

這時（hugo serve 會自動編譯）點擊 Posts，頁面如下：

增加 About 頁面

同樣的，在 content/posts 目錄下新增文件 about.md，正文內(nèi)容隨意，類似這樣：

---
title:?"關(guān)于"
date:?"2020-12-01"
---

這是關(guān)于頁面，polarisxu。

測試文章

接著，增加一篇測試文章：

$?hugo?new?posts/my-first-post.md

這會在 content/posts 目錄下生成一個 my-first-post.md 文件，里面內(nèi)容如下：

---
title:?"My?First?Post"
date:?2020-11-30T23:33:03+08:00
draft:?true
toc:?false
images:
tags:
??-?untagged
---

其中 --- 之間的數(shù)據(jù)是文章的元數(shù)據(jù)，在 Hugo 中叫做 Front Matter。

隨意增加一些內(nèi)容，并做一些修改：（其中 isCJKLanguage: true 用于準確計算中文字數(shù)）

---
title:?"第一篇文章"
date:?2020-11-30T23:33:03+08:00
draft:?false
toc:?false
isCJKLanguage:?true
images:
tags:?
??-?文章
---

這是第一篇文章。。。

查看文章詳情：http://localhost:1313/posts/my-first-post/。

如果文章完成，可以執(zhí)行 hugo 命令，生成靜態(tài)頁面。默認會將生成的靜態(tài)頁面放入 public 目錄中。

關(guān)于 Hugo 更多的定制，比如 theme 的定制，這里不過多講解，有興趣的自己琢磨。比如雖然 https://polarisxu.studygolang.com/ 和這里的例子使用了同一個模板，但樣子卻有不少不同，你可以查看 https://github.com/polaris1119/polarisxu，對比到底做了什么，折騰一番，基本會了。

03 使用 GitHub Pages 部署站點

這是 GitHub 為你和你的項目準備網(wǎng)站的，GitHub Pages 官方站點：https://pages.github.com/，大概就是通過將網(wǎng)站內(nèi)容放到 GitHub，通過 GitHub Pages 可以弄出一個自己的站點。它最常使用的是通過 Jekyll 這個站點生成器生成靜態(tài)頁面，有興趣的自行查閱資料了解。我們應(yīng)該使用 Hugo 生成靜態(tài)頁面，因此直接將靜態(tài)頁面部署到 GitHub Pages。

創(chuàng)建一個特殊的倉庫

在 GitHub 上創(chuàng)建一個倉庫，不過倉庫名有特殊要求。如果是個人賬號，比如我的 GitHub ID 是 polaris1119，則倉庫名是：polaris1119.github.io；如果是組織賬號，比如 studygolang 這個組織，則倉庫名是：studygolang.github.io。

配置倉庫

進入倉庫的 Settings 頁面，有一個區(qū)塊叫 GitHub Pages，可以配置站點信息，比如內(nèi)容來源、自定義域名、是否啟用 HTTPS 等。

說明如下：

• 數(shù)據(jù)源默認使用主分支下的根目錄，我個人建議改為 docs 目錄；
• 自定義域名如果留空，則默認倉庫名就是你的域名，比如我這里的 polaris1119.github.io；
• 如果配置了自定義域名，則需要在你的域名配置上 CNAME 記錄。我這里就是 polarisxu 這個子域名的 CNAME 值是 polaris1119.github.io；
• 如果配置了自定義域名，啟用 HTTPS 需要等待一段時間才能生效；

你可以在該倉庫上正確的位置放置一個 index.html 文件，測試是否正常。

小細節(jié)：避免 Jekyll 起作用，可以在倉庫根目錄放一個空文件，文件名：.nojekyll

部署我們的站點

這里有兩種做法。

1）方法一

上面 Hugo 項目的代碼直接推送到 GitHub Pages 這個倉庫中，在通過 Hugo 生成靜態(tài)頁面時，指定目標(biāo)目錄為 docs：

$?hugo?-d?docs

這樣 docs 下面的內(nèi)容就是靜態(tài)頁面，是網(wǎng)站最終展示的內(nèi)容。

2）方法二

Hugo 源網(wǎng)站內(nèi)容單獨放在一個倉，比如我放在了 https://github.com/polaris1119/polarisxu 這個倉庫。這樣分兩個倉庫相對麻煩先。但也有一個好處：GitHub Pages 站點有內(nèi)容大小限制：不能超過 1 GB，這樣分開可以節(jié)省空間，而且 Hugo 內(nèi)容和站點解耦。

因此每次在 Hugo 站點項目寫完文章后，需要生成靜態(tài)內(nèi)容，拷貝到 GitHub Pages 倉庫，提交代碼等。把這些步驟寫成一個腳本，瞬間變簡單了。

#!/bin/sh

hugo

cp?-rf?public/*?../polaris1119.github.io/docs/

cd?../polaris1119.github.io/

git?add?*?&&?git?commit?-m?'new?article'?&&?git?push

cd?../polarisxu/

04 總結(jié)

技術(shù)人員搞個自己的博客還是不錯的，開始時花些時間折騰一個自己喜歡的站點，之后就是抽時間產(chǎn)出內(nèi)容了。通過上面的介紹可知，現(xiàn)在搭建一個站點，完全不需要投入任何 money。

怎么樣？有沒有沖動自己搞一個。歡迎交流~