姐妹們，哥哥弟弟們，我出關啦哈哈！

我從四月初開始著手開發這一個新的網站，一直到今天 2022年10月2日，終於讓他成功上線了，心中也放下了一塊巨大壓力。

在短暫告別了我的部落客生涯大約5-6個月的時間，現在突然要提筆撰寫文章，有些不太能適應，邏輯可能會些許不通，因為這篇文章其實是在我沒有任何發想跟規劃下撰寫，我希望能夠趁今天新網站發布時，利用週日剩下幾個小時的時間，順便發布這篇文章，紀錄也慶祝我這整整六個月利用休閒時間開發，緊湊的網頁開發生涯，然後圓滿結束，順利上線。

就在大約1小時前，新網站發佈了(對，就是你目前現在看到的網頁，已經是新的網站了)，我還記得當下我的想法是: 天呀，好沒有真實的感覺。

可能是因為其實在中秋假期的最後一天(09/11)，我早就用Nuxt.js的前端框架把網站完成了，也很開心的上線，但觀察了幾天發現讀者人數下降，我緊急把網站恢復到舊的版本，然後去調查新網站的問題。

我最擔心的事情發生了，我這次用Nuxt.js前端框架來開發我的個人網站，它沒有把SEO處理好，導致我本來在top 1的部落格文章，瞬間掉下排名。

於是，在水深火熱的處理3週後，終於在今天完成修補工作，並將網站上線。

那，讓我們把時間轉回到今年4月吧！

新手好好玩之嘗試期

接觸新的事物，總是讓人感到興奮，這兩年我找到自己作為軟體工程師的天職方向:

就是喜歡透過技術實現自己的idea，或者享受把一個東西從0 build到有，而且照著自己的想法跟規劃去開發。

所以這次我很確定自己很想要運用我休閒的時間來開發我新的個人網站。去年2021年，我差不多用了半年的時間在開發Miri (我的其中一個發明)，當這次決定要開發個人網站時，我知道接下來的4-6個月所有的休閒時間，將會持續專注在網頁開發上。

可能因為我的人類圖是 1/3人 或者是 薦骨權威 吧，突然在當下覺得好像是時候可以來一段時間，一邊學習摸索前端，一邊自己設計跟開發自己的個人網站，於是就在4月初的某天晚上，就開始開啟專案來摸索。

技術的決定當下其實沒想太多，那個時候就是直覺，我表姐前些陣子介紹我使用以Vue.js為基礎的Nuxt.js前端框架，就直覺的決定使用 Nuxt.js來開發我新的網站吧！

然後再加上那陣子，我剛進公司，我的mentor Gem 也是個技術狂，他介紹給我 Tailwind.css，讓我可以不用全部css都從0寫，但也保有客製化設定，就是如果我某些style不滿意，我也可以特別寫一個css自訂styles，這個TailwindCss，我真的必需給它優良的評價。

還有我在第一家公司的好同事 Frank，傳來了他剛用Nuxt.js做了客戶的專案的github repo，借我參考。

以及我還參考了這個網站: 绳命在于折腾，我用 Nuxt.js 重构了博客

看起來很好玩，很興奮，要自己設計自己的網站了，就像是在創造發明東西！

我本來就決定好，我新的個人網站會大致上有哪些功能

• 5頁主題: 關於我, 主頁, 部落格, 作品集, 聯絡
• 部落格文章+分類

然後還有些目標想達成，像是:

• 自己設計網頁
• 優化SEO
• 多語切換

就是很典型的個人網頁，但我希望能夠透過自己設計網頁的樣式與擺設，更呈現出我的個性化，我給人的感受。

接著就在4月初開始實際下去coding，但不久就遇到了問題。

第一個遇到的問題是

我的網頁究竟要長什麼樣子？

自由有個好處，就是你能自由設計，想怎麼做就怎麼做。反義就是，沒有可以參考的範本，不像有現成的主題可以使用。

