用 Astro 搭一个个人网站：从零到上线

这篇文章记录站点搭建的完整过程，方便以后重装环境时照着做。

一、初始化项目

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

打开 http://localhost:4321 就能看到页面了。

二、目录结构

my-site/
├── src/
│   ├── content/
│   │   ├── articles/      # 文章，一个 .md 一个文件
│   │   └── works/         # 作品
│   ├── layouts/
│   │   └── Base.astro     # 公共骨架：导航 + 页脚
│   ├── pages/
│   │   ├── index.astro    # 首页
│   │   ├── articles/      # 列表页 + 详情页
│   │   ├── works.astro
│   │   └── about.astro
│   ├── styles/
│   │   └── global.css     # 全站样式
│   └── content.config.ts  # 内容字段定义
└── astro.config.mjs

关键点是 src/pages/ 里的文件路径直接对应网址。pages/about.astro 就是 /about。

三、文章怎么加

在 src/content/articles/ 里新建一个 .md 文件，开头写元信息：

---
title: 文章标题
date: 2026-09-23
summary: 一句话摘要，会显示在列表里
tags: [随笔]
---

正文从这里开始。

保存后页面自动出现。不需要后台，不需要登录。

四、踩过的两个坑

坑一：日期排序错了。 date 是字符串，直接用 a.date > b.date 排序在某些格式下会出错。要转成时间戳：

posts.sort((a, b) => +new Date(b.data.date) - +new Date(a.data.date));

坑二：详情页路由不匹配。 动态路由的文件名必须是 [...slug].astro，不是 [slug].astro，否则嵌套路径会 404。

五、下一步

• 换成自己的配色和字体
• 加 RSS 和 sitemap
• 绑域名、开 HTTPS

做完这些，一个能用的个人站就有了。