使用hugo搭建個人博客站點

jopen 9年前發布 | 81K 次閱讀建站系統CMS Hugo

Hugo是一個用Go語言編寫的靜態網站生成器，它使用起來非常簡單，相對于Jekyll復雜的安裝設置來說，Hugo僅需要一個二進制文件hugo(hugo.exe)即可輕松用于本地調試和生成靜態頁面。

Hugo生成靜態頁面的效率很高，我的260多篇博客文章生成幾乎是瞬間完成的，而之前用Jekyll需要等待10秒左右。

Hugo自帶watch的調試模式，可以在我修改MarkDown文章之后切換到瀏覽器，頁面會檢測到更新并且自動刷新，呈現出最終效果，能極大的提高博客書寫效率。再加上Hugo是使用Go語言編寫，已經沒有任何理由不使用Hugo來代替Jekyll作為我的個人博客站點生成器了。

靜態網站生成器

什么是靜態網站生成器？如果追溯到最早的網站形式，那時候的網頁都是靜態的，即一個內容不變的html文件放在服務器上，人們通過互聯網訪問瀏覽的都是這個一成不變的頁面。后來，人們發現，需要和網頁進行交互，能根據用戶的輸入動態呈現出相應的內容，這就是動態網站。那，為什么現在又回歸使用靜態網站呢？特別是對于博客網站這種特殊的形式。我的理解是：

訪問速度提升。靜態頁面不需要像動態頁面那樣經常去查詢數據庫，而是直接將最終頁面內容返回。

搜素引擎友好。便于搜索引擎索引，比如很多動態網站的頁面地址是一樣的，只是后面傳入的參數不一樣，容易讓搜索引擎誤認為是同一個頁面。（雖然不會）

可以完全拋棄數據庫，減少復雜度，將最復雜的一步交給靜態網站生成器，自己只專注寫作、生成、發布三個步驟。

博客文章可以以文本文件的方式（MarkDown）在本地維護管理，不需要像之前那樣在網頁的編輯器里提交到網站數據庫。你可以方便的使用github管理你的博客文章，不會丟失，又能追溯到每一次的內容變更。

目前最流行的靜態網站生成器是Jekyll，它是github創始人自己實現的一套ruby的靜態網站生成器。一經推出，各個程序哥競相效仿，一時間使用Jekyll搭建自己的博客變成了一件很高逼格的事情。

我也是跟風者之一，在Jekyll之前，我主要也是在博客園寫文章，同時獨立博客這塊也嘗試過自己實現的博客程序，用GAE寫過，后來又用 Tornado寫過，都是動態網站。自己實現博客程序，總是在開始一段時間內很狂熱，當一切實現完成，細節修繕好之后很快就失去了興趣。因為你的注意力從只是寫文章，經常轉移到其他地方去。比如網站不好看，需要去改一改網站的風格樣式，修復BUG，加一加功能等等。

所以，如果只是專注于寫作，還是找一個穩定一些，提供大量現成皮膚，有穩定專業的組織維護更新的博客系統。使用Jekyll確實讓我眼前一亮，原來博客程序可以這么玩。于是利用周末的時間，我將我之前所有的文章，包括博客園的文章，都遷移到了Jekyll上來。自從有了Jekyll，我終于可以開開心心的專注的寫文章了，而且使用喜歡的MarkDown格式。：）

在使用了Jekyll一段時間后，它的問題也逐漸暴露出來：靜態頁面生成的效率不夠高。因為我把以前的文章都導入了過來，一共有260來篇，每次編輯文章后，需要等等10秒，待它將所有頁面檢查并生成完成之后，才能看到最終的效果。這是我最不能忍受的一點。對于初學者，Jekyll還有很多問題，比如環境搭建非常復雜，導致使用Jekyll的人大都是一些喜歡折騰，不怕折騰的程序哥。

隨著Go1.5版本的發布，讓我意識到是時候好好玩一玩Go語言了。使用Go語言實現的靜態網站生成器Hugo（雨果）立即吸引了我，它解決了我最大的痛點：生成的效率。文檔、社區各方面的支持都不錯，使用起來非常簡單，各種皮膚直接套用，于是我又開始了Jekyll遷移到Hugo的漫漫長路。（一個周末的時間）

即使遷移到了Hugo，我還保留著原來的Jekyll博客，只是不會再更新了，用來懷念？還是哪天突然又跳回來也不一定。

我的Jeklly博客：http://jekyll.coderzh.com

我的Hugo博客：http://blog.coderzh.com

GitHub Pages

使用靜態網站生成器生成好靜態頁面之后，需要把文件放到服務器上供別人瀏覽。比較傳統的方式是租用VPS虛擬服務器，比如：linode、digitalocean。將生成好的靜態頁面手工上傳到服務器上。如果你習慣這種方式部署，推薦你使用digitalocean。

當然，還有更好的方式，就是直接把網站托管到GitHub Pages。你只需要在GitHub上創建一個項目，然后將生成出來的靜態頁面文件push到這個項目的gh-pages分支，保證根目錄有一個 index.html文件即可。這樣，一個免費、無限流量的博客系統就搭建完成了。同時，通過github你可以方便對博客文章進行管理和追蹤。

Hugo

前面的鋪墊介紹的差不多了，該主角上場了。Hugo是什么？它主要做了什么？

Hugo只有一個二進制文件（比如Windows里只是一個hugo.exe）