我既不是UI設計師，藝術天份也很差，我還記得我以前在寫前端時，寫得很醜XD，看起來還是只能抄了嗎XD(?)

很快的，我沒怎麼深度思考，就想說，我想要舊的wordpress網站的header，於是我就打開原始碼，然後直接複製貼上，開始修。

打開別人的網站，然後東抄西抄，把網站外貌跟程式搞得亂七八糟。

重新設計網頁呈現

大概歷經2-3週的開發後，我成功複製了wordpress網站網站的header，還有Navbar(menu導覽列)。

可是在這個過程中，我會一直不斷地看到別人的網站設計的好美，然後就抄過來，東抄西抄，結果變得難看又悲劇，光是Header跟Navbar我就換了好幾種設計，每次做完，都覺得怎麼這個樣式就只是純粹的Navbar或Header，感覺沒什麼靈魂(可能會有人覺得我到底在說什麼哈哈)。

雖然說在去年做Miri時，我也犯過一樣的錯，就是還沒有從UI角度或者還沒從這個專案/產品更深層更上層的概念角度去想，就開始施工。功能有辦法做出來呀，但嚴重缺乏整體性跟設計感，讓人不知道這個網站存在的意義。

這次還是花了自己2-3週的時間體悟。

其實在著手開發網頁前，我應該要去思考

• 我為什麼要做這個網站？
• 這個網站的核心精神跟深層含義是什麼？
• 終點在哪？他會呈現什麼樣貌？

你必須知道終點在哪，你的目標是什麼？你才能夠去規劃路途。

我得從這些要點的角度去切入，然後依照這些問題的答案，去設計網站的頁面跟使用，最後才是技術面，要怎麼去達成。

還有一個重要的點是:

我意識到自己都只想複製別人的網頁原始碼，除了產出慘不忍睹的前端樣貌，還會讓我的程式碼變的很凌亂不易管理，我要做的應該是可以參考，但是要自己用Tailwind跟自己客製的css,html,js知識去開發。

我意識到再這樣下去不行，於是我停了1週，我開始去尋找各個美麗的網頁設計，然後回想自己過去很喜歡某些網頁設計樣式，這次我也想將這些過去的夢想，納入網頁設計中。

我把一些看了很喜歡的網站跟我過去喜歡的樣式，都截圖跟寫下來，然後拿紙跟筆，開始去思考我喜歡哪些網站的某些樣式，然後我可以怎麼把它組成一個網站。

最重要的點是，我開始去思考，我的新網站名稱要叫什麼？我希望它呈現什麼樣子？他的深層含義或者他的核心價值是什麼？有點像是想一個品牌概念，只是會用網站呈現，不是真的實際販賣。

接著，我有了設計初稿，然後開始去想怎麼把他用程式碼實作出來。

舊的先前做的樣式，就暫時移到別的資料夾，重新設計網站。

技術陸續卡關

雖然研究所初步寫了前端，但都是停留在html跟css層級上，而且是初階的css樣式，另外，需要使用到Javascript的場合我沒碰過。

於是，在某些需要使用比較進階的css語法跟Javascript的功能上，我就卡關很久，然後邏輯常常打不開，得問人或者卡好幾天。

像是

• Mobile的選單: 通常在手機版本的網頁會將選單縮小成一個圖案，使用者點圖案就會展開選單，這個需要JavaScript驅動CSS樣式，光是這麼簡單的功能，好像我也卡了1週左右。
• 可惡的旋轉木馬卡了3個月 (Carousel): 這次不知道為什麼自己作死，想要在自己的部落格上加一個酷炫的旋轉木馬功能，結果卡了3個月。但別擔心，並不是說3個月都在嘗試這個功能，而是想到就去嘗試，失敗就暫時先去開發其他功能，然後找到新的資源，再回頭嘗試。我記得好像在某次假日吧，我連續裝了跟嘗試了7-8個 vue的 Carousel 套件。裝了，試了，失敗，刪除，裝下一個，因為我想要呈現的風格，好像沒有一個套件能夠辦到 (不然就是我道行太低)，再加上自己基礎知識不懂的情況下，走了很多冤旺路，最後選定了Tailwind的tw-element 套件來做這個功能。

