逆向调研

调研日期：2026-06-20 目标：还原 nai4.top（NovelAi-Bot 指南站）的制作途径、技术栈、编辑/发布方式，并给出可复现的实现路径。原始抓取样本：nai4_home.html（首页）、content_page.html（内容页 /nai3bot指南/使用介绍），均保留在当前文件夹。

一、结论速览（TL;DR）

这是一个纯静态文档站，没有后端、没有数据库、没有服务端渲染。技术栈是：

层级	选型	版本（从 `<meta name="generator">` 直接读到）
静态站点框架	Astro	v5.13.7
文档主题/模板	Starlight（Astro 官方文档主题）	v0.35.3
内容格式	Markdown / MDX（Astro Content Collections）	—
代码高亮	Expressive Code（`ec.p1z7b.js`）	—
站内搜索	Pagefind（`data-pagefind-body`、`/_astro/...Search...js`）	—
主题切换	Starlight 内置 `StarlightThemeProvider` + `localStorage`	—
托管/CDN	Vercel（响应头 `Server: Vercel`、`X-Vercel-Id`、`X-Vercel-Cache: HIT`）	—
源码托管	站内指向 `github.com/misaka20002`（推测 GitHub 自动部署到 Vercel）	—

一句话：作者用 Astro + Starlight，写 Markdown 文档，推到 GitHub，由 Vercel 自动构建并发布成静态网站。

二、技术指纹证据（从 HTML 里直接抠出来的）

1. 框架 = Astro + Starlight

首页 <head> 里有两个 generator meta，铁证：

<meta name="generator" content="Astro v5.13.7"/>
<meta name="generator" content="Starlight v0.35.3"/>

2. Astro 的组件作用域类名

页面里大量 astro-xxxxxxxx（哈希作用域 CSS），如 astro-2zwhptyr、astro-cae3bppe。这是 Astro 编译 .astro 组件时自动生成的 scoped class，是 Astro 站点的典型指纹。

3. Starlight 专属结构（组件全对得上）

<starlight-theme-select> 自定义元素 + StarlightThemeProvider（主题切换）
sl-sidebar / sl-sidebar-state-persist（可折叠侧边栏，状态存 sessionStorage）
sl-link-card / sl-link-button / sl-badge / sl-steps / card-grid stagger（Starlight 内置组件）
hero 区块（<div class="hero astro-cae3bppe"> + 头图 home_girl...webp）
<site-search> + Ctrl+K 搜索入口（Starlight 搜索组件）

以上全部是 Starlight 自带组件，作者没有自研前端，只是写了 Markdown 内容 + 改了配置/主题色/logo。

4. 搜索 = Pagefind

<main data-pagefind-body ...>
<script src="/_astro/Search.astro_astro_type_script_index_0_lang.cjYDvRdi.js">

data-pagefind-body 是 Pagefind（静态站全文检索库）的标记，Starlight 默认搜索后端就是 Pagefind。

5. 代码块 = Expressive Code

<script type="module" src="/_astro/ec.p1z7b.js">

ec.*.js 是 Starlight 默认集成的 Expressive Code（比 Shiki 更花哨的代码块渲染器）。

6. 托管 = Vercel

响应头（curl -I）：

Server: Vercel
X-Vercel-Cache: HIT
X-Vercel-Id: sin1::tx6ch-...（sin1 = 新加坡节点）
Strict-Transport-Security: max-age=63072000

Last-Modified 是静态文件时间戳（说明是 astro build 产出的静态资源，而非 SSR）。

三、它具体是怎么”做出来”的（制作途径还原）

内容部分（作者的日常编辑方式）

内容是 Markdown 写的。Astro Starlight 用 Content Collections，文档放在 src/content/docs/ 下，按目录生成侧边栏。
- 例：URL /nai3bot指南/使用介绍 对应文件 src/content/docs/nai3bot指南/使用介绍.md（中文路径直接做路由）。
- 首页特殊：用了 Starlight 的 自定义 hero 页（src/content/docs/index.mdx + frontmatter 里的 hero/卡片配置），不是默认的”列文章”首页。
每篇文档顶部有 frontmatter（YAML），声明标题、图标、顺序、徽章等，Starlight 据此渲染标题栏/侧边栏/上一页下一页。
正文里用 Starlight 组件语法，例如：
- :::note / :::tip / :::caution（生成 sl-badge + 提示框）
- <CardGrid>、<LinkCard>、<LinkButton>、<Steps>（对应我们看到的 card-grid stagger、sl-link-card 等）

工程/发布部分

