Astro Blog 建站筆記
從買 domain、選 Astro 到 OG image、dark mode、燈箱與效能優化：這個部落格一路蓋起來的實作紀錄。
14 篇文章
文章目錄
-
Astro Markdown 移除 remark-directive 套件，改用 GitHub Alerts
2026年10月17日
Astro 文章原本用 remark-directive 解析 :::info 提示框。本文記錄如何改成 GitHub Alerts 的 Markdown blockquote，移除舊語法依賴，同時保留網站原有樣式。
-
Blog 標題頁內導覽、複製連結，手機也能用：從 Claude Docs 得到靈感
2026年10月17日
我替 Blog 加上標題頁內導覽與連結複製：點擊文章內文的 h2 / h3 標題會更新 URL fragment、捲到定位，手機也能直接操作。這個跨裝置設計的靈感，來自我實測 Claude Code 文件的體驗。
-
Google 搜尋 favicon 白邊：我為什麼改成圓形
2026年10月5日
Google 搜尋結果中的 favicon 出現白色外圈，我查了官方規格與平台圖示的 mask 行為，再把它改成圓形並重新產生 ICO 與 PNG；這是針對搜尋結果的實測選擇，不是 favicon 的通用規則，最終效果仍待 Google 重新抓取。
-
Google PageSpeed Insights：Astro Blog 效能優化，FCP 首次內容出現時間縮短約 35%
2026年8月16日
我為了檢查 AEO 測試 blog，卻在 Google PageSpeed Insights 找到值得修的效能問題：移除不必要的 Google Fonts、把 CSS inline 到靜態 HTML，讓 FCP 從 2.6 秒降到 1.7 秒，縮短 0.9 秒，Performance 從 84 提升到 95。
-
頁面重新導向問題：原來是 HTTP 沒有自動導向 HTTPS
2026年8月1日
釐清 Google Search Console 的 redirect 報表、HTTP→HTTPS 導向，以及 Cloudflare 與 GitHub Pages 之間的兩段 TLS 驗證。
-
Astro Blog 圖片燈箱：從查 lightbox 套件到包成 figure/figcaption
2026年7月14日
昨天插圖才發現 Astro blog 沒有內建圖片燈箱。我從候選套件、GitHub stars 與官網 demo 開始比較，最後選了支援手指縮放的方案，並把圖片說明文字整理成可維護的 figure/figcaption 結構。
-
Blog 設計語言：從 AI Desktop 借來的 Layout
2026年6月22日
Blog 的 layout 從開始就決定了：跟 Claude、ChatGPT、Cursor 長一樣。不是巧合，是刻意的——既然內容是 AI cowork 記錄，形式本身就應該呼應這件事。
-
OG Image：設計思路與 Build-time 生成
2026年6月22日
LINE 分享截圖有圖才驚覺 OG image 必做。從規格研究、設計工具、safe zone 思路，到 Canvas API 踩的三個坑——build-time 自動生成的完整過程。
-
Blog 個人識別層：從 favicon 到 AuthorCard 到 About 頁
2026年6月22日
搭建個人識別系統，從 favicon 延伸 AuthorCard 再到 About 頁。AI 生成圖選圖、About 文案怎麼寫，還有 iOS Safari 的 100dvh bug 一次說完。
-
搞定 Blog 圖片的三件事：管理、引用、壓縮
2026年6月22日
Markdown 插圖的兩個痛點：1. 路徑太長：用資料夾結構 + 相對路徑解決管理；2. 體積太重：用 macOS 內建 sips 解決壓縮，一行指令壓掉 90%，不用裝任何東西。
-
讀起來更舒服：Dark Mode 切完，才發現 Code Block 沒跟上
2026年6月22日
Dark Mode 切好了，但 code block 還是黑的。從 CSS class-based 架構、防閃爍 FOUC，到換掉手刻 code block——讓整個 blog 讀起來真正舒服。
-
Blog 被找到的三種方式：RSS、GSC、AEO
2026年6月22日
寫了文章沒人看等於白做。RSS 讓讀者訂閱、GSC 送給 Google 索引、AEO 讓 AI crawler 讀懂你——三種設定，一次說清楚。
-
為什麼選 Astro 來架 Blog
2026年6月20日
從框架選擇表到孤島架構、Vue 式語法、CSS scoping，一篇說清楚我為什麼不選 Next.js 的文章。
-
買了 domain，才算是認真在做一件事
2026年6月20日
從 GitHub Pages 出發到個人品牌 domain 架設過程，還有那些走過才會遇到的坑。