在還能記住的範圍內，我記得大概就這兩項讓我最頭痛。

喔不是喔，最後要生成靜態網站時，發現Nuxt.js的動態頁面 _dynamic.vue，不會生成靜態網站，所以重整會404/rollback或找不到，我記得當時我也是想破頭卡了好一陣子。

後端優勢:

雖然剛剛說自己沒碰過JavaScript，但我覺得我的JavaScript弱項是需要跟html/css連動時，作為一個後端工程師已經快3年，JavaScript 0 基礎，可是擁有著Python的知識跟後端邏輯，在寫 特別是撈資料，處理資料這類的功能，簡直不要太簡單 XD 哈哈，這也算一個優勢啦。

水深火熱期: SEO 出了問題, 我決定大膽地換技術

4月-9月半，無論是歷經剛開始對於怎麼設計網站很茫然，還是後續某些前端很Fancy的功能卡關，都沒有帶給自己很大的壓力，頂多就是那幾天比較需要思考，但不會到整個腦袋燒起來。因此這段時期還算是很穩定的邊學邊開發。

真正讓我吐血的大事發生在9月半，也就是大約3週前。

在7-8月時，給自己許了希望能在9月把網站做好的願望，總是覺得明明快完成了，但還差那麼一點點的感覺，怎麼感覺看到終點了，可是實際還需要更多時間去收尾。

在中秋連假(9月11日左右)，也是我經過4月到9月這長達5個月的開發後，我終於要把網站產成靜態網站上線了。

在這段期間內，遇到6月底失戀，大約有2-3週的時間是處於沒什麼產能的狀態，突然整個開發的速度變得很慢，眼看著目標好像快要抵達了，但結果最後那10%才是最多事也是最難突破的路途。

在中秋節大家都在玩樂跟放假的日子，我這三天妥妥的坐在電腦前繼續開發，然後在連假最後一天 (09/11) 上線了我的網站。

我原本就很擔心新設計的網站，會不會SEO (搜尋引擎優化) 會有問題，然後造成所有累積的觀看數都要從0開始，雖然我也抱持著，萬一真的不行，從0開始也沒關係。

只要把網頁的Meta Tags 好好的在Html檔內寫好，SEO都不會太差，Google的機器人會去爬你的html檔內容，然後你的文章就會被更多人看到。

在網站上線後，在接下來陸續幾天，我發現 Google Analysis 文章的觀看數一天比一天下降許多，這讓我起了警覺心，於是我開始去搜尋過去某些文章名列Google搜尋引擎前幾名，發現怎麼搜尋文章標題，都找不到，有搜到的文章，描述都是錯的，這讓那些原本前幾名的文章直接往下掉。

於是，我趕緊把原本用hugo做的網站重新上線，然後暫時把新的網站下架，暫時解救了流失閱讀量的危機。

沒想到，我最擔心的事還是發生了。

我去檢查了每一頁文章的html檔，沒想到那些在html內的Meta Tags (幫助SEO優化)，都跟主頁那一頁一模一樣，難怪，因為這樣，機器人爬我的文章，都會得到同樣的資訊，他就會認為是同一個網站。

開始去思考，是不是Nuxt.js的某些設定我沒有設定好，模式雖然調成了static，但SPA設定是打開的，代表雖然生出每一頁靜態網站，但是實際上是進到那個網站後，他才會去跳轉內容，而不是像一般的靜態網站，內容都決定好了。

爬了文章，我調成了 Universal 模式，但隨機發生一堆問題，因為 Universal模式同時包含了 server端跟 client端程式碼，在對於一個前端新手，我根本不曉得這些事，於是看著他爆出一堆錯，我一臉茫然一臉懵。

我感到很挫敗，好多想法湧現出來了，我害怕，是不是我這半年做的都是白費努力？怎麼自己花了這麼多時間做，結果卻沒辦法取代原本的網站。

