今年的鐵人賽前半會來分享個人目前的前端 React 專案基礎建設!從零開始到完成檔案打包,中間包含「沒想到其實可以寫這麼少」的 webpack 設定。從此告別 create-react-app 模板 (≖ᴗ≖๑)
後半會來聊聊(八月底剛發布 3.0,但今年的文章還是以 2.0 為主,因為 breaking change 拿掉了我常用功能,只好強製鎖版直到鐵人賽結束的) astro。預計介紹基本操作方式,以及個人是如何透過 astro 把自家技術部落格翻修到 2.0 版本。
有興趣的朋友歡迎訂閱,感謝看到這裡的你 (。・ω・。)
已知 astro 提供兩種設定樣式的方式: 以較傳統的方式將樣式收納在 .css 檔案中,每個 .astro 元件再根據需求各自引用 將樣式直接寫在每個 .a...
給還不熟 css @container 讀者的懶人包:在過去,前端時常透過 @media screen and (min-width: 900px) 來根據螢幕...
對於一個部落格來說,大部分的畫面都能共同一套 html metadata。這時除了在多個檔案間複製貼上以外,更便於維護的做法是把內容集中到一個 layout 元...
普通讀者 2.0 全文章歸檔頁的設計非常陽春單純。目前仗著文章還未爆量,在把文章根據年份分類後就全部灑到畫面上。而又因為我們在第 20 天就處理好「排序後的全文...
你的部落格現在有個不錯的門面、幾篇內容豐富的文章、還有一個 /archive 頁列出所有你發布過的內容。你感覺現在還可以新增一個畫面 /tag,這個畫面會列出你...
你的 astro 部落格沒什麼大問題,真要說的話,就是每當你要新建立一篇文章時,都是隨機挑選一份既有的 .md 檔,然後複製貼上它、修改內容。這麼純手工實在太不...
到目前為止,整個 astro 專案都只是在本地的伺服器上運行而已。而今天要來分享的內容即是:如何將 astro 專案發佈到為 GitHub Pages。有兩種方...
為了確保被 Google 爬取內容、納入搜尋結果的機會,通常會建議開發者提供網站 sitemap。這個檔案的目的即是提供(搜尋引擎)爬蟲一份地圖,讓爬蟲得知該網...
有時候,你可能會想要知道讀者來到你的技術部落格之後到底都看了哪些內容、或是他其實只是來了又走。如果想知道這類比較具體的行為數據(相較於 Google Searc...