Hugo可以將你寫好的MarkDown格式的文章自動轉換為靜態的網頁。

Hugo內置web服務器，可以方便的用于本地調試。

Hello Hugo

Hugo官方主頁：https://gohugo.io/

Hugo的安裝方式有兩種，一種是直接下載編譯好的Hugo二進制文件。如果只是使用Hugo推薦用這種方式。另一種方式是獲取Hugo的源碼，自己編譯。由于各種不可預料的網絡問題，第二種方式不是那么輕易能成功，雖然最后我還是折騰出來了。

Hugo二進制下載地址：https://github.com/spf13/hugo/releases

下載下來后，只有一個叫hugo或者hugo.exe的程序，接下來開始生成自己的站點：

$ hugo new site /path/to/site

然后hugo會自動生成這樣一個目錄結構：

? archetypes/
  ? content/
  ? layouts/
  ? static/
    config.toml

簡要介紹一下，config.toml是網站的配置文件，這是一個TOML文件，全稱是Tom’s Obvious, Minimal Language，這是它的作者GitHub聯合創始人Tom Preston-Werner 覺得YAML不夠優雅，搗鼓出來的一個新格式。如果你不喜歡這種格式，你可以將config.toml替換為YAML格式的config.yaml，或者 json格式的config.json。hugo都支持。

content目錄里放的是你寫的markdown文章，layouts目錄里放的是網站的模板文件，static目錄里放的是一些圖片、css、js等資源。

創建一個頁面：

hugo new about.md

如果是博客日志，最好將md文件放在content的post目錄里。

$ hugo new post/first.md

執行完后，會在content/post目錄自動生成一個MarkDown格式的first.md文件：

+++
date = "2015-01-08T08:36:54-07:00" draft = true title = "first" +++

+++可以替換為Jekyll一樣的---，里面的內容是這篇文章的一些信息。下面就可以開始寫你的文章內容，比如：

+++
date = "2015-01-08T08:36:54-07:00" draft = true title = "first" +++ ### Hello Hugo 1. aaa 1. bbb 1. ccc

OK，剛才的about.md也有內容，該看看最后的效果了。然后你屁顛屁顛的使用hugo server啟動，打開瀏覽器里一看，發現毛都沒有！這是腫么了！

這是Hugo對初學者非常不友好的地方，默認生成的網站是沒有任何皮膚模板的。為了看看第一個寫的示例，還得去Github上把一個網頁模板下載下來。如果你網絡夠好，網速夠快，你可以在剛才的目錄將Hugo官方的所有模板都下載下來：

$ git clone --recursive https://github.com/spf13/hugoThemes themes

我嘗試過，也失敗過，且從未成功一次性將所有的模板下載下來。所以，我們還是老老實實只下載其中一個模板來看看效果吧：

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

啟動本地調試：

$ hugo server --theme=hyde --buildDrafts --watch

瀏覽器里打開：http://127.0.0.1:1313

HugoFirstPost

–watch或者-w 選項打開的話，將會監控到文章的改動從而自動去刷新瀏覽器，不需要自己手工去刷新瀏覽器，非常方便。

如果你看了上面的說明已經有沖動去試一試Hugo了，我的目的也算達到了，接下來你需要的只是查看官方的說明文檔就夠了，所以具體的一些設置我就不重復了。

官方文檔：https://gohugo.io/overview/introduction/

皮膚列表：https://github.com/spf13/hugoThemes

常用文檔：

Configuring Hugo

Front Matter

Menus

Template Variables

Hosting on GitHub Pages

遇到的問題

默認的ServerSide的代碼著色會有問題，有些字的顏色會和背景色一樣導致看不見。解決方法：使用ClientSide的代碼著色方案即可解決。（見：Client-side Syntax Highlighting）

URL全部被轉成了小寫，如果是舊博客遷移過來，將是無法接受的。解決方法：我是直接改了Hugo的代碼，將URL強制轉換為小寫那段邏輯去掉了，之后考慮在config里提供配置開關，然后給Hugo提一個PR。如果是Windows用戶可以直接https://github.com/coderzh/ConvertToHugo 下載到我修改后的版本myhugo.exe。

文章的內容里不能像Jekyll一樣可以內嵌代碼模板了。最終會生成哪些頁面，有一套相對固定而復雜的規則，你會發現想創建一個自定義界面會非常的困難。解決方法：無，看文檔，了解它的規則。博客程序一般也不需要特別的自定義界面。Hugo本身已經支持了類似posts, tags, categories等內容聚合的頁面，同時支持rss.xml，404.html等。如果你的博客程序復雜到需要其他的頁面，好好想想是否必須吧。

如何將rss.xml替換為feed.xml？解決方法：在config.yaml里加入：

rssuri: "feed.xml"

Jekyll遷移到Hugo

Jekyll的文章內容遷移到Hugo中，大部分內容是兼容的，但也有一些地方是不兼容的。主要有以下幾個地方需要修改：

Jekyll文章能從文件名里的日期部分讀取到日期，并將剩余的部分當做的頁面url的名稱，比如：2015-08-29-first.md。而 Hugo只認md文件里的date字段，url的名稱如果用文件名的話將會使用完整的文件名（不會去除日期部分）。為了兼容，必須在md的Front Matter里寫入url字段，用來說明該頁面的相對url地址，從而保持兼容。