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

> vagejs 的全部功能都在这里：Markdown 和 MDX 页面、React 和 Vue 组件、多语言、SEO 文件、检查、防垃圾内容和安全部署。

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

`npm create vagejs@latest my-site`

[开始使用](https://vagejs.com/zh-CN/docs/getting-started/)[配合你的 AI 助手使用](https://vagejs.com/zh-CN/agents/)

## 编写和构建页面

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

-   ### 编写页面
    
    每个页面都是 `src/pages` 里的一个 Markdown 文件，文件所在的文件夹决定它的网址：`src/pages/pricing.md` 会变成 `/pricing/`。页面可以是草稿，可以带标签（每个标签有自己的页面），也可以等到发布日期再上线。`datePublished` 设为未来日期的页面，在那一天之前不会出现在构建结果、网站地图和订阅源里，到了那天，下一次构建时就会出现。
    
    详见[内容编写](https://vagejs.com/docs/content-authoring/)
    
-   ### 本地编辑器
    
    `npm run dev` 还会在你的浏览器里启动一个编辑器：每个页面一张表单，正文按你网站的设计实时预览，支持图片上传，还能看到页面的检查结果。如果某个页面在你打开之后被改过，它会拒绝覆盖。它只在你自己的电脑上运行，永远不会成为构建出的网站的一部分。
    
    详见[在浏览器里编辑](https://vagejs.com/docs/content-authoring/#edit-in-your-browser)
    
-   ### React、Vue 和 MDX
    
    布局可以是 TypeScript 函数，也可以是 React 和 Vue 组件；页面可以是带 React 组件的 MDX。所有这些最终都会变成纯 HTML。给一个 React 组件加上 `client:visible`，它就会成为一个可交互的“岛屿”，而且只在那个页面上。
    
    详见 [React、Vue 和 MDX](https://vagejs.com/zh-CN/features/react-vue-mdx/)
    
-   ### 多语言
    
    把译文按语言分别放进各自的文件夹。vagejs 会设置每个页面的语言，在不同语言版本之间写好 `hreflang` 链接，并提醒你哪些页面还需要翻译。
    
    详见[多语言网站](https://vagejs.com/zh-CN/features/multi-language-sites/)
    

## 让搜索引擎和 AI 找到你

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

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

## 发布不出意外

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

-   ### 发布前检查
    
    `vage check` 会读取每个页面，不写入任何内容，并报告失效链接、缺失或重复的标题和描述、无效的结构化数据以及基本的无障碍疏漏，每一项都会指出要修改的文件。`vage audit` 会构建网站，并让每个页面遵守体积预算，比如 100 KB 的 JavaScript。
    
    详见[检查与审核](https://vagejs.com/docs/checks/)
    
-   ### 防止垃圾内容注入
    
    你的页面链接到的每个外部网站都列在 `links.lock.json` 里。链接到不在列表中的网站，或者对访客隐藏的链接，都会导致检查失败。`vage verify` 会把线上网站和你的文件进行对比。
    
    详见[安全](https://vagejs.com/docs/security/)
    
-   ### 安全部署
    
    `vage deploy` 可以发布到 GitHub Pages、Cloudflare Workers、Cloudflare Pages 或 Netlify。它会先运行检查，展示部署计划并等你同意，拒绝提交机密信息，并且从不强制推送。任何其他静态托管平台（比如 Vercel）都可以直接提供 `dist` 文件夹。
    
    详见[部署](https://vagejs.com/docs/deployment/)
    
-   ### 不需要 JavaScript 的联系表单
    
    在 Cloudflare Workers 上，联系表单不需要在页面上放任何脚本：`vage deploy` 会添加一个小小的 Worker，把每条消息发到邮箱，带有垃圾信息陷阱和每位访客的次数限制。
    
    详见[联系表单](https://vagejs.com/docs/deployment/#contact-form)
    

## 为 AI 编程助手打造

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

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 功能的指南和对比

[指南](https://vagejs.com/guides/)一步步讲解具体任务的做法，[vagejs 对比](https://vagejs.com/compare/)则展示这些功能与其他静态网站生成器和 CMS 的对比。想了解谁在开发 vagejs 以及原因，请阅读[关于 vagejs](https://vagejs.com/zh-CN/about/)。

## 关于 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` 会在浏览器里打开一个编辑器，每个页面一张表单，并按你网站的设计实时预览。它只在你自己的电脑上运行，永远不会成为发布出去的网站的一部分。