NeteasyMU Blog

你好，Astro

Mon, 02 Nov 2026 00:00:00 GMT

欢迎来到 NeteasyMU Blog。

这是第一篇文章，也是一次简单的自我介绍：这个站点用什么搭建，以及为什么。

为什么是 Astro

我一直想要一个足够简单的写作环境：打开编辑器，写 Markdown，提交，然后结束。不需要数据库，不需要后台，也不需要为了显示一篇文章而加载一整套前端框架。

Astro 刚好符合这个要求。它把内容放在构建时处理，最终输出的是完整的 HTML。浏览器拿到页面就能阅读，JavaScript 只在真正需要交互时才出现。

好的工具应该让你忘记工具本身，把注意力还给内容。

它做对了什么

内容优先。 文章就是仓库里的 Markdown 文件，版本、备份和迁移都变得很自然。
默认零 JavaScript。 对博客来说，这通常意味着更快的第一屏和更少的意外。
没有锁定。 构建产物是静态文件，可以部署到任何地方，也可以随时搬走。

这个博客的结构

这个站点使用 Shirone 主题，在 Astro 7 之上加入了 Svelte 5 与 Material 3 Expressive 设计系统：

src/
├── content/posts/   # 文章
├── config/          # 主题配置
├── layouts/         # 页面骨架
└── pages/           # 路由

每次执行 pnpm build，Astro 会把 Markdown 渲染成 HTML，并输出到 dist/。部署时只需要这个目录。

接下来

我会在这里记录一些正在做的事情：

前端与设计
独立开发中的取舍
偶尔值得记下来的小问题

如果你也刚接触 Astro，可以从官方文档开始。它大概是我读过的最清楚的框架文档之一。

谢谢你读到这里。

在这个博客里写 Markdown

Sun, 01 Nov 2026 00:00:00 GMT

在 src/content/posts/ 里新建一个 .md 文件，就拥有了一篇新文章。文件名会成为网址的一部分，例如 hello-astro.md 对应 /posts/hello-astro/。

也可以使用主题自带的命令创建文章骨架：

pnpm new-post my-first-post

Frontmatter

每篇文章顶部都需要一段 Frontmatter，用来描述标题、摘要、发布时间和分类：

---
title: "文章标题"
published: 2026-11-02
description: "一句话摘要，会显示在列表和搜索结果里。"
tags: [Astro, 写作]
category: 写作
draft: false
---

draft: true 的文章不会出现在列表里，也不会被生产构建。写完之前可以先把它藏起来。

常用语法

强调与链接

用 **粗体** 表示粗体，用 *斜体* 表示斜体。链接写成 [文字](https://example.com)。

列表

无序列表适合并列的内容：

第一项
第二项
第三项

有序列表适合步骤：

新建文件
写正文
运行 pnpm build

引用

引用用来强调一段独立的想法，或者引入别人的话。

它可以有多行。

代码

行内代码用反引号包起来，例如 pnpm dev。代码块则可以指定语言，获得语法高亮：

const posts = await getCollection("posts");

const sorted = posts.sort(
  (a, b) => b.data.published.valueOf() - a.data.published.valueOf(),
);

表格

字段	类型	必填
`title`	string	是
`published`	date	是
`description`	string	否
`tags`	string[]	否
`category`	string	否

发布

保存文件后，开发服务器会自动刷新。确认排版没有问题，再执行构建：

pnpm build

构建会检查 Frontmatter 是否符合内容集合的 schema。字段缺失或类型不对时，构建会直接报错，而不是等到线上才发现。

把 Astro 站点部署到网上

Wed, 28 Oct 2026 00:00:00 GMT

Astro 默认输出静态站点。构建完成后，dist/ 里的文件就是整个网站。

先构建

pnpm build

这个主题的构建会依次完成内容同步、Astro 构建、Pagefind 搜索索引和字体子集校验，所以比普通 Astro 项目稍慢一些。

如果只想在本地检查构建结果，可以再运行：

pnpm preview

预览服务器会以生产模式提供 dist/ 中的文件，适合在部署前做最后一次检查。

部署清单

[ ] pnpm build 没有报错
[ ] 标题、描述和日期显示正确
[ ] 站内链接可以正常跳转
[ ] 404 页面可以访问
[ ] 图片和字体没有 404
[ ] 在手机上检查过排版

常见托管方式

Netlify、Vercel、Cloudflare Pages

这类平台都可以直接连接 Git 仓库，并使用下面的配置：

配置项	值
构建命令	`pnpm build`
输出目录	`dist`
Node.js 版本	`>= 26.13.0`
包管理器	`pnpm 11.x`

每次推送到主分支，平台会自动重新构建并发布。

自己的服务器

把 dist/ 上传到服务器的网站目录即可。如果使用 Nginx，一个最简单的站点配置大概是这样：

server {
    listen 80;
    server_name example.com;
    root /var/www/blog/dist;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

记得把 example.com 和 root 换成你自己的域名与目录。

自定义域名

部署完成后，在托管平台里绑定域名，并按照提示配置 DNS。启用 HTTPS 之后，再把正式域名填回 src/config/siteConfig.ts 的 site 字段，canonical 链接、RSS 和 sitemap 才能生成正确的绝对地址。

export const siteConfig = withUserConfig("site", {
  site: "https://example.com/",
  // ...
});

就这样。没有服务器要维护，也没有缓存要清理。