2026-04-02

使用Astro和Tailwind CSS打造一頁式網站

去年使用Mozilla Solo打造一頁式網站，當初覺得很有趣，當測試用網站，那時間點運氣好也撿到一個符合主題的網域，所以決定拿來當養網域的網站😆。長期下來快一年的時間，突然想到要是Mozilla Solo收掉怎麼辦？找過多種備案，例如：

全部都不甚滿意，尤其是免費架站平台，想要免費、自訂網域、允許程式碼不受框架限制，根本就沒有（突然發現Mozilla Solo免費帳號很大方）。而自架方案，想要從現有網站框架裡找類似的一頁式主題，改成自己要的主題，都覺得很難改。

因為另一個《台股法人買賣超整理》網站是用Astro做的，問了AI之後，也決定用Astro和Tailwind CSS來開發，加上都是請AI去做，所以很快就完成了。

以下是主要的開發步驟：

主題內容：我是複製目前託管在Mozilla Solo的網站主題。
網站框架：我只選用Astro，AI建議用Astro和Tailwind CSS。
網站生成：網站架構、程式碼都是由AI產生，先產生基本框架、資料夾、檔案和路徑。
前置作業：自己要先將圖檔轉檔（大圖降解析度）、建立JSON檔案和Markdown檔案等等，準備好後放到對應的路徑資料夾，這些都是之後模板要引用的資料。
開發過程：因為Astro開發像堆積木般的方式的體驗，每個模組元件都高度分離，所以從上（Header）到下（Footer）一個一個區塊去開發，再拼湊起來。其中Gallery的燈箱效果原本是用輕量級的GLightbox，但是它沒有計數器和手機版的左右箭頭，用JS額外載入的話會變成無法即時同步顯示（零點幾秒的時間差），試了非常多次都不能改到很滿意，最後改用Fancybox v5解決（v4開始不需要jQuery），因為它本身功能就已經包很多。
調整版型：等每個區塊都拼湊完成後，大致上算是開發告一段落，剩下工作就是微調模板的細節，以符合自己的需求。
擴充功能：Astro框架非常靈活，之後想要做新的頁面或部落格都不是問題。