如果你跟筆者一樣選擇用靜態網站來經營個人品牌,強烈建議收藏這系列用 Hugo 架站的文章。我會從挑選主題、安裝 Hugo 開始,一步步帶你客製化網頁參數,最終將網站部署到 GitHub Pages,並加上 Google Analitycs 來追蹤流量!
GitHub 是一個程式碼版本控制的平台,而 GitHub Pages 則是它的一個副產物。
如果你上傳一個副檔名為「.html」的檔案,GitHub Pages 就會把它轉換成漂亮的網頁,並且這個網頁是可以透過 Google 搜尋找到的。
如果你是程式小白也不用擔心,因為筆者接下來會帶大家會「Hugo」這個工具,來產生個人品牌網站的 html 程式碼。
「The world’s fastest framework for building websites」
進入 Hugo 官網後,你會看到這段宣傳標語,它號稱自己是全世界最快的個人網站架設工具。
Hugo 有提供豐富的主題供大家選擇,大家只要點擊「Themes」便可瀏覽各主題的預覽圖。
因為筆者的目標是建立個人品牌的部落格,所以選擇旁邊「Blog」的分類,然後就可以像是逛街般挑選自己喜歡的主題了。
看到心儀的主題後,在下載(Download)前,你可以先往下滑。
部分的主題有提供 Demo,可以觀看這個網站具體呈現的效果如何。
因為對個人品牌來說,「文章」是最大重點,所以可以多關注「封面、文字、圖片、程式碼、目錄、標題」等資訊呈現的方式。
下面的操作步驟為 Mac 環境,使用 Windows 的朋友請參考官方文件的操作步驟
STEP 1:打開終端機(Terminal)。
STEP 2:安裝 Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
STEP 3:用 Homebrew 安裝 Hugo
brew install hugo
安裝完成後,輸入 hugo version
確認自己有順利安裝
STEP 4:安裝 Hugo 的 liva 主題
git clone https://github.com/gethugothemes/liva-hugo.git
STEP 5:調整資料夾結構,並建立放置主題的 themes 資料夾
mv liva-hugo/exampleSite brandSite
mkdir brandSite/themes
mv liva-hugo brandSite/themes
執行下面指令就可啟動 Hugo
cd brandSite
hugo server
進入 http://localhost:1313/liva/examplesite/ ,如果看到下面的畫面,就恭喜你成功嚕(想關閉用 Ctrl + C 即可)!
但如果讀者遇到這段錯誤也不要害怕:「Error: command error: failed to load modules: failed to download modules: binary with name “go” not found in PATH」,安裝 Go 即可。
brew install go
做到這邊就完成 Hugo 的初始化了,但現在網頁的內容都是主題預設的;筆者會在下一篇文章分享設定部落格網站的基礎參數(自我介紹、圖片、網站 Logo、Email、社群媒體…)的技巧。
在文章的最後,要特別感謝古古的後端筆記,許多操作步驟與設計邏輯,筆者都是參考她在 Hahow 開設的「Github 免費架站術!輕鬆打造個人品牌」這堂課,如果想知道更詳細的操作細節,歡迎到 Hahow 上支持選購。
我是林鼎淵,如果覺得這邊文章對你有幫助,歡迎追蹤筆者的 Facebook,我會持續分享實用的新知識 💡