Astro 入门：10 分钟搭好你的第一个站点

归档26

文章示例14 web11 摘录1

446 字

2 分钟

Astro 入门：10 分钟搭好你的第一个站点

2026-10-28

为什么是 Astro#

Astro 是一个内容优先的静态站点生成器。它的几个特点很适合做技术博客：

默认零 JavaScript，页面加载极快
写文章只用 Markdown，不用碰框架
自带 SEO 支持
想加交互时，再用任意框架的”岛屿”组件

一句话：专心写内容，性能交给 Astro。

项目结构（你主要会碰这几处）#

1
src/
2
├─ content/posts/  ← 你的文章放这里（.md 文件，文件名就是网址）
3
├─ layouts/        ← 页面骨架（页头页脚、SEO）
4
├─ components/     ← 可复用的小组件（如导航栏）
5
├─ pages/          ← 路由（首页、分类页、文章页、关于、联系）
6
├─ lib/categories.ts ← 分类定义（唯一真源，改这里增减分类）
7
public/            ← 图片、字体等静态资源（原样拷贝）

最常用的三条命令#

1
npm install      # 第一次拉依赖
2
npm run dev      # 本地预览，改文件自动刷新（端口 4321）
3
npm run build    # 生成静态站点到 dist/

加一篇新文章只要三步#

在 src/content/posts/ 新建一个 .md 文件（文件名就是网址，用英文或拼音，例如 my-first.md）
顶部写好 frontmatter（标题、描述、日期、分类、标签）
下面直接写 Markdown 正文

1
---
2
title: "我的第一篇"
3
description: "随便写点什么"
4
published: 2026-06-01
5
category: "life"      # 分类 key：web / nas / docker / life
6
tags: ["随笔"]
7
---
8

9
正文从这里开始……

网址是怎么来的（很简单）#

你想去	网址
首页	`/`
网络汇总页	`/web/`
NAS 分类	`/nas/`
Docker 分类	`/docker/`
生活分类	`/life/`
某篇文章	`/分类/文件名/` （例如 `/docker/iptv-docker/`）
关于 / 联系	`/about/` `/contact/`