Hugo 快速的靜態網頁引擎

不知道為什麼我天生就是看 PHP 不舒服,即使使用了 PHP7 仍然感到不適。在 Digital Ocean 後台看了原本就不太夠用的 Ram ,竟然被 PHP 壓榨了一半,網誌這種東西我想丟給靜態網頁就是一個非常省資源的處理,況且也不必承受一堆莫名其妙對伺服器還有資料庫的攻擊,再加上我還是覺得 WordPress 太笨重了。好吧,說穿了就是換換病發作。

其實本來有想考慮轉回 Hexo 做靜態網誌,但折騰的意念開始控制了我,讓我的身陷囹圄無法自拔。加上使用 Hexo 時候,確實感受到一些不開心的東西,後來會提到。於是乎,我開始尋找一些靜態網誌的產生器,其中 Jekyll 與 Hexo、Hugo 是其中幾個受關注的項目。就受歡迎程度而言 Jekyll 毫無疑問的遠遠超過其他兩者,再加上受到 Github 廣泛的支援,在 Github 上的 star 更是後兩者難以望其項背。而 Hexo 基於相當熱門的 node.js 基礎開發,也是一項超級熱門的項目,值得一提,開發作者可是台灣人,是不是相當可靠呢?詳細使用請參考這裡。

那 Hugo 呢?他是比較晚推出的項目,一開始在 Github 的 star 數量可是連 Hexo 一半都未達到,但是時至今日他的成長速度十分驚人快速,已經偷偷超越 Hexo 了。

Hugo 小檔案

官網:https://gohugo.io
語言: Go
Github:https://github.com/spf13/hugo

簡單的比較表格:

Hugo Hexo
Language Go JavaScript
Config Format TOML support YAML, json … YAML
Templates Go Templates EJS, Swig
License APL 2.0 MIT

老實說 Hugo 的官網寫的教學實在是非常詳盡,可以深深的體會到開發 Hugo 的人是如何地用心,正如官網所屬說的。

不過我還是稍微提及一下整個建置的流程吧。

設定環境

此指運行 Hugo 的環境,也就是用來產生靜態網頁的環境,必須一提,Hugo 利用 Go 語言的特性,展現完整的跨平台的運行環境,在 Windows 甚至僅僅只須一個二進位執行檔 .exe 便可以使用,實在是非常便利。因為各平台不同,這裡就參考官網的教學即可,已經寫得非常詳盡了。

官網教學:https://gohugo.io/overview/installing/

建置一個新網站

設置完環境後,我們可以藉由執行語法:

$ hugo new site SiteName

來建立一個新的網站。

輸入此指令會產生以下目錄,包含 archetypescontentdatalayoutsstatic

$ cd SiteName
$ tree SiteName
.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
└── static

配置文件 config.toml

官網的文件寫得非常詳盡,這個文件主要設定了整個專案的基本配置包含了網址、主題、靜態黨產生目錄等。

官方說明文件:https://gohugo.io/overview/configuration/

參考的配置:

languageCode = "zh-TW"
title = "黑函"
baseURL = "https://iorz.cc"
description = "請用真心渡女孩心中的河,不論日夜,不論夏冬。"
theme = "ThisIsOrz"

此外這個文件檔案,可用來傳遞主題使用的參數,是一個非常重要的文件,請大家好好對待。

創建文章

$ hugo new about.md

會在 content 目錄下創見一個 about.md 文件。

如果想把文章整理在一起會建議加入一個目錄分類:

$ hugo new post/about.md

由於 Hugo 預設的文章格式是使用 Markdown 語法,在寫作之前建議可以先熟習一下相關知識

安裝主題

http://themes.gohugo.io/ 選擇一個喜歡的主題吧。然後把主題檔案 clone 到 themes/ 下,例如 ThisIsOrz。

配置主題

不同的主題有不同的參數設定,相關的設定請參照主題的說明文件,在個別設定即可,這個主要會動到 config.toml

生成靜態頁面

$ hugo

這行指令會使整個專案生成靜態頁面,預設目錄為根目錄下的 public 資料夾。不得不提到,Hexo 基於 node.js 的檔案生成速度已經是十分快速了,但是對於龐大的內容網站而言,在後期開發生成的時候,動輒數十秒的生成速度實在是令人無法忍受,當然我只是想換換平台罷了。(茶)

本機預覽

$ hugo server

可以在本機 localhost:1313 看到渲染出來的結果,且支援 livereload,對於開發而言是一個非常方便的功能。

部屬

不像 Hexo 方便,內建了許多部屬方式,不過靜態的網頁基本上部屬方式也是十分容易。可以利用 git 工具部屬在github Pages 或 rsync、FTP 的方式部屬在個人的 VPS,甚至可以在 VPS 裝上 Go 來跑 Hugo 都可以。

後記

目前黑函是利用 Hugo 部屬在 VPS,說真的靜態網頁真的是十分省資源。暫時應該是不會考慮回到 WordPress 懷抱,雖然靜態網誌的生成還是有許多缺點的,不過 Hugo 提供強大的功能已經足以應付一般的網誌,之後有機會再來分享 使用 Hugo 的一些經驗以及效果。