難過沒多久，想把網站做好的慾望超過了自己在那邊自怨自艾的心情，在歷經一陣子上網找怎麼解決Nuxt.js的SEO問題後，還是得使用 static + universal的選項，而我寫的Nuxt.js是在我完全沒分server side跟client side的狀況下寫的。

我看…與齊花這麼多時間偵錯，搞不好最後會來一個失敗的結果，我的需求是希望在接下來幾週內搞定上線，倒不如….我去找也是基於Vue的Vue靜態網頁生產器吧？

我本來就很希望做個人網站這件事可以在9月畫下句點。

所以，很快的我就開始尋找Vue的靜態網頁生產技術，取代原本的Nuxt.js，我覺得畢竟都是Vue，只是框架不同，不會差到哪去，可以快速轉換。

起初我決定先使用Vuepress，但不到2小時就陸續卡關，因為在Nuxt.js寫了很多.vue檔，但我不知道怎麼搬去Vuepress，Vuepress使用大量個md檔案做設定，好像蠻少vue檔的創作。

沒2-3個小時，我找到了另外一個Vue的靜態網頁生產技術，叫做 Gridsome，看起來跟Nuxt.js有87%像，唯一不同的是 Gridsome 是使用一種 Query語法叫做 GraphQL 來處理文章跟資料內容，但我想身為一個後端工程師，這點不算什麼，看一下文件應該可以馬上上手。

所以，我又用了大約1週時間，把網站從Nuxt.js搬到Gridsome，兩者很相似，搬運起來也幾乎0卡關，無奈在最後看起來快完成了時候，最讓我吐血的事還是發生了。

但，沿路過關斬將，來到最後稍微麻煩的部分，就是我要做部落格的Category 分類頁面，我需要根據不同的Category，用GraphQL撈出該Category的所有文章。

最吐血的就是….，我的文章Category都是用中文命名，然後中文字不屬於ASCII編碼，好死不死我去翻了GraphQL的Github repo，上面寫暫時不支援unicode跟utf-8。

所以在最後一個功能 Category的部分我直接卡死。

當然，像是什麼把Category改成英文，或者encode/decode這種加解密解法我也有想到，但後來都失敗了，(把Category改成英文就有點不大妥當，為了讓網站能運行，而更改原意，這我並不樂見)

我有幾天的內心壓力很大，是自己給自己的，覺得挫敗又毫無希望。

同時也因為，我已經長達半年沒什麼週休六日，我指的是，單純拿杯咖啡，好好的坐在咖啡廳享受一個下午，這種很舒壓的時間，都被我拿來coding。再加上，遇到這些無解的事，已經超出我本來給自己預設的開發時間，所以情急之下，我就腦子炸了，壓抑不住的情緒就開始橫飛了。

(喔對了，我忘記說，因為Nuxt.js的網站版本畢竟是開發好了，所以我有把他部署到Vercel上，然後發給比較好的朋友看哈哈)

網頁還是有做一個版本，部署到Vercel上，算是…，覺得自己做好了，部署到其他服務上，好可以向朋友發送宣傳一下，而同時舊的網站也還在使用，繼續維持部落格的流量。

那週的心情非常差，剛好那陣子除了這件事，也還有其他我內心自我價值不穩的情況發生，就在主管講了一句話，我的眼淚最終還是潰堤了。

我明白，不是主管的問題，而是因為我太久沒有給自己休息的時間，當週的週六，我去買了星巴克，然後坐在公園的一排高牆上，坐了整個下午，一邊吹著風，一邊思考接下來該怎麼辦？

急躁、達標與深層意義 - 學習到什麼？

Gridsome在Github的星星數只有10000個，所以很少有文章跟技術支援出現，出問題找資料會特別的困難。

Nuxt.js相較之下星星數大約5萬左右，但他的取名跟以React.js 為基的 Next.js太像，導致我常常查資料都找到跟Next.js相關的內容。

