Timo

我將網站從 WordPress 搬到 Hugo 了！

閱讀時間約 8 分鐘

【這篇文章撰寫於 2022 年 9 月。】

我在大約一年前的一篇文章——試就知道，試又不用錢當中有提到，在剛開始準備要建立個人網站的初期，我因為對絕大部分的程式碼都非常陌生，還有對許多技術性的問題都不太了解，導致我只能先透過較容易，而且教學資源也較豐富的 WordPress 來達成，而不能使用我其實比較喜歡的 Hugo。

然而到了一年後的今天，我因為一時地心血來潮，到網路上隨機搜尋了一些使用 Hugo 來架設網站的教學影片，赫然發現原來我在這一年的自我摸索和學習當中，其實已經對大部分的流程，有了基本的認識和掌握，於是下定決心，是時候該把網站搬家了（也就是你現在看到的地方），所以在這篇文章，我就要來和你分享我將網站從 WordPress 搬到 Hugo 的過程和心得。

動機

在最一開始，我想要先來說明一下，為什麼我會不太喜歡 WordPress，其中一個非常大的原因，是因為它實在是跑得太慢了，我在剛開始使用它時就有感受到這件事，不管是在前台瀏覽、檢查我的網站，還是在後台調整設定，我每點到一個頁面，或是做一個更動，都得要等 2 到 3 秒左右，而且你要知道，這個神之慢的速度，還是在我網站明明就還空空如也，什麼都沒有的時候就已經是如此了，我無法想像為什麼我可以忍受它這麼久。

不可否認的，WordPress 有它一定的優勢，對於一位網站架設的新手來說，它的確是一個非常簡單、快速，而且容易學習的媒介（其中一個原因，是因為在絕大部分的時候，都不需要看程式碼），但是當我對網站架設有了更多（基本的）認識以後，我就不會想再繼續待在那了，而是搬到一個更吸引我的地方，也就是 Hugo。

搬家開始

第一步：下載程式碼

首先，在我剛下載完 Hugo 到電腦裡，並且準備開始進行網站搬家的時候，我就發現了一件讓我非常開心的事情：所有的檔案和資料，全都存在我的電腦裡，因為它就只是一個存有我網站資訊的資料夾而已！當我在 Hugo 的官網選定，並且下載好我要的主題（Theme）之後，我可以直接在我的電腦裡，將它的原始碼檔案打開，並且更改裡面的程式（當然要看清楚人家的授權條款），把我的網站變成我喜歡的樣子。

在 WordPress 裡面，雖然我也能夠直接從後台將原始碼檔案打開，並且修改裡面的程式，但我還是喜歡擁有那種「資料直接存在我電腦上」的掌握感，而且更讓我感到意外的是，這個網站所有的檔案大小，只有 4 MB 而已（在我寫這篇文章的當下），它根本就不佔什麼空間嘛！（和 WordPress 相比起來，它在我電腦上備份的檔案大小，是 171 MB，真的是天差地遠啊⋯⋯）

在這個步驟，最讓我感到困擾的，其實是在「選擇主題」這步，聽起來可能有點好笑，不過因為 Hugo 的官網提供了上百種的樣式，所以我必須要從這裡面，選出一個最接近我需求的主題，這樣我才不需要做太多的修改（光是選出一個主題，就花了我整整半天的時間）。

當然，我也可以透過寫寫程式，來新增我想要的東西和功能就好，不過，我不會。

第二步：修改網站外觀

其實我對下載好的資料和主題所做的調整，就只有一些簡單的 CSS 和 HTML 而已，這是我在這一年的時間裡所「摸」出來的，所以我還蠻清楚我所做的每一個改動，和一年前的那時候相比起來，「試」的成份幾乎消失了。

而到了這邊，我就開始深刻體會到 Hugo 最大的優勢了：它真的跑好快，在我將網站「發布」出去之前，我可以先在自己的電腦裡面將網站給蓋好，而我每修改一次的程式碼，在我按下儲存檔案的那一瞬間，網站前台就已經出現相對應的更動了，這速度也太讓人滿意了吧！

還難以理解嗎？讓我來跟你分享，根據我終端機所提供的資訊，我所做的每一次調整，平均只需要花不到 50 毫秒（0.05 秒）來完成，這是一個什麼樣的概念呢？就是在我按下快捷鍵 cmd+S 進行存檔，並且將視線移動到網站前台的分頁時（我開雙螢幕，所以它就只是一個往旁邊看的動作），就已經完成更動了。（和 WordPress 相比起來，又一次的天差地遠⋯⋯，難以想像我到底在 WordPress 上浪費了多少時間。）

第三步：移動文章

在我之前的一篇文章——快來試用 Markdown，你一定會愛上它！裡，我介紹了許多使用 Markdown 語法來打文件的優勢，這一段時間以來，我也一直都是使用它來打我的文章的，而在 Hugo 裡面，因為文章也都是存成 Markdown 的 .md 格式，這讓我能夠省去這步驟的一個大麻煩，那就是要從 WordPress 下載所有的文章和頁面，並且將檔案格式轉成 .md 檔（真是好險啊，因為似乎有許多人都在這裡傳出災情）。

