開站首波
2021-03-07 · 4 min read
前言
剛做完這個網站，寫這篇文記錄一下心得，這個網站是大概花了我三個禮拜的時間處理，實際時間大概是 2021/02/14 到 2021/03/07。
最開始是從 2021 的農曆春節開始學習 Gatsby 和 GraphQL，之後再從 Gatsby Advanced Starter 的基礎模板開始刻，到了今天 2021/03/07 算是處理完自己覺得最必要的內容了。
關於製作個人網站
我自己喜歡做個人網站放自己的東西，從 2019 年到現在 2021 年已經做了三個網站，基本上是一年做一個版本了，以下呈列三個版本的網址：
再來闡述一下三個網站的想法：
Version 1
當時是想申請學校但本身實在沒啥相關作品，所以自己在 hahow 上買了課程學 HTML/CSS 後做了這個網站。那個課程裡面有教使用 jQuery plugin，所以在 JavaScript 都不會用的情況下，就直接用一些 jQuery 套件來達到一些網頁效果。
現在回頭看覺得有夠陽春有夠恥，甚至有點想把它關掉，不過聽股癌和台通講他們現在也很想回去把一開始做的內容刪掉但也沒刪，人家有幾萬聽眾檢視了都沒刪，我好像也不用太在意自己的個人網站黑歷史了，而且說不定過幾年後看現在這個最新的網站也會覺得恥。
Version 2
2020 開始學網頁前端開發，在年底開始求職前用 Gatsby 和一個名為 Reflex 的框架做了這個第二版，當時其實對 Gatsby 和 GraphQL 都不了解，完全仰賴 Reflex 這框架達到許多功能，會說它是框架是因為它把所有東西都包裝過了，使用者可以用包過的 component 輕鬆做到規劃排版還有 RWD 等，甚至很多常見的 component 例如 Header, Footer 和 Card 等等都直接給範例供人複製，有興趣可以看 Documentation。
得益於框架也受制於框架，很多內容我不能自由地加入，甚至我不能用原生的 HTML tag 加內容，而必須要用他包裝過的 component 來寫網頁，導致我搞不清楚怎麼加入它官方文件沒有寫的功能，所以沒多久我就認定這個網站要作廢了。
有趣的是 Reflex 官方沒多久後出了新版的內容，舊的內容也被列為 Legacy，好險我沒陷入太深啊...
Version 3（這個網站）
如前面所說，我在農曆春節時開始學習 Gatsby 和 GraphQL，參考教材有
- Andrew Mead 的影片 The Great Gatsby Bootcamp
- 雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js :: 第 12 屆 iT 邦幫忙鐵人賽
- PWA, Severless, GraphQL 實作 :: 2019 iT 邦幫忙鐵人賽
- Gatsby 官方文件
其中有跟著做並全部看完的就是 Andrew Mead 的影片，我以前買過他在 Udemy 上的 React 課程，這個 Gatsby 課程是他放在 Youtube 免費給人看的，非常推薦像我一樣的菜雞觀看！當然如果沒有時間的話，iT 邦幫忙鐵人賽的文章也非常值得看！
看完教學之後利用 Gatsby Advanced Starter 這個 Starter 開始製作，中間也是一堆處理一堆眉眉角角，等之後想到再來寫怎麼處理吧。
如果懶得自己刻，歡迎 fork 我的 repo，請幫忙給星星。
後記
關於 Gatsby Advanced Starter 的內容我也還沒完全搞懂，而這個網站也還有很多東西我想加的，等待處理的內容我寫在 repo 的 readme 上，說不定過陣子再來看這網站又長得不一樣了。