核心内容摘要
17.C-起草网：点亮您的灵感，勾勒无限可能
轻量、极速、现代的静态网站生成框架。
一文带你从安装到实战彻底掌握 Astro。
Astro 是什么Astro是一个现代的前端框架用来构建静态网站和内容驱动的项目如博客、文档站、作品集等。
它最大的特点是零 JavaScript by default默认不加载前端 JS。
⚡️极快的加载速度只渲染必要的部分。
支持多框架组件混用可以在同一个项目中使用 React、Vue、Svelte、Solid 等。
内置 Markdown / MDX 支持。
SEO 友好生成纯静态 HTML。
一句话
总结Astro Markdown 组件化 极快静态网站生成。
安装与项目初始化
环境要求Node.js ≥ 18npm、pnpm 或 yarn 均可推荐使用 pnpmnpminstall-gpnpm
创建项目运行命令pnpmcreate astrolatest选择✔ Where should we create your new project?(你想创建的项目名)› my-astro-blog ✔ How would you like to start your new project?(使用哪个模板)› Blog ✔ Install dependencies?(安装依赖)› Yes ✔ Initialize a newgitrepository?(初始化git仓库)› Yes进入项目目录cdmy-astro-blogpnpmdev浏览器访问http://localhost:4321 你的 Astro 网站已经运行起来了项目结构Astro 默认目录结构如下my-astro-blog/├──public/# 静态资源图片、字体等 ├── src/│ ├── components/# 组件目录 │ ├── layouts/# 布局组件 │ ├── pages/# 页面目录(对应路由)│ ├── content/# Markdown 内容目录 │ └── styles/# 样式文件 ├── astro.config.mjs # Astro 配置文件 ├── package.json └── tsconfig.jsonAstro 基础语法Astro 文件的后缀名是.astro它既可以写 HTML也能嵌入 JS 逻辑。
文件结构一个.astro文件分为两部分--- const title Hello Astro! ---htmlheadtitle{title}/title/headbodyh1{title}/h1/body/html---之间是前端脚本区Astro Script Block支持 JS/TS。
下方是模板区用于写 HTML可插入{}表达式。
模板语法--- const items [Coffee, Tea, Juice] ---ul{items.map(item li{item}/li)}/ul使用{}包裹 JS 表达式支持条件、循环、模板插值
组件导入Astro 支持多种组件--- import Header from ../components/Header.astro import Footer from ../components/Footer.astro ---Header/mainh1Welcome!/h1/mainFooter/也可以混用 React、Vue 等框架的组件--- import Counter from ../components/Counter.jsx ---Counterclient:load/这里的client:load指定在浏览器端渲染组件。
Astro 提供多种渲染策略指令说明client:load页面加载后执行client:idle页面空闲时执行client:visible滚动到可视区域后加载client:onlyreact仅客户端渲染 React 组件
布局组件LayoutAstro 的布局非常直观。
创建一个src/layouts/BaseLayout.astro--- const { title } Astro.props ---htmlheadmetacharsetUTF-8/title{title}/title/headbodyheader Dawn Café/headerslot/footer© 2025 LeiHou/footer/body/html页面中使用--- import BaseLayout from ../layouts/BaseLayout.astro ---BaseLayouttitleAbout Ush1关于我们/h1p这里是Dawn Café的故事.../p/BaseLayout使用 Markdown 创建博客内容Astro 内置 Markdown 支持你只需要在src/content/blog/下新建.md文件。
示例文章src/content/blog/first-post.md--- title: 我的
Astro博客 pubDate:
description: 学习Astro框架从安装到搭建博客 author: 雷猴世界 --- 欢迎来到我的
Astro博客 这是一个超快、现代、静态的博客框架。
创建博客列表页面src/pages/blog.astro --- import BaseLayout from ../layouts/BaseLayout.astro import { getCollection } from astro:content const posts await getCollection(blog) ---BaseLayouttitle博客列表h1 博客列表/h1ul{posts.map(post (liahref{/blog/${post.slug}/}{post.data.title}/asmall{post.data.pubDate}/small/li))}/ul/BaseLayoutAstro 会自动根据 Markdown 文件生成静态路径。
访问/blog即可看到博客列表。
单篇文章模板src/pages/blog/[slug].astro --- import BaseLayout from ../../layouts/BaseLayout.astro import { getCollection } from astro:content const posts await getCollection(blog) const post posts.find(p p.slug Astro.params.slug) ---BaseLayouttitle{post.data.title}articleh1{post.data.title}/h1p{post.data.description}/ppost.Content//article/BaseLayout部署与优化
构建pnpm build生成的静态文件在dist/目录。
预览pnpm preview
部署到 Netlify / Vercel直接推送到 GitHub然后在 Vercel 或 Netlify 上导入仓库即可自动部署。
Astro 官方推荐 Vercel。
具体的操作步骤放在下一篇文章讲解 官方文档https://docs.astro.build 社区https://astro.build/blogAstro 可快速构建 SEO 友好的静态网站还支持多框架组件混用落地时要考虑部署、组件复用的工程效率问题。
试试RollCode 低代码平台轻松实现私有化部署、自定义组件、静态页面发布SSG SEO。