使用 Hugo 快速建立一個靜態網站
作為本站的第一篇,不如就來筆記一下如何使用 Hugo 快速把一個簡單的靜態網站生出來吧!
前(ㄈㄟˋ)言(ㄏㄨㄚˋ)
其實我相處最久也用的最有心得的平台是 WordPress,
那為什麼自己開站不用 WordPress 勒?
沒辦法啊,PHP 跟 WordPress 就不夠潮不夠有趣,
拿這來寫 developer 向的文章應該會被鄙視到死…
啊如果要追求潮流,怎麼可以忘了 Medium 這個故事大平台! 在這個全民 Medium 的時代竟然有人開新站選擇不用,這不是犯蠢就是打算寫心酸的, 不過既然最潮的沒跟上,至少來跟一下用 Go 寫的 Hugo 吧。
靜態網站是啥?
開站第一篇,還在練習怎麼寫聳動的農場標題,不過就先從用關鍵字塞好塞滿開始吧。 然後當然就要先開始做名詞解釋了~ (背景音樂請下)
其實靜態網頁就是已經準備好完整內容的完整頁面, 不用每次頁面都要讓 server 辛苦的從各種來源 (通常是 db 啦) 把頁面內容組合出來。 而且好處就是這種網站都快的飛天,而且非常容易找到可以放的地方 (GitHub Pages、Amazon S3、Firebase Hosting…), 完全不用煩惱 hosting 的問題。
拿來做靜態網站的工具其實也很多,但是 Hype-Driven Development (HDD) 告訴我們, 要選就要選最潮的!所以就選了 Hugo 了!
安裝 Hugo
根據 Hugo 官網 的指示,其實在 Mac 環境有裝 Homebrew 的話只要一行就裝好囉!
brew install hugo
裝好之後再檢查一下是不是可以順利執行:
hugo version
這樣一切就準備好了!
建立新網站
開新站就直接用 hugo
來開就可以了:
hugo new site mysite
Hugo 就會在現在的位置新開一個 mysite
資料夾並且把一些起始的檔案放進去。
接下來到這裡挑選一個你喜歡的主題,下載並且放到 themes
資料夾裡面:
cd themes
wget https://github.com/aos/temple/archive/master.zip
unzip master.zip
mv temple-master temple
然後修改 config.toml
檔案,設定使用的主題:
echo 'theme = "temple"' >> config.toml
最後執行:
hugo server -D
接下來會看到如同以下的訊息出現:
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
網站就跑起來啦!可以看 server run 起來的只是連上本機端的測試站。 連上之後就可以開始來寫文章啦! 文章記得用 Markdown 來寫噢!
hugo new posts/my-new-post.md
未完待續
以上內容目前都還只是開頭而已,下一篇再來看怎麼把做好的網站 deploy 出去吧! 下次見溜~