不過我還是得將文章的一些基本資訊，例如網址等等的，手動放到各個文章裡面，這樣我的新網站才會順利讀取並且顯示這些資訊，我必須要承認，在這一個步驟，還挺無聊的。

（這部分應該算是在分享 Markdown 的美好，而不是 Hugo，但你有沒有想過，為什麼 Hugo 會選擇使用 Markdown 語法呢？）

第四步：發布網站

當我已經在我的電腦裡面將網站給蓋好，外觀、文章、頁面等等的都設定妥當以後，就可以將網站發布出去了，而從這裡開始，也準備要進入困難的環節了，原因是，我幾乎找不到任何關於這方面的，非 Hugo 官方的教學資源（雖然它其實已經寫得很詳細了），而且我從頭到尾，也都沒有很了解這其中的原理。

我後來選擇的方法，是使用 GitHub 加上 Netlify，先將我電腦裡面存有我網站資訊的資料夾，連動到我的 GitHub 帳號後，再用 Netlify 提供的免費服務，將存在我 GitHub 帳號裡的網站資料給發布出去，到這裡還不算是太困難，只要跟著官方的教學文章和提示訊息走，很快就可以完成了。

第五步：將網站和網址給連起來

最後一步，也是最困難的一步，就是要將我的網站，和我原本註冊的網址給連起來。

在第四步驟裡，我並沒有調整到任何跟我原本的網址有關的設定，我剛剛所發布出去的網站，是使用 Netlify 提供的免費網址，有些人可能會覺得無仿，這樣就可以了，所以走到這步就會停下來（然後就可以實現不花任何一毛錢來建立自己的網站），而幾乎所有的教學影片，也都只有講解到第四步而已。

但是對我來說，沒有使用我當初精心挑選的網址，就少了一種「屬於自己的小園地」的那種感覺，所以我決定繼續往前走！

但是到了這步，我就只剩下 Hugo 的官方說明文章，還有我在一年多前做這件事情時所得到的經驗可以參考了，我必須老實說，我在這步所做的努力，就只是一直在瞎猜而已，看看我動什麼樣的設定，可以順利將網站和網址給連起來，而不會顯示錯誤訊息，但就從結果論而言，我確確實實地成功了。

而完成這步以後，也就代表辛苦的搬家過程，已經算是告一個段落了。

（如果你好奇，我是如何「成功」的，我可能可以簡短講一下，我將 Netlify 官方所提供的幾個，應該是跟 DNS 有關的連結，貼到我註冊網址的地方，一個叫 NAMESERVERS 的欄位，然後帶著非常不確定的心情等待一天以後，就莫名其妙成功了，當然在這之間包含了無數次失敗的嘗試，而且再一次的，我從頭到尾都不太了解這背後的原理，DNS、DNS server、DNS record 等等的各種名詞，不過我姑且先把 DNS 理解成，能將網站和網址給連在一起的「指路人」。）

未來的目標

當然，我不可能就只有做這五個步驟而已，更不可能只有在最後一部分才出現卡關，我只有大概和你介紹整個的流程而已，中間有許多我個人偏好的設定和功能，都是經過我一番番的「嘗試」而得到的（反正試又不用錢，對吧？）。

另一方面，我的網站調整當然也不可能這樣就完成了，目前它只是處在一個「我能接受讓它被發布出去」的這個階段而已，細節上還有其他一些更深入、更技術的層面我想要改進，比如說：

我在打數學式子時，使用的指令沒有 100% 和我在打論文、報告時一致，雖然應該已經有 90% 以上是相同的了，但就是有些指令不太一樣，或是不支援，這令我感到不舒服。
在 RSS 閱讀器上，沒辦法正確顯示數學式子，原本應該要顯示 $x+y=z$ 的地方，會顯示我所輸入的 $x+y=z$ （那兩個錢幣符號會告訴程式，夾在這中間的是一個數學式子，進而使用數學符號的樣式）。
設計自己的網站圖示（Favicon）、新增搜尋功能、黑暗模式、雙語加上數學網站⋯⋯。

其他還有一些小地方，我就不一一列出來了。

最後，當然還有一個更大的目標，那就是要想辦法去學習，並且了解那些我還不懂的知識，包含了網站後台程式碼的各種指令，還有架設網站背後運作的原理等等的，只要我能更加了解這些東西，我就更能夠客製化我的網站了。

結語

在我剛開始踏入 Hugo 的旅程時，就馬上體驗到它的美好了，這是我在使用 WordPress 的這一年以來，從來都沒有的體驗，當然，我不後悔自己一開始沒有直接選擇 Hugo（好啦，可能一點點），因為我的確也有在這一段時間裡，透過操作簡單的媒介，摸出一些自己的小小心得，並且能夠讓我直接應用在網站搬家上。

Hugo 的所有層面，在我看來都比 WordPress 還要更具優勢，搬家過程和結果也都令我非常滿意，我唯一能想到後者的好處，真的就只有簡單、快速而已（至少以我的經驗來說是如此），如果你的網站目前是架在 WordPress 上，差不多可以考慮搬走了，這對你和你的讀者，絕對是利大於弊。

你終究要搬到 Hugo 上的，那為什麼不一開始就直接選擇它？