懂杯帝 Blog【非教育业相关内容】
切换菜单
Astro 开发建议

Astro 开发建议

用 Astro 搭个人博客(而且你经常写代码分享、要画流程图)挺合适的。下面是我建议你在架构选型、内容格式、代码展示、流程图、构建发布、SEO/性能这些点上提前踩稳的“注意事项清单”。

1. 内容组织:别把博客写成一堆 Markdown 文件

你是分享型内容,后期一定会需要:系列、标签、难度、更新时间、目录、示例仓库链接。 建议从 Day 1 就用 Content Collections(Astro 原生)+ 统一 frontmatter:

title / description / pubDate / updatedDate
tags / series / level / draft
toc: true/false
repo / demo / codesandbox(可选)
lang(中英混写时很有用)

这样后面做「系列页」「标签页」「最近更新」不会重构内容结构。

2. 代码分享体验:代码块要“像文档站”而不是“像博客”

重点关注这些能力(很多读者会把你博客当 reference):

  • 代码块复制按钮
  • 行高亮 / 行号
  • 文件名标签(例如 index.ts)
  • 多标签代码组(JS/TS、pnpm/npm、Linux/macOS)
  • 长代码折叠(避免滚动地狱)
  • 代码块里支持 diff 展示(分享很加分)
  • Astro 里通常用 Shiki(内置/生态)能做得很好,但要注意:
  • 主题要浅色/深色都可读
  • 代码块不要把页面 CLS 搞大(尽量静态高亮、少运行时)

3. 流程图/时序图:优先“可版本管理 + 可渲染稳定”的方案

你会用很多图,建议不要依赖“截图贴图”那种不可维护方式。 常见路线:

A. Mermaid(最推荐起步)

适合:流程图、时序图、状态图、ER 等 注意点:

  • SSR/SSG 渲染方式要选好:
  • 构建期渲染(稳定、SEO 友好) vs 客户端渲染(简单但可能闪烁)
  • Mermaid 版本升级可能导致语法差异:锁版本
  • 深色模式样式要处理(主题变量)

B. PlantUML(更“工程化”)

适合:复杂 UML、团队规范一致 注意点:

需要服务端渲染或构建管线(比如 Docker/CI)

本地预览、发布要一致

C. Excalidraw(适合“讲解型示意图”)

注意点:

  • 最好保存 .excalidraw 源文件到 repo,导出 SVG/PNG 用于页面
  • SVG 要处理好宽高与暗色模式(必要时用 PNG)
  • 我个人建议:Mermaid + Excalidraw 组合就够你写很久了。

4. 分享文章结构:你会反复复用,建议做成“组件化写作”

Astro 允许你在 MDX/Markdown 里用组件,建议做几个常用组件:

<Callout type="info|warn|tip">...</Callout>
<Steps> / <Step>(分步分享)
<Tabs>(多方案对比:npm/pnpm、JS/TS)
<FileTree>(目录结构)
<Aside>(补充说明)
<Quiz>(可选,读者互动)

这样写分享会非常快,也更一致。

5. 图片与资源:注意性能和维护

分享站图片很容易失控:

  • 尽量用 SVG(流程图/结构图首选)
  • 位图用 webp/avif,并控制宽度
  • 图片要有 alt,对 SEO/可访问性很重要
  • 统一一个 /assets/{post-slug}/ 规则,避免根目录杂乱

6. SEO:分享博客最容易忽略但最值钱

必须做:

  • canonical(避免多路径重复)
  • OpenGraph / Twitter Card
  • sitemap.xml / rss.xml
  • 文章 updatedDate 展示与结构化数据(可选但加分)

代码分享建议加:

  • 清晰的 H2/H3 层级
  • 自动目录 TOC
  • “前置知识/你将学到什么/常见坑/延伸阅读”

7. 评论、搜索、统计:别一上来就做大,但要留接口

  • 搜索:分享多了你一定需要
  • 小站:本地索引(构建期生成 JSON)就够
  • 内容很多:Algolia/Meilisearch 再上
  • 评论:Giscus 很常见(GitHub Discussions)
  • 统计:尽量选轻量、隐私友好(不然拖性能)
  • 关键点:把这些当可插拔模块,避免绑死。

8. 部署与预览:写分享的人一定需要“草稿预览”

建议你从 Day 1 做:

draft: true 不进生产构建

PR Preview(Vercel/Netlify 都支持)

文章内代码示例仓库:用 CI 保证链接不挂(至少定期检查)

9. 版本与依赖:分享作者最怕“几年后文章跑不起来”

  • 你写“代码分享”会遇到读者复现问题,所以建议:
  • 每篇分享注明:Node 版本、包管理器、关键依赖版本
  • 重要分享配一个可运行 repo / tag
  • 文章里命令尽量给 pnpm/npm 两套(或至少说明你选的)

10. 选型建议(给你一个稳妥的起步组合)

如果你想快速起步又不后悔,我建议:
  • Astro + Content Collections
  • Markdown/MDX(分享型更适合 MDX 组件化)
  • Shiki(代码高亮)+ 复制按钮
  • Mermaid(构建期或稳定的渲染方案)+ Excalidraw(示意图)
  • RSS + Sitemap + OG

部署:Vercel / Netlify 任一 + PR Preview

如果你愿意,我可以按你的偏好给一套“开箱即用”的目录结构和配置建议。你更倾向:

纯 Markdown 还是 MDX(能用组件)?

你会用 React/Vue 组件 还是尽量保持无框架?

部署打算用 Vercel / Netlify / GitHub Pages 哪个?