vagejs
GitHub 开始使用

vagejs 功能
vagejs 能为你的网站做什么。

vagejs 是一款为 AI 编程助手打造的免费、开源静态网站生成器。它的主要功能有：Markdown 和 MDX 页面、React 和 Vue 组件、多语言网站、搜索引擎和 AI 助手要找的文件、每个页面上线前的检查、防垃圾内容和安全部署。页面由你来写，也可以让 AI 助手替你写。下面就是它能做的一切，每一项都附有文档链接。

npm create vagejs@latest my-site

开始使用配合你的 AI 助手使用

编写和构建页面

文件归你所有，只在你想用的地方才用组件。

  • 编写页面

    每个页面都是 src/pages 里的一个 Markdown 文件，文件所在的文件夹决定它的网址：src/pages/pricing.md 会变成 /pricing/。页面可以是草稿，可以带标签（每个标签有自己的页面），也可以等到发布日期再上线。datePublished 设为未来日期的页面，在那一天之前不会出现在构建结果、网站地图和订阅源里，到了那天，下一次构建时就会出现。

    详见内容编写

  • 本地编辑器

    npm run dev 还会在你的浏览器里启动一个编辑器：每个页面一张表单，正文按你网站的设计实时预览，支持图片上传，还能看到页面的检查结果。如果某个页面在你打开之后被改过，它会拒绝覆盖。它只在你自己的电脑上运行，永远不会成为构建出的网站的一部分。

    详见在浏览器里编辑

  • React、Vue 和 MDX

    布局可以是 TypeScript 函数，也可以是 React 和 Vue 组件；页面可以是带 React 组件的 MDX。所有这些最终都会变成纯 HTML。给一个 React 组件加上 client:visible，它就会成为一个可交互的“岛屿”，而且只在那个页面上。

    详见 React、Vue 和 MDX

  • 多语言

    把译文按语言分别放进各自的文件夹。vagejs 会设置每个页面的语言，在不同语言版本之间写好 hreflang 链接，并提醒你哪些页面还需要翻译。

    详见多语言网站

让搜索引擎和 AI 找到你

搜索引擎和 AI 助手要读的一切，都会根据你已有的页面替你写好。

网站地图、robots.txt、llms.txt、canonical 链接、分享标签、结构化数据和 RSS 订阅源，都根据实际存在的页面生成。在 robots.txt 里，你可以把 AI 训练爬虫（比如 GPTBot 和 ClaudeBot）和 AI 搜索爬虫（比如 OAI-SearchBot 和 PerplexityBot）区别对待。详见 SEO 和 AI 搜索。

发布不出意外

每个页面上线前都会被检查，没有你的同意，什么都不会发布。

  • 发布前检查

    vage check 会读取每个页面，不写入任何内容，并报告失效链接、缺失或重复的标题和描述、无效的结构化数据以及基本的无障碍疏漏，每一项都会指出要修改的文件。vage audit 会构建网站，并让每个页面遵守体积预算，比如 100 KB 的 JavaScript。

    详见检查与审核

  • 防止垃圾内容注入

    你的页面链接到的每个外部网站都列在 links.lock.json 里。链接到不在列表中的网站，或者对访客隐藏的链接，都会导致检查失败。vage verify 会把线上网站和你的文件进行对比。

    详见安全

  • 安全部署

    vage deploy 可以发布到 GitHub Pages、Cloudflare Workers、Cloudflare Pages 或 Netlify。它会先运行检查，展示部署计划并等你同意，拒绝提交机密信息，并且从不强制推送。任何其他静态托管平台（比如 Vercel）都可以直接提供 dist 文件夹。

    详见部署

  • 不需要 JavaScript 的联系表单

    在 Cloudflare Workers 上，联系表单不需要在页面上放任何脚本：vage deploy 会添加一个小小的 Worker，把每条消息发到邮箱，带有垃圾信息陷阱和每位访客的次数限制。

    详见联系表单

为 AI 编程助手打造

每个新网站都包含 AGENTS.md，它告诉 Claude Code、Codex、Cursor 和其他助手有哪些命令和规则。vage info --json 一次就能说明所有命令和设置，vage mcp 让助手可以直接检查网站。详见 AI 助手指南。

terminal
npx vage info --json   # every command and setting, in one reply
claude mcp add --transport stdio --scope project vagejs -- npx -p vagejs vage mcp

vagejs 功能的指南和对比

指南一步步讲解具体任务的做法，vagejs 对比则展示这些功能与其他静态网站生成器和 CMS 的对比。想了解谁在开发 vagejs 以及原因，请阅读关于 vagejs。

关于 vagejs 功能的常见问题

vagejs 会向访客发送 JavaScript 吗？

不会，除非你主动要求。页面都是纯 HTML，所以一个新网站发送的 JavaScript 是 0 KB。只有标记了 client:visible、client:load 或 client:idle 的 React 组件才会加入 JavaScript，而且只在用到它的页面上。

我能使用 React 或 Vue 组件吗？

能。布局可以是 React 或 Vue 组件，MDX 页面可以使用 React 组件。它们会在构建网站时变成纯 HTML，所以除非某个组件需要交互，访客不会下载 React 或 Vue。

vage check 会检查哪些内容？

失效链接、缺失或重复的标题和描述、无效的结构化数据、指向你没有批准的网站的链接，以及基本的无障碍疏漏，比如图片缺少 alt 文本。每个问题都会指出要修改的文件，你或你的 AI 助手可以马上修好。

不用代码编辑器也能编辑页面吗？

能。npm run dev 会在浏览器里打开一个编辑器，每个页面一张表单，并按你网站的设计实时预览。它只在你自己的电脑上运行，永远不会成为发布出去的网站的一部分。

一条命令即可开始。
一分钟内网站就能运行。

npm create vagejs@latest my-site

阅读文档配合你的 AI 助手使用