技術筆記｜使用 Hugo 免費搭建個人網站

兩年多前，開始有了重新架構網站的想法，所以把 Blogger 架設的網站，移轉至到了新的平台，當年我也做過了一些優缺點評析，剛好最近又再重新整理網站的所有架構，順便也重新啟動了一次 Hugo 架設網站的循環。

奇妙的共振，讓我在 Matters 看到了篇關於自架網站的相關文章，透過連結看到許多自架站的成果，例如@魔鬼小編的生活就是這麼廢、@捲氏俗女的YZ Straight Talk｜繼續寫字，提供了許多網站排版的靈感，漸漸把自己從無盡的「版型搜尋」解放出來，開始設計一個改版後的網站，呈現改版後的自己。

如之前說過的，我對於手把手的文章沒有這麼擅長，所以大概講一下頭跟尾，並提供更多的資源給大家參考外，還是要回來著重思考的過程以及獲得的內容。

Hugo 的門檻

寫部落格十幾年的時間，想當年最喜歡的平台是「明日報」（相信大家應該幾乎沒聽過），幾個大平台來來去去，到現在大概就幾大主流 Google 旗下的 Blogger、具領導地位的 Wordpress，廣告非常惱人的 Pixnet，還有幾個 WIX 類型的網站建置系統。

Hugo 算是近年興起，慢慢擁有一片天的網站架設工具。基本上，很類似 Wordpress，他可以提供不僅僅只是部落格，更強大的是可以成為一個網站。

但相較於其他平台，Hugo 門檻是比較高的，這樣的門檻帶來了一些特色，卻也讓很多人沒有辦法入手，例如：

1. 熟悉 Markdown
2. 能夠懂 Github 使用
3. 能夠自主的架設 Hugo 在電腦上產生網頁

Hugo 是否過 Google 研發的 GOlang 為基礎，創造出來的靜態網站編譯器。所有的網站最後都會經過轉譯成為 HTML 檔案，擁有極佳的速度體驗，但去也產生了門檻跟限制。

第一個編輯文章的時候，需要倚靠 Markdown 來編輯原始稿件，Hugo 支援許多 Markdown 格式，不過對於不熟悉 Markdown 的人，你當然可以開啟 HTML Code 書寫模式，但其實就沒有這麼方便。

再來就是架設網站的時候，有多種選擇，目前看起來最方便的就是透過 Github，基礎是創建一個 Github Page 把輸出的 HTML 檔案放在裡面，不過後來我發現更好方式是把 Github 連結到 Netlify，這樣可以自動部署。

講到這邊都是技術門檻，網路上是有許多資源的，¹大家可以自己去參考或搜尋 Hugo。

總的來說，技術的門檻比現在盛行的工具，是高出許多的，但我自己覺得，結果是一個甜美的果實。

客製化設定的部分

延續這樣的門檻，如果大家有興趣，可以慢慢的自己做做看。當你突破了技術設定的部分，或許會對能客製化的部分吸引。

這兩年多來，總是會因為自己覺得能夠更好的部分，對網站有增減的部分，很多技術面的內容，我有收整在另外一篇文章。

Hugo 的好處就是完全的免費開源，也已經有許多人使用在自己的網站上，所以當有問題的時候，上網搜尋可以看到許多問答集，自己慢慢測試可找到答案。

另外一層面，即使你不熟悉程式碼，但只要基礎的 HTML 跟 CSS 設定，也能夠達到許多客製化版位的部分。

例如，目前未來六米上面有許多欄位都是透過 HTML 與 CSS 設定出來的，例如以下的三個版位。

還有許多其他的版位，歡迎多光光網站不同的文章。基本上都是透過 CSS 與 HTML 簡單的改寫之後，就可以完成的。

我自已本身就已經累積了一定的經驗，所以可以根據自己需求制定，當然你也可以選擇一個自己喜歡的版型，目前已經累積了上百種的免費版型，真的要使用的話，其實也是充滿不同的選擇。

使用免費的主機資源

在使用 Wordpress 的時候，因為整個套件上面是包含了程式在裡面，所以需要主機的規格，要能夠提供 PHP 跟 MySQL 等資料庫與程式語言。這一點，Hugo 具備大大的優勢，因為所有 Hugo 編譯出來的網站，是靜態網頁。

目前已經有許多免費的資源，如之前講到的 Github Page，就是穩定的一個主機空間，當然網路上也有許多支援 HTML 網頁的免費空間，另外一方面如 Netlify、還有 Cloudfare Pages。

如果使用付費的空間，當然也是可以的，所以在部署網站上面，Hugo 提供的選擇是非常多元的，雖然有一定的入門門檻，但之後主機上面選擇就非常多，且流量相對要程式運算的網站，也有節約的可能。

小結：做網站是一個反思的過程

上面大概是整合了一些不同的資源，感謝這文章的整理，讓我重新複習使用 Hugo 架設網站的過程。除了技術面以外，另外一部分的經驗是，一直在思考自己到底想要什麼。

因為看到幾個版型很舒服、清晰的網站，²使得自己在過程中，一直在思考著，我到底想要呈現什麼樣的感覺，又如何能夠創造一個連自己閱讀起來都覺得滿意的環境。

其實在這次動工之前，我大概每幾天都會回去看不同的版型，想著我應該要換到哪一個版型。設定很多條件，例如需要有亮色與暗色版本、需要能夠有多層次的選單等等。

好幾次，覺得自己選好了，最後又被那種無端的完美主義打敗，覺得這麼版型有個地方不合，這樣應該來回超過十次。

終於在這次的端午連假前夕，忽然覺得既然找不到一個完整屬於自己的，不如自己找一個適合的慢慢改成自己喜歡的吧！

從過去修改到一半的版型，慢慢找到一個自己覺得適合修改，開始動工。感謝過去兩年多的累積，在修改上面能夠達到自己的需求；也感謝網路上許多的資源，能夠提供嘗試的可能，並且達到預期的效果。

在每次一個新的元素設計出來後，總是不斷地再斟酌，到底應該多少行距？要用什麼字型？大小、顏色是如何？要使用背景色嗎？一對問題不斷的自我省思，不斷地去思考：「哪些是我自己看了會開心，甚至於興奮的？」

最後成就了現在的版型，相信你應該會發現在這裡面，充滿著許多我參考的一些影子，那是反覆抉擇下，找到的舒適感，參考別人的美，創造出自己的獨特。

這兩、三天的全力投入，前半段的端午假期都沒有做其他的事情，終於昨天推出了成果，是一段充滿不同思考的珍貴過程，相信這一段養分，在未來的文章中，也會不斷地呈現。

期待更多的分享以及碰撞出的火花。

1. 將部落格從 Wordpress 轉換到 Hugo、WordPress 搬家 Hugo 的記錄與設定、[BLOG] 從WORDPRESS 移動到 HUGO
2. 雷蒙三十、科技島讀、電腦玩物