#Site-Building

為部落格文章加一顆「貼給 AI 整理」按鈕，點一下就複製包好的 Prompt。記錄為什麼不叫「AI 幫我整理」、視覺動效怎麼收斂，以及 Prompt 裡行銷與引用署名的界線。

記錄 Codex Project 如何以 RSS 標題與描述生成封面：先完成 10 張試稿，再用近 115 分鐘生成 113 張；檢查中央 70% 的 4:3 安全區後，由 Claude 工程端輸出 1.91:1 OG 圖與 4:3 縮圖，只在 OG 圖燒入浮水印。

ASCII Sharks 是用 Canvas 畫鯊魚與魚群的互動動畫。我把它整合進 Astro 部落格首頁，記錄從 hero 橫幅改成整頁背景、毛玻璃、手機載入與八種鯊魚取捨的過程。原始 renderer 固定黑底，讓 light mode 面板變灰；最後用 CSS 反轉並關掉格線，留下適合閱讀的首頁背景。

受到 HEART 政策島啟發，我用 Three.js 把部落格系列做成可探索的漂浮島群。本文從 1.0 的效能與操作體驗測試寫起，記錄角色轉用 2.5D Sprite、宇宙視覺設計、主題地標和道具，以及生成島與 agent 派工場景的開發過程。

Astro 文章原本用 remark-directive 解析 :::info 提示框。本文記錄如何改成 GitHub Alerts 的 Markdown blockquote，移除舊語法依賴，同時保留網站原有樣式。

Cloudflare Diagnostics 顯示網站不支援 Markdown for Agents，但我已有 .md endpoint。本文比較 content negotiation 與獨立 Markdown URL，並記錄如何補上 Agent 讀取文章所需的標題、canonical URL 和摘要。

我替 Blog 加上標題頁內導覽與連結複製：點擊文章內文的 h2 / h3 標題會更新 URL fragment、捲到定位，手機也能直接操作。這個跨裝置設計的靈感，來自我實測 Claude Code 文件的體驗。

Bing Webmaster Tools 報首頁 title 太短，Google 仍顯示網域與舊摘要。我釐清 site name、title link、snippet 和首頁 title 的差別，修正 JSON-LD 與 metaTitle，再用 GSC 和 Bing Live URL 驗證，搜尋結果仍待重抓。

Bing Webmaster Tools 的 Site Scan 掃出 1 個 Error 與 218 個 Warning，我用 Astro build 產物驗證 alt、title、500 與 h1，最後把測試文章的排除需求整理成 production 不建置的 draft loader feature。

Bing Webmaster Tools 的 Site Scan 是全站 SEO 健檢工具。我用 jasperhung.dev 實際設定 Website scope、掃描頁數與通知選項，也記下靜態 Astro 網站要先檢查 Cloudflare bot 防護的原因。

Bing Webmaster Tools 的 IndexNow 沒看到新 URL，我先確認是否需要設定 API key，再追查 Cloudflare Crawler Hints，開啟後檢查 HTML 發現是 DYNAMIC，最後用 Cache Rule 讓文章頁具備快取資格。

Google 搜尋結果中的 favicon 出現白色外圈，我查了官方規格與平台圖示的 mask 行為，再把它改成圓形並重新產生 ICO 與 PNG；這是針對搜尋結果的實測選擇，不是 favicon 的通用規則，最終效果仍待 Google 重新抓取。

我為了檢查 AEO 測試 blog，卻在 Google PageSpeed Insights 找到值得修的效能問題：移除不必要的 Google Fonts、把 CSS inline 到靜態 HTML，讓 FCP 從 2.6 秒降到 1.7 秒，縮短 0.9 秒，Performance 從 84 提升到 95。

釐清 Google Search Console 的 redirect 報表、HTTP→HTTPS 導向，以及 Cloudflare 與 GitHub Pages 之間的兩段 TLS 驗證。

昨天插圖才發現 Astro blog 沒有內建圖片燈箱。我從候選套件、GitHub stars 與官網 demo 開始比較，最後選了支援手指縮放的方案，並把圖片說明文字整理成可維護的 figure/figcaption 結構。

Blog 的 layout 從開始就決定了：跟 Claude、ChatGPT、Cursor 長一樣。不是巧合，是刻意的——既然內容是 AI cowork 記錄，形式本身就應該呼應這件事。

LINE 分享截圖有圖才驚覺 OG image 必做。從規格研究、設計工具、safe zone 思路，到 Canvas API 踩的三個坑——build-time 自動生成的完整過程。

搭建個人識別系統，從 favicon 延伸 AuthorCard 再到 About 頁。AI 生成圖選圖、About 文案怎麼寫，還有 iOS Safari 的 100dvh bug 一次說完。

Markdown 插圖的兩個痛點：1. 路徑太長：用資料夾結構 + 相對路徑解決管理；2. 體積太重：用 macOS 內建 sips 解決壓縮，一行指令壓掉 90%，不用裝任何東西。

Dark Mode 切好了，但 code block 還是黑的。從 CSS class-based 架構、防閃爍 FOUC，到換掉手刻 code block——讓整個 blog 讀起來真正舒服。

寫了文章沒人看等於白做。RSS 讓讀者訂閱、GSC 送給 Google 索引、AEO 讓 AI crawler 讀懂你——三種設定，一次說清楚。

從框架選擇表到孤島架構、Vue 式語法、CSS scoping，一篇說清楚我為什麼不選 Next.js 的文章。

從 GitHub Pages 出發到個人品牌 domain 架設過程，還有那些走過才會遇到的坑。