用Astro無痛code出自己的部落格網站

前言

身為網頁開發者，總會希望能有一個自己親手 code 的網站放作品集，或是個人部落格可以發些技術心得文（外加無病呻吟）吧？

當初我會開始接觸前端技術，也是因為想建一個自己的部落格。

遙想當年，我還是個程式小白的時候，技術門檻硬生生橫亙在眼前，我只能用 No-code 的方式，開始為自己的網站增磚添瓦。

於是我找上熱門的 WordPress，接著便開始硬著頭皮搞定：網域、主機、DNS 等等一堆陌生的術語，好不容易在 www 有了一個屬於自己的小天地：江森的日常行為研究室。

也因為這個歷程，我開始栽進了前端技術的鑽研。

那既然當初的起心動念是建一個自己的部落格網站，雖然已經有一個 No-code 的成品了，但身為工程師，不發揮一下所學，親手 coding 一個出來，好像說不過去？

於是我就開始查找 code-style 的解決方案。

解決方案探尋

由於那時候我剛學完 React，所以第一個聯想到也許可以試試 Next.js，但研究了一下後發現，這個坑有點大。

再加上當時，我還在進行另一個 project，時間上有點緊迫，所以 Nexy.js 還是先擱著，等到比較有餘裕再來跳這個坑。

第二個發現的選項是 Hexo，稍微嘗試了一下，是使用熟悉 VS Code 以及 Node.js 的指令開始，又有更換主題的自由度，感覺還不賴。

但不出問題就要開始出問題了，敗筆就在這個主題上。

我想更換主題，但是在更換完我想更換主題後，運行專案 CLI 卻開始報錯！

登登！晴天霹靂！好不容易找到一個順眼又有 coding 感的架站方式，但佈景主題換下去，終端機就開始無情地報錯。

我不想放棄自訂主題樣式的自由度，一試再試，也找上 AI 大神求助，這個問題始終沒有解決。我研究了一下 Hexo 的原理發現，若想自己 DIY，這個坑可能不比跳入 Next.js 小。

無奈之下，只好擱置 Hexo，繼續尋覓下一個解決方案。

終於！我發現了 Astro！

Astro 是什麼？

根據官網，Astro 是一個 JavaScript 框架，專為建立快速、內容驅動的網頁優化。

也就是說，如果你是想建立一個以呈現內容為主的網站，例如作品集、部落格等等，Astro 正是為此而生！

剛好這就是我要的。

為什麼選 Astro？

但是其他框架或解決方案也能打造部落格，或是內容為主的網頁，為什麼選用 Astro 呢？

這就要說到 Astro 的特點：

1. Server-First

Astro 透過盡可能地減少不必要的 JavaScript 邏輯，並且在伺服器端渲染完頁面後，再傳送 HTML 檔案到客戶端瀏覽器，藉由降低瀏覽器的負擔來提升網頁的載入效能。

大部分的主流前端框架，像我入坑的第一個框架： React，就是透過向客戶端瀏覽器傳送 JavaScript 來渲染畫面，使得網頁能夠頻繁、流暢地讓使用者操作、互動，就像是原生的 App 一樣。

也就是說，主流的前端框架，都是以實現 Web App 為目的。

但這伴隨而來的缺點就是 JavaScript 變得肥大，瀏覽器的負擔變重，降低網頁載入的效能。

還有就是有 SEO 變差的風險，因為傳送給客戶端的是準備生成 HTML 的 JavaScript 檔案，搜索引擎爬蟲在第一時間爬到的只有空白的文件，這造成 SEO 索引上的困難。

雖然有看到資料提到搜尋引擎有針對這一點做改善，但我們很難了解實際上改善多少，畢竟搜尋演算法是各家搜尋引擎的專利技術，外人不太可能有機會一窺其堂奧。

所以若是重視 SEO 的網站，還是盡可能避免 CSR（客戶端渲染）。

2. Content-Driven

Astro 強調建立以內容為主的網站，雖然不像其他主流的前端框架那樣，重視互動性與Web App的實現。

因為專注在內容的呈現，所以減少了許多複雜的邏輯語法，讓Astro更容易上手，尤其你是從其他主流的前端框架起家的話，來到Astro根本輕鬆愉快。

Astro支援 Markdown 和 MDX來建立內容，你可以在 Astro 專案中撰寫 Markdown 文檔。

Astro 也有提供相關的 API，讓你可以處理建立好的內容文檔，整合相關的內容集合。

像我在撰寫這一篇也是利用 Markdown 完成後，在.astro 的檔案中處理它的樣式以及呈現邏輯。

3. Customizable

最讓我驚豔的還是這一項特點：可客製化。

Astro 支援許多外部工具供你選用，像是CSS 框架：Tailwind CSS，還有前端框架：React、Vue等等。

對你沒看錯！居·然·能·引入其他的框架，而且主流的都有支援（不過，Angular好像除外😅），這對從不同框架起家的前端開發者來說，簡直是福音，你可以把自己熟悉的工具帶到 Astro 來整合、繼續使用。

這點大大提升了 Astro 開發者體驗，降低從0開始摸索新語法的撞牆期。

以上就是 Astro 框架的特色，我也實際運用它解決了自己的問題，就是本站。

所以，接下來我會繼續分享，使用 Astro 實作的心得。

說了這麼多優點，還在等什麼呢？趕快輸入指令：

npm create astro@latest

親身體驗一下 Astro 的魅力吧！

參考資料：

Astro 官網文件： https://docs.astro.build/en/getting-started/

網頁東東-Astro： https://www.webdong.dev/post/categories/Astro/

打造高分作品集網站超簡單：Astro 框架基礎介紹： https://medium.com/@Kelly_CHI/astrojs-new-javascript-framework-for-content-sites-1a802b6638f5