iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

捨棄 create-react-app 之餘還架了個 astro blog 昭告天下 系列

今年的鐵人賽前半會來分享個人目前的前端 React 專案基礎建設!從零開始到完成檔案打包,中間包含「沒想到其實可以寫這麼少」的 webpack 設定。從此告別 create-react-app 模板 (≖ᴗ≖๑)

後半會來聊聊(八月底剛發布 3.0,但今年的文章還是以 2.0 為主,因為 breaking change 拿掉了我常用功能,只好強製鎖版直到鐵人賽結束的) astro。預計介紹基本操作方式,以及個人是如何透過 astro 把自家技術部落格翻修到 2.0 版本。

有興趣的朋友歡迎訂閱,感謝看到這裡的你 (。・ω・。)

鐵人鍊成 | 共 30 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 21

樣式管理與文章 toc

已知 astro 提供兩種設定樣式的方式: 以較傳統的方式將樣式收納在 .css 檔案中,每個 .astro 元件再根據需求各自引用 將樣式直接寫在每個 .a...

2023-10-06 ‧ 由 查理狐狐 分享
DAY 22

處理首頁樣式

給還不熟 css @container 讀者的懶人包:在過去,前端時常透過 @media screen and (min-width: 900px) 來根據螢幕...

2023-10-07 ‧ 由 查理狐狐 分享
DAY 23

通用元件 Html.astro

對於一個部落格來說,大部分的畫面都能共同一套 html metadata。這時除了在多個檔案間複製貼上以外,更便於維護的做法是把內容集中到一個 layout 元...

2023-10-08 ‧ 由 查理狐狐 分享
DAY 24

靜態路由與 /archive

普通讀者 2.0 全文章歸檔頁的設計非常陽春單純。目前仗著文章還未爆量,在把文章根據年份分類後就全部灑到畫面上。而又因為我們在第 20 天就處理好「排序後的全文...

2023-10-09 ‧ 由 查理狐狐 分享
DAY 25

動態路由與 /tag

你的部落格現在有個不錯的門面、幾篇內容豐富的文章、還有一個 /archive 頁列出所有你發布過的內容。你感覺現在還可以新增一個畫面 /tag,這個畫面會列出你...

2023-10-10 ‧ 由 查理狐狐 分享
DAY 26

腳本

你的 astro 部落格沒什麼大問題,真要說的話,就是每當你要新建立一篇文章時,都是隨機挑選一份既有的 .md 檔,然後複製貼上它、修改內容。這麼純手工實在太不...

2023-10-11 ‧ 由 查理狐狐 分享
DAY 27

部署

到目前為止,整個 astro 專案都只是在本地的伺服器上運行而已。而今天要來分享的內容即是:如何將 astro 專案發佈到為 GitHub Pages。有兩種方...

2023-10-12 ‧ 由 查理狐狐 分享
DAY 28

設定 sitemap 與 rss

為了確保被 Google 爬取內容、納入搜尋結果的機會,通常會建議開發者提供網站 sitemap。這個檔案的目的即是提供(搜尋引擎)爬蟲一份地圖,讓爬蟲得知該網...

2023-10-13 ‧ 由 查理狐狐 分享
DAY 29

設定 GA4

有時候,你可能會想要知道讀者來到你的技術部落格之後到底都看了哪些內容、或是他其實只是來了又走。如果想知道這類比較具體的行為數據(相較於 Google Searc...

2023-10-14 ‧ 由 查理狐狐 分享
DAY 30

學習資源

今天會來分享一個前端工程師為了跟上技術潮流、進修用,與收集部落格開發靈感用的相關資源。 技術潮流 避免閉門造車,個人目前維持一週至少看一次技術趨勢的習慣。這部分...

2023-10-15 ‧ 由 查理狐狐 分享