結語 本系列 Astro 文章終於完結了，必須說連續 30 天到了後段有點寫不太出來任何東西，秉持著有寫任何東西無論如何都比沒寫強的精神完成了這次的挑戰！ 本...
終於到第 29 天了……前面寫太多沒有規劃好反而到後面也不知道要多寫什麼。 其實在撰寫這 30 天文章之前我有先試寫紀錄一下我用 Astro 製作個人網站的過...
前言 感覺 30 天真的要寫不下去了 😅，感覺要寫的前面都寫過了，今天這一篇來介紹 Astro 有那些資源可以入門以及近期的新聞。 學習資源 其實 Astr...
前言 本章節來談談 Astro 3.0 版本最吸睛的一項功能：View Transitions ，讓你的靜態網頁也能達成 App 應用一樣的絲滑感受。 由於這...
前言 很多時候建構網站都太著重在技術層面該如何應對，但要怎麼經營自己的網站或產品好像卻沒什麼概念，因此這裡添加一下我建構網站的歷程與收穫。（主要是近期工作忙到...
前言 在 Astro 中串接 CMS 是一件非常容易的事情，可以到官方文件查看各種 CMS 的傳接方式。 什麼是 CMS？Headless CMS？ 內容管理...
前言 我喜歡使用自動化的工具來為專案的代碼提供錯誤檢查與整理，因此使用 ESLint 與 Prettier 讓撰寫的代碼更一致無錯，還有額外添加 TypeSc...
前言 在撰寫引入路徑時會發現撰寫相對位置的路徑既又繁瑣又難維護，可以透過額外設置路徑別名來解決這個問題。 為什麼需要路徑別名（Aliases） 當網站規模愈複...
前言 本章節來介紹環境變數在 Astro 當中，並且可以如何運用它。 為什麼需要環境變數？ 在真實世界中會需要面臨不同的開發環境，像是：開發、生產……等階段，...
前言 到這個章節介紹了絕大多數會使用到的 Astro 功能，後續的章節會著重在講解一些額外的環境設置。讓我們把製作好的網站放到伺服器上可以被其他人造訪吧。 S...
前言 前面透過建立靜態端點實作了自己的 RSS Feed 算是一個簡單的練習起步，這次更進一步透過建立整個集合的資料來完成「集合文章搜尋功能」。 定義問題 隨...
前言 前面章節我們學會了如何使用 Markdown 或 MDX 、在內容集合中定義資料格式與索取資料。本章節將解釋如何在 Astro 中創造端點提供不同種類的...
前言 前面學習了內容集合與頁籤的製作，今天的主題練習透過整理集合抓取到的資料更進一步製作分類功能頁面。 定義問題 隨著內容集合發布的文章越來越多，裡面可能會有...
前言 透過內容集合動態的生成 Route 是件方便美好的事情，但一旦數量一多就必須要想辦法分批次顯示這些資料，恰好 Astro 內建頁籤可以幫助我們打造這方面...
前言 除了定義資料在元件中、在 src 中 import 進來或者是 fetch 遠端資料之外有其他撰寫內容的方式嗎？有的！ 什麼是內容集合 Content...
前言 先前了解了如何使用 Markdown 與 MDX 來撰寫網頁，接著這個章節將會學習到如何替這些檔案設置畫面布局 (Layout)。 什麼是布局 前面提到...
前言 通常文件會伴隨著圖片，而圖片可以佔據一個頁面絕大多數的運算資源與流量！你會希望圖片能夠被好好處理避免它們壓垮整個網站的體驗，Astro 預設自帶相關的元...
前言 前面介紹了元件與路由，相信製作靜態為主的網站已經難不倒你，甚至還可以發揮 Astro 最強大的優勢，透過選擇性 Hydration 添加些動態內容到頁面...
前言 在上一章節介紹了基礎元件的使用，並且你也大概猜到了，只要元件放置在 src/pages/ 之內就會自動的成為 Astro 的頁面，在本章節會更細緻的介紹...
Astro 的特點之一，就是可以使用各家框架的元件，像是 React, Vue, Svelte 等，能夠將不同來源的元件拼合到一頁上，在 Monorepo 的架...
Astro 最近更新了 3.0 版本，來加到這個玩具箱裡試試看吧。 目前 NX 沒有官方支援的 Astro 擴充，雖然有社群版本的但還沒升級到 Astro 3....
前言 前面章節了解到在 Astro 中引用不同框架的元件是極其容易的事情，但這些元件中的狀態要怎麼去管理呢？讓我們進入全域狀態管理的世界。 在不同組件之間傳遞...
前言 前面提到如何在 .astro 格式中添加客戶端 JavaScript 使元件具備互動性。Astro 最吸引人的一項特點就是可以整合各大 UI 框架到元件...
前言 到目前為止還沒有接觸到如何在元件中執行客戶端 JavaScript，在本章節將會介紹「本地腳本」與「外部腳本」兩種方法。通常操縱 DOM 的行為都會放在...
前言 Tailwind 是一款 CSS 框架與學習 Astro 並無絕對關係，但基於它的社群熱門程度與可以快速靈活導入樣式的特性，何不來嘗試運用看看呢？嘗試導...
前言 前面學習了如何撰寫元件並添加樣式，具備了基礎撰寫元件的能力，接下來兩個章節都會打鐵趁熱來製作一個實際且極具代表性的元件 —— 「按鈕」。 定義問題 網站...
前言 前面提到撰寫 Astro 元件所需要知道的基本知識，在本章節將會更進一步說明如何為元件撰寫添加樣式。 樣式在 Astro 在 Astro 中撰寫樣式是一...
前言 前面除了創建新專案之外也了解了 Astro CLI 與設定檔的大致樣貌，本章節會從創建基本 Astro 元件開始，元件可以被放置在先前提到的 src...
前言 前面提到 Astro 是如何建構頁面的，像是將網頁拆分成「元件」以及透過 Astro Island 的方式來建構網頁，接著本章節就要來實際創建一個 As...
前言 前面提到 Astro 是一個以「靜態內容為主軸」的框架，並且讓 JavaScript 只在必要時被運輸執行，這麼說還是有點攏統，要了解 Astro 的優...
網頁東東
Jasper
iThome鐵人賽
看影片追技術