果然…還是要使用大眾比較流行的技術會好一點，至少當你在新手時間，一直遇到問題，找不到失敗點，網路上的文章數比較多。

於是一邊喝咖啡，一邊找到了 Top 1跟 Top 2 的靜態網頁生產器，同時也有良好的SEO功能，就是 Next.js 跟 原本舊網站就在使用的 Hugo，其實蠻驚訝的，因為Hugo居然是第二名。

當時我還是執意想學前端框架，想使用前端框架來做網站，於是起初想試試看用Next.js重構網站。

先調查好資訊

之前要使用Nuxt.js做網站前，沒有特別知道SEO的部分可能會有問題，只是覺得東西很新奇就直接下去實作。

這次，我花了一點時間去看Next.js，能不能達到我所有的目標?他的語法跟學習曲線如何。

我的一個很異想天開的想法就是，前端三大框架應該都差不多吧？

畢竟都是html, css, Javascript組成，能差到哪去？

然後天真的以為，可以Nuxt.js無痛搬運到Next.js，結果經過我很認真的看文件後，我發現Next.js/Nuxt.js,React.js跟Vue.js，他們的抽象邏輯層面真的差很多，去爬了文才發現原來Vue.js適合入門，如果你想變成大神，可以學React.js。

….

但反正，我的訴求是希望能夠以最快速度重構+上線，所以Next.js眼看學習坡度這麼高，只好先暫時擺下。

Hugo

我的腦中想起來了這個名詞，Hugo雖然用Go寫，但是先前我已經用一陣子了，在之前小改的經驗中，也陸陸續續熟悉很多，而且後端撈資料的語法，跟我新網站撈資料的設計，基本上也是有87%相似，所以我權衡了一下我目前的狀況跟需求後，我還是決定回去用Hugo重構網站。

當然那股壓力還是在的，一方面擔心自己用Hugo會不會做不出來？擔心那些舊有的問題是不是還沒辦法解決？一方面又要壓抑著自己，因為覺得時間就是到了，所以一直很急躁的個性。

急躁、達標與深層意義

平衡 這件事在人生中，一直都扮演著困難的角色，要怎麼剛好能維持原先網頁設計的核心概念跟含義，又可以在規劃的時間內達標，當超過預期時間時，你要把一些原本規劃好的功能拿掉呢？還是，要再讓開發時間拉長？拿掉原本規劃的功能，會不會就算如期達到了，但網頁卻沒辦法呈現原本設計的樣貌？

在我決定回到hugo來重構網站後。

讓我很意外的是，很多我在Nuxt.js卡關很久的問題，到Hugo這居然變得如此的簡單，Nuxt.js使用的旋轉木馬套件，我不知道怎麼在Hugo使用，起初還很擔心這個會卡很久。

在用Nuxt.js卡了3個月的Carousel 旋轉木馬，Hugo有提供一個內建可客製化的旋轉木馬套件，我一個下午就做好了。

很多我起初在擔心，且開發很久的功能，在Hugo中，瞬間沒什麼問題。

當然，因為我內心已經覺得我在09/11就把網站開發好了，現在已經漸漸的沒耐心，所以只要一遇到任何錯或做不出來，我就會開始想要妥協

• 像是放棄該功能
• 更改那個功能

為了想要快速達標，趕緊上線，我會開始想要捨去跟忽略很多事，我變得很沒耐心。

然後，當然也是有卡一些技術關，所以也開始思考要不要把開發時間拉長，可是主要原因是，我後面還有其他學習計畫要進行，如果拉長開發時間，勢必會卡到後面的學習計畫進度。

我實在沒有辦法，眼前這件事還沒解決，然後就去開啟別的計畫。

耐心仍然是很重要的，著名人士GaryVee常常提倡最重要的元素就是耐心。

這幾天我剛好也在思考一些事。

因為，我確實這幾週也在工作上發生了一些讓我很反省的事情，雖然我的同事們應該都沒怎麼察覺，但我的內心其實有很大的變化。

