brownlu@blog:~/$
_ _ | |__ _ __ _____ ___ __ | |_ _ | '_ \| '__/ _ \ \ /\ / / '_ \| | | | | | |_) | | | (_) \ V V /| | | | | |_| | |_.__/|_| \___/ \_/\_/ |_| |_|_|\__,_|
guest @ brownlu-blog ~ /blog/astro-intro $
[guest@brownlu-blog] ~ $ cat astro-intro.md

Astro 入门:从零搭建静态博客

学习如何使用 Astro 框架快速构建一个现代化的静态博客网站
📖 2 min read · 447 chars · 2026-04-30

什么是 Astro?

Astro 是一个现代化的静态站点生成器,以 零 JS 默认岛屿架构 著称。

快速开始

npm create astro@latest my-blog
cd my-blog
npm run dev

核心概念

  • .astro 组件 — 类似 HTML 模板,支持前端组件语法
  • Content Collections — 结构化内容管理,自动类型推断
  • 岛屿架构 — 只给需要交互的部分加载 JS

为什么选择 Astro?

  1. 默认输出静态 HTML,加载飞快
  2. Markdown/MDX 一等支持,写博客很舒服
  3. 集成丰富(RSS、Sitemap、图片优化等)

下一篇我会分享更多实战经验。

tags: astrotutorialfrontend
← back to /blog | ↓ download .md
[x]