Hugo+GitHub 架設部落格
前言
一年多前,2017 年 4 月,我越獄了當時的新系統 iOS 10.1.1,並且用 theos 撰寫了數個小擴充套件(tweak)供自己使用,當然也有上架至 BigBoss 的 FolderAutoClose 10 至今已有四千餘人下載使用。
在撰寫越獄套件時,由於 iOS 逆向工程的網路中文資源過於稀少,是跌跌撞撞吃了不少虧,也有私訊了越獄開發圈的臺灣人,不過可能因小弟不才,他們似乎沒有想要搭理我的意願。
是不是有跟我一樣非本科系,又對越獄開發頗具興趣,但又苦於中文資源稀少的人呢?我想。
我決定,不如將開發過程的筆記寫下來並分享出去。
於是,我架設部落格,撰寫了數篇詳盡的越獄開發基礎教學,但是後來 iOS 11 的越獄掀起了不少爭議。
Saurik 甚至說越獄已死,再加上當時轉換學習環境,無暇經營部落格,開發的相關筆記就此喊停。
今年,辭去了會長職位,iOS 12 的越獄進程也逐漸明朗,是時候重拾部落格舊業。
我建立了 2019 目標:「週更部落格」,我想先讓部落格換然一新,舊貼文也會在整理後陸續推出。
以前我是用 Hexo+GitHub 靜態頁來架設部落格。
不過 Hexo 過於繁瑣,需要安裝一堆套件,程式肥大,效率不佳。
尋覓後發現了 Hugo 也能在 GitHub 上部署部落格,而且與 Hexo 相比簡單不少,效能也不錯,一樣是使用 Markdown 來撰寫貼文,很適合程式設計師使用。
下文將使用 Hugo 在本地建立靜態網站檔案,再將檔案丟上 GitHub 託管,並利用 GitHub Pages 服務供使用者瀏覽網頁。
關於 Hugo、GitHub
Hugo:開源的靜態網站生成工具。
GitHub:透過 Git 進行版本控制的軟體原始碼託管服務。
軟體需求
Homebrew:macOS 套件管理工具。
Hugo:開源的靜態網站生成工具。
Atom:由 GitHub 開發的開放原始碼的文字與程式碼編輯器。
ImageOptim:macOS 圖片壓縮、最佳化軟體。
GitHub Desktop:圖形化介面的程式碼版本控制工具。
實作過程
安裝 Homebrew
依照 官網 指示安裝 Homebrew。
如果沒有安裝過 Xcode Command Line Tools 的話,下載可能會有點久。
安裝 Hugo
-
於終端機下指令,利用 Homebrew 安裝 Hugo:
brew install hugo
-
於終端機下指令,檢查 Hugo 是否安裝成功:
hugo version
-
出現類似
Hugo Static Site Generator v0.54.0
的訊息就代表安裝成功。
建立新部落格與安裝主題
cd
到要存放部落格檔案夾的目錄,於終端機下指令:
hugo new site 部落格檔案夾名稱
此檔案夾即為部落格的 根目錄,如下,詳細 Hugo 目錄結構請參考 這裡。
.
├── archetypes(.md 初始模板)
├── config(設定檔)
├── content(貼文)
├── data
├── layouts
├── static(網站靜態內容檔案)
└── themes(主題)
Hugo 有很多 主題,將其下載目錄./themes
底下,並依照主題說明的指示將相關設定檔輸入至./config.toml
裡即可。
創建頁面
-
建立一般頁,在根目錄下指令:
hugo new about.md
一般頁將建立在
./content
裡。 -
建立貼文,在根目錄下指令:
hugo new posts/welcome.md
貼文將建立在
./content/posts
裡。
安裝 Atom
創建了頁面之後,使用 Atom 來編輯.md
檔,官網 下載安裝。
推薦安裝的擴充套件:
- cht-menu:繁體中文化。
- markdown-preview-enhanced:強大的 Markdown 編輯套件,說明。
- terminal-tab:在 Atom 中使用終端機。
安裝 ImageOptim
使用 ImageOptim 來壓縮圖片,使上傳圖檔體積縮小,官網 下載安裝。
預覽、製作
-
本地預覽,在根目錄下指令:
hugo server
產生預覽內容,使用瀏覽器經由 http://localhost:1313/ 查看。
且支援熱部署(livereload),修改貼文或是 CSS 時是不用重啟的,十分方便。
-
製作靜態頁面,在根目錄下指令:
hugo
將產生部落格的靜態頁於
./public
底下。
安裝 GitHub Desktop、部署
產生部落格到./public
後,使用 GitHub Desktop 將其部署至 GitHub。
-
開啟網頁瀏覽器登入 GitHub,新增一個
使用者用戶名.github.io
的遠端 repo。 -
官網 下載安裝 GitHub Desktop。
目前 1.6.1 版本有個 Bug,登入 GitHub Desktop 會抓不到遠端名稱包含
.
的 repo,先不要登入。官方已經注意到這個問題,不知道什麼時候會修復。
-
先將
./public
檔案夾刪除,再手動填入路徑 clone 至本地./public
:URL:https://github.com/使用者用戶名/使用者用戶名.github.io.git Local Path:./public
-
在 Ignored Files 裡加入
.DS_Store
以免不必要的檔案上傳遠端。 -
未來新增貼文之後,commit 於本地,並 push 到遠端 GitHub 即可。
部落格的網址為:
https://使用者用戶名.github.io/
GitHub Pages 的相關 說明。