過去這半年我無論在個人網頁開發還是在工作上，我都特別特別的注重 執行 跟 達標，還有 效率 問題，彷彿我這三個都做得很好的話，我就是一個很強的人，很優秀的人。

而且我還很注重完美，有點試圖把自己的MBTI掰成ENTJ，這讓我在過去這段時光，漸漸的失去了自己的形狀，而且得失心跟比較心變得非常大，只要一沒有達成自己內心的完美標準或覺得自己的效率不高，內心就開始不穩定。

這兩天我開始在想，我好像特別在意這種 世俗 的成功，而忽略了背後那個核心價值跟深層含義。

為了達標！為了有效率，取得別人的稱讚跟讚賞…

我為了把這個網站快速地送上線，我曾經想過要犧牲我當初設計這個網站的某些功能，那些功能確實有他的背後含義。

如果我只是為了做一個網站，那可以很簡單抄一抄了事，做一個精美的Navbar跟沒感情的Header？

但這是我要的嗎？

這個網站，有他的核心價值跟很深層的含義，他有靈魂，每個功能，每個設計的小巧思都環環相扣那個最深層的核心，就是我希望這個網站能夠呈現的樣子。

(我很抱歉，我沒辦法用更精準的字去描述，因為我這幾天才慢慢地去思考這件事)

但我希望透過著經驗，無論在個人網頁開發還是工作上的經驗，我希望自己接下來能夠轉一個念。

世俗的成功，你要完成一件事有很多種方法，但我更希望的事，可以在做這些事的過程中，多點時間去創造去挖掘去探索背後深層的含義。

時間一分一秒的在過，你要讓他被無聊跟無趣佔據，只為了後續短暫的自由時間，還是想辦法去探索跟挖掘意義，讓每一分每一秒都過的很有價值。

我不希望自己因為急躁或者為了時間內達標，然後我就把當初很精心規劃的設計破壞掉。

我懂身為一個ENTP人，網路上常常說執行力很低，但我周圍的人都說我的執行力其實非常高，高到快把自己給逼死。因為有這個說法，所以我一直覺得我要變成一個執行力高的人！

執行力很重要，效率確實也重要沒錯。

可是當一件事，一個產品，一個專案，他沒有深層的核心價值，只是一昧地達成目標，做出來，他同時也會衰弱的很快，失去靈魂或者背後深層含義的時候，不管是創作或藝術，還是去做一件事，我想都會很快地凋零或不想再繼續下去。

要好好看文件跟探討每行程式背後的邏輯

急躁後，我還是回頭犯了很多Junior工程師的錯誤(但我現在其實還是算Junior呀XD)，就是直接複製程式碼，貼上然後發現錯了爆了，然後因為急躁的關係，不去了解背後的功能跟邏輯，開始亂貼亂改XD。

但往往真的只是一些很簡單的語法問題，就讓自己在那邊鬼打牆一陣子。

在這個過程中，很喜歡我同事 Gem 說的話:

有的時候，並不是沒支援這個功能或設定，只是你沒有去仔細翻文件。

靜下心來，回頭去翻文件跟程式原始碼之後，很多因為急躁而亂卡的大小事，都迎刃而解。(當然 Nuxt.js SEO的問題我暫時還是無解(燦笑))

最後

很幸運的，我在這週週末的尾巴，我順利把網站用Hugo重構好了，也順利上線了，雖然我知道後續還是會需要一點點時間去修改一些小問題，但我內心巨大的石頭已經放下了，接下來的時間，直到重啟下個計畫前，好好的反省吧！

再麻煩大家好好享受我的網站:), 有任何問題，項是哪個按鈕壞了還是網頁掛了，麻煩寫信或留言跟我說一下哈哈！

接下來的幾週時間，我會慢慢的撰寫跟分享一些在這開發過程的技術問題跟解決方法，有空還會介紹一下這個網站的每個設計小巧思。

感謝你的觀看 :)