作為本站的第一篇,不如就來筆記一下如何使用 Hugo 快速把一個簡單的靜態網站生出來吧!

前(ㄈㄟˋ)言(ㄏㄨㄚˋ)

其實我相處最久也用的最有心得的平台是 WordPress, 那為什麼自己開站不用 WordPress 勒? 沒辦法啊,PHP 跟 WordPress 就不夠潮不夠有趣, 拿這來寫 developer 向的文章應該會被鄙視到死…

啊如果要追求潮流,怎麼可以忘了 Medium 這個故事大平台! 在這個全民 Medium 的時代竟然有人開新站選擇不用,這不是犯蠢就是打算寫心酸的, 不過既然最潮的沒跟上,至少來跟一下用 Go 寫的 Hugo 吧。

靜態網站是啥?

開站第一篇,還在練習怎麼寫聳動的農場標題,不過就先從用關鍵字塞好塞滿開始吧。 然後當然就要先開始做名詞解釋了~ (背景音樂請下)

其實靜態網頁就是已經準備好完整內容的完整頁面, 不用每次頁面都要讓 server 辛苦的從各種來源 (通常是 db 啦) 把頁面內容組合出來。 而且好處就是這種網站都快的飛天,而且非常容易找到可以放的地方 (GitHub PagesAmazon S3Firebase 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 出去吧! 下次見溜~