使用Github快速部署高性能Hugo靜態網站
身為一名後端工程師,學會架站那是必須的,雖說以前接觸過各種的架站,Wordpress,Wix,諸如此類的,使用上也很方便又有後台多讚啊!但考量還需要一台Server,同時還要管理資料庫,著實也是有點麻煩,最近在一番的查找之後發現,Hugo根本就是為了寫blog而生,此篇文章紀錄了如何使用相當熱門的Hugo搭配github快速建站的過程。
為何選擇hugo?
以當前流行的網頁靜態生成引擎來說知名的例如,node.js生態的Hexo,gatsby等等,及本文主角使用Go的Hugo,這幾個較為常見。
這邊是論壇上的排名,給各位參考其討論及熱門程度,再選擇哪種適合自己。
本篇文章會以兩個部份進行說明:
- Hugo的基本安裝及設定
- Hugo搭配Github Actions實現自動化部屬
使用Hugo + Github建站大致有以下步驟:
- 申請一個github帳號
- 購買一個漂亮的網址(可選)
- 安裝hugo CLI
- 選擇想要的Hugo模板
- 上傳到Github上
- 設定github Action CI/CD
- 同步到github Page上
安裝Hugo
因本身有開發Go程式,所以習慣使用go install的方式進行安裝。
go install -tags extended github.com/gohugoio/hugo@latest
hugo version
如果使用linux或macOS作業系統,也可以使用官方推薦的homebrew方式進行安裝。
如使用其他系統請參考官方頁面
建立Hugo網站
經過剛剛上面的指令後,可以透過hugo new site指令進行建立新網站。
設定主題
有很多方式可以引入主題,我習慣使用git submodule方式加入,更多主題可以到官方的頁面來找尋自己喜歡的。
cd blog-test/
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
如果需要更新主題,使用以下指令:
git submodule update --remote
初始化主題
以這個主題為例,在位置themes/ananke/exampleSite/底下的目錄會有需要使用到的設定檔,先複製下來:
# 複製到root目錄底下的位置
cp -rf themes/hugo-theme-den/exampleSite/* ./
複製完後,就會在config.toml文件中看到一些設定的配置。
建立文章
完成以上步驟後,可以透過指令hugo new post/[文章名稱].md來建立文章,由於hugo全部都是使用MarkDown的語法來撰寫的,語法簡單,效率好是其特色,使用過就回不去了,如果不熟悉的網友可以參考這邊哦!
hugo new post/hello-world.md
啟動服務
使用hugo server進行local端的測試,支持熱更新,只要存檔就會自己重新整理!。
透過瀏覽器輸入http://localhost:1313就可以使用本機端開啟網頁進行調適。
這時候你會看到錯誤的畫面,先別緊張讓我們來調整一下。
將設定預設的github.com/theNewDynamic/gohugo-theme-ananke更改為ananke即可。
產生靜態內容
於跟目錄輸入hugo就會產生出靜態內容,在依照個人需要找地方進行部屬。
總結:
今天文章示範了如何安裝及基礎的設定Hugo,熟悉一些程式的同學相信都可以在一小時內搞定,另外hugo還有許多的主題及套件可以設定,如留言板,SEO優化,社群..等等功能,如果有熟悉前端js的同學相信能玩的東西一定更多,自己也還在摸索中,下一篇將會介紹如何發揮懶人精神,搭配Github Action的CI/CD並使用Github Pages實現自動化部屬的流程。
如這篇教學文章對你有幫助,請按讚或分享,或是對文章有任何問題及需要修改地方都可以來信或是利用留言功能聯絡我喔,感謝大家觀看。
參考:
https://gohugo.io/