本地 npm create astro@latest -- --template starlight（或 astro add starlight）。
改 astro.config.mjs：站点名、Logo（/my-logo.ico）、社交链接（GitHub/Pixiv/Bilibili 都是站内指向）、主题色、导航。
astro dev 本地预览 → astro build 产出 dist/ 纯静态文件。
把仓库推到 GitHub，在 Vercel 导入该项目，框架选 Astro，自动 astro build 并部署到全球 CDN（包括 sin1 新加坡节点，所以国内访问也不慢）。

整个站点零后端代码。所谓”群机器人""tags 生成器”（tag-select.nai4.top）是另外的子站，只是从这里链过去，本站本身只是文档。

四、复刻步骤（你可以照着做出一个一样的站）

环境要求

Node.js ≥ 18（Astro 5 要求 18.20+/20.3+）
包管理器：npm / pnpm / yarn 任选（下面用 npm）

第 1 步：脚手架

npm create astro@latest -- --template starlight --no-install --no-git nai4-clone
cd nai4-clone
npm install
npm run dev      # 浏览器打开 http://localhost:4321

第 2 步：写内容（这就是”网站编辑”）

在 src/content/docs/ 下建 .md / .mdx 文件，例如：

---
title: "逆向调研"
description: 了解如何使用群内的绘画机器人
---

import { CardGrid, Card, LinkCard, Steps } from '@astrojs/starlight/components';

## 我们群里有

<CardGrid stagger>
  <Card title="会画画的派蒙" icon="seti:settings">
    已接入 NovelAi 图片生成
  </Card>
  <Card title="穿雪糕的群友">每日吃雪糕</Card>
</CardGrid>

<LinkCard title="⭐tags 生成器" href="https://tag-select.nai4.top/">
  宝宝巴士也会用的标签选择器
</LinkCard>

保存即热更新——这就是 Starlight 站的”编辑效果”：写 Markdown，本地实时预览，部署后自动变成带侧边栏/搜索/主题切换的漂亮文档站。

第 3 步：定制（`astro.config.mjs`）

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  site: 'https://nai4.top',
  integrations: [
    starlight({
      title: 'NovelAi-Bot指南',
      logo: { src: './src/assets/my-logo.svg' },
      social: {
        github: 'https://github.com/misaka20002',
        // pixiv / bilibili 需自定义 social 组件覆盖
      },
      sidebar: [
        { label: '开始', autogenerate: { directory: 'nai3bot指南' } },
      ],
      customCss: ['./src/styles/theme.css'], // 改主题色
    }),
  ],
});

第 4 步：发布到 Vercel

仓库推 GitHub。
Vercel → New Project → Import 该仓库 → Framework Preset 选 Astro → Deploy。
之后每次 git push，Vercel 自动重新构建上线；绑定自有域名 nai4.top 即可。

五、用到的工具清单（你要的”工具”汇总）

必装（核心）：

Astro —— 静态站点生成器（核心引擎）
@astrojs/starlight —— 文档主题（提供页面布局、侧边栏、搜索、主题切换等全部 UI）
Node.js + npm —— 运行/构建环境

Starlight 自带、开箱即用（不用单独装）：

Pagefind —— 站内全文搜索（静态索引）
Expressive Code —— 代码块高亮 + 复制按钮
Starlight 组件库 —— Card / CardGrid / LinkCard / LinkButton / Steps / Tabs / Badge 等

发布/托管：

GitHub —— 源码托管 + 触发部署
Vercel —— 自动构建 + 全球 CDN（免费额度足够个人文档站）

编辑器（写内容用）：

VS Code + Astro 官方插件 / Markdown 预览，或任意 Markdown 编辑器
进阶可选：接入 Decap CMS / TinaCMS 给非技术人员做可视化后台（原站没有，但可以加）

六、为什么用这套（优缺点）

优点

写作即开发：只写 Markdown，主题/搜索/响应式/暗黑模式全包，几乎零前端工作量。
性能极好：纯静态，Lighthouse 满分级；Vercel CDN 全球加速。
免费：Vercel + GitHub 学生/免费额度，0 成本。
SEO/可访问性由 Starlight 内置处理（看到大量 aria-*、sr-only、data-pagefind-body）。

局限

没有动态功能（评论/登录/数据库需外接，如接入 Giscis 评论、Supabase 等）。
多语言、复杂权限要额外配置。

附：本项目保留的原始抓取样本

nai4_home.html —— 首页完整 HTML（29 KB，含全部指纹证据）
content_page.html —— /nai3bot指南/使用介绍 内容页 HTML（48 KB）
调研报告.md —— 本文件