# 静态网站生成器 为 AI 网站开发而生 > vagejs 是一款为 AI 网站开发打造的免费静态网站生成器。把页面写成文本文件，就能得到一个快速、经过检查、能被 Google 和 AI 找到的网站。 [新功能：用你的 AI 助手开始搭建网站](https://vagejs.com/changelog/) 把页面写成纯文本文件，或者让你的 AI 编程助手来写：Claude Code、Cursor、Codex、Copilot 或 Gemini CLI 都可以。vagejs 是一款免费、开源的静态网站生成器，它把这些文件变成一个快速、安全、搜索引擎和 AI 助手都能读懂的网站。 `npm create vagejs@latest my-site` 复制这条命令 · 需要 Node.js 22.12 或更高版本 MIT 许可证 · v0.16.2 · [在 GitHub 上开源](https://github.com/agevenkat/vagejs) · [Lighthouse 报告](https://vagejs.com/reports/lighthouse-starter/) [开始使用](https://vagejs.com/zh-CN/docs/getting-started/)[配合 Claude Code 使用](https://vagejs.com/agents/claude-code/)[让你的 AI 助手搭建网站](https://vagejs.com/prompts/builder/) - 开箱即得 Lighthouse 100 分 - 内置 SEO 和 AI 搜索所需文件 - 支持 React、Vue 和 MDX，默认不带 JavaScript - 支持多语言网站 ~/projects 1. $ npm create vagejs@latest my-site 2. Created ~/projects/my-site 3. Install and start the site now? (Y/n) y 4. added 80 packages in 9s 5. Build your site with: 1. Claude Code 2. Codex 3. The browser editor 4. Just open the site 6. Choose a number (Enter for 1): 1 7. vagejs dev server running at http://localhost:5173/ 8. same server: http://\[::1\]:5173/ 9. editor: http://\[::1\]:5174/ (edit pages in your browser; only on this computer) 10. Starting Claude Code in my-site. 你的 AI 助手 - Claude Code - Cursor - GitHub Copilot - OpenAI Codex - Gemini CLI [各个助手的使用指南](https://vagejs.com/zh-CN/agents/) 你的托管平台 - Cloudflare - Netlify - GitHub Pages - Vercel - 任意静态托管平台 [所有部署方式](https://vagejs.com/docs/deployment/) ## 不是开发者？ 用 AI 助手搭建你的网站。 ### 让你的 AI 助手来设置 把我们现成的提示词粘贴到 Claude Code、Cursor 或其他 AI 编程助手里。它会创建网站、添加页面并检查，每一步都由你批准。 [生成你的提示词](https://vagejs.com/prompts/builder/) [免费网站工具](https://vagejs.com/tools/) ### 或者请一家代理公司来做 这些代理公司为客户搭建并维护 vagejs 网站。 - [![GetGTM](https://vagejs.com/partners/getgtm.svg)](https://getgtmos.com) - [加入你的代理公司](https://vagejs.com/partners/) [了解合作伙伴计划](https://vagejs.com/partners/) ## 你提需求，AI 助手来搭建。 每个页面上线前，vagejs 都会检查一遍。 创建网站时，选好你的助手，它会从第一条提示词开始，和你一起把网站搭起来。每个新网站都自带一个说明文件 AGENTS.md，告诉助手有哪些命令、要遵守哪些规则。所以它会按正确的方式写页面，修好检查发现的问题，并且在发布任何内容之前先问你。 1. **你的提示**添加一个价格页面 2. **AI 助手**遵循 AGENTS.md 3. **页面文件**src/pages/pricing.md 4. **vage check**链接、标题、无障碍 5. **由你批准**先看计划 6. **网站上线**能访问才算完成 1. ### 你提需求 用你自己的话，描述你想要的页面。 2. ### 它来写页面 页面就是一个纯文本文件，你自己也能看懂、能修改。 3. ### vagejs 来检查 检查会指出具体是哪个文件、什么问题，助手会在你看到之前就把它修好。 4. ### 你批准部署 你会先看到部署计划。只有你同意，网站才会上线；只有网站能正常访问，它才会说完成。 [和你的 AI 助手一起设置](https://vagejs.com/zh-CN/agents/) ## 在浏览器里编辑。 边打字边看页面效果。 npm run dev 还会启动一个本地编辑器：里面有新网站的后续步骤、所有页面、填写页面信息的表单、按你网站设计实时预览的正文、图片上传和检查结果。它编辑的就是你的 AI 助手所编辑的那些文件，而且永远不会成为线上网站的一部分。 ![vagejs 编辑器：左侧表单里是一篇博客文章的标题、描述、日期和作者，右侧是按网站设计显示的页面实时预览。](https://vagejs.com/images/editor-1440.webp) [编辑器是怎么工作的](https://vagejs.com/docs/content-authoring/#edit-in-your-browser) ## 用 vagejs 搭建的真实网站。 静态网站示例，附带可直接复制的源码。 [查看案例](https://vagejs.com/showcase/) - [![作品集示例的首页：大标题“I design calm software for complicated services”，下方是一幅手机应用的插图。](https://vagejs.com/images/showcase/portfolio.webp)](https://portfolio.vagejs.com/) ### [作品集](https://portfolio.vagejs.com/) 一位设计师的作品集，包含案例研究和文章栏目。 [访问网站](https://portfolio.vagejs.com/)[源代码](https://github.com/agevenkat/vagejs-examples/tree/main/portfolio) - [![文档示例中的一个页面：深色侧边栏列出文档页面，旁边是 Configuration 页面。](https://vagejs.com/images/showcase/docs.webp)](https://docs-demo.vagejs.com/) ### [文档网站](https://docs-demo.vagejs.com/) 一个命令行工具的文档，侧边栏直接由页面本身生成。 [访问网站](https://docs-demo.vagejs.com/)[源代码](https://github.com/agevenkat/vagejs-examples/tree/main/docs-site) - [![面包店示例的首页：标题“Fresh bread on Example Street”，旁边一块看板列出每天出炉的面包。](https://vagejs.com/images/showcase/bakery.webp)](https://bakery.vagejs.com/) ### [本地商家](https://bakery.vagejs.com/) 一家面包店，有菜单、营业时间和动态，已为本地搜索做好准备。 [访问网站](https://bakery.vagejs.com/)[源代码](https://github.com/agevenkat/vagejs-examples/tree/main/bakery) ## 内容网站需要的，这里都有。 内置 SEO、网站地图和 llms.txt。 - ### 写作 页面是文本文件或 MDX。布局可用 TypeScript、React 或 Vue 编写。 - #### [文件即页面](https://vagejs.com/docs/content-authoring/) 把一个文本文件放进文件夹，它就是一个页面。可以按主题给页面打标签、把草稿隐藏起来，或者给文章设定日期，到时再发布。 `用法：src/pages/pricing.md → /pricing/` - #### [在浏览器里编辑](https://vagejs.com/docs/content-authoring/#edit-in-your-browser) 每个页面一张表单，按你的设计实时预览，还有新网站的后续步骤，全部在你自己的电脑上。也可以直接编辑文件。 `用法：npm run dev` - #### [React、Vue 和 MDX](https://vagejs.com/zh-CN/features/react-vue-mdx/) 用组件写布局，用 MDX 写页面。它们都会变成纯 HTML，只有你标记为可交互的组件才会在浏览器里运行。 `用法：` - #### [更小的图片](https://vagejs.com/docs/content-authoring/) 照片会生成调整过尺寸的 WebP 和 AVIF 副本，每个浏览器按需选择合适的尺寸。 `用法：images: { optimize: true }` - ### 被找到 搜索引擎和 AI 助手能准确了解每一个页面。 - #### [网站地图、robots.txt 和 llms.txt](https://vagejs.com/docs/seo/) 根据真实存在的页面生成，另外还有 RSS 订阅源，以及供 AI 工具读取的页面 Markdown 副本。 `用法：npm run build` - #### [搜索和社交分享预览](https://vagejs.com/docs/seo/) 页面摘要、每个页面的分享图片、面包屑导航和结构化数据，帮助 Google 和 AI 助手理解每个页面。 `用法：defaultImage: "/images/og.png"` - #### [多语言网站](https://vagejs.com/zh-CN/features/multi-language-sites/) 每种语言一个文件夹，每个页面都有正确的语言标签，还会检查哪些翻译还缺着。 `用法：i18n: { locales: ["fr"] }` - #### [AI 爬虫由你决定](https://vagejs.com/docs/seo/) 可以分别允许或阻止 AI 训练爬虫和 AI 搜索爬虫。 `用法：robots: { aiTraining: "disallow" }` - ### 检查与防护 问题在你自己的电脑上就会暴露，不会等到访客看到。 - #### [内置网站检查](https://vagejs.com/docs/checks/) 发现失效链接、缺失的信息和无障碍方面的疏漏，并指出对应的文件。 `用法：npx vage check` - #### [速度和无障碍审核](https://vagejs.com/docs/checks/) 每个页面的体积上限、无障碍规则，需要时还可以运行 Lighthouse。 `用法：npx vage audit` - #### [防止垃圾内容注入](https://vagejs.com/docs/security/) 隐藏的脚本和指向未经批准网站的链接，永远不会出现在你的页面上。 `用法：npx vage links` - #### [不会泄露机密](https://vagejs.com/docs/security/) 密码、API 密钥和 .env 文件永远不会被发布，也不会覆盖任何人的工作。 `用法：npx vage deploy` - ### 发布与增长 一条命令上线，然后看看大家是怎么找到你的。 - #### [一条命令发布](https://vagejs.com/docs/deployment/) Cloudflare、Netlify 或 GitHub Pages。你先批准部署计划，部署期间网站保持在线。 `用法：npx vage deploy` - #### [联系表单](https://vagejs.com/docs/deployment/#contact-form) 在 Cloudflare 上，一个会把消息发到你邮箱的表单，带防垃圾功能，不需要 JavaScript。 `用法：contact: { to, from }` - #### [尊重隐私的统计分析](https://vagejs.com/docs/configuration/) Google Analytics、Tag Manager、Plausible 或 Clarity。在你开启之前一直关闭，开启后也会先等访客同意。 `用法：ga4: { measurementId: "G-…" }` - #### [搜索报告和 IndexNow](https://vagejs.com/docs/deployment/) 在终端里查看 Search Console 数据，页面更新时通知搜索引擎。 `用法：npx vage report search` [查看全部功能](https://vagejs.com/zh-CN/features/) [vagejs 与其他工具对比](https://vagejs.com/compare/) ## 开箱即快。 Lighthouse 100 分，0 KB JavaScript。 我们用 Google 的 Lighthouse 工具测试了一个全新的 vagejs 网站。它在每个类别都拿到了满分 100，在模拟的手机网络下，页面不到一秒就加载完成。 - **100**Lighthouse 分数 全新网站在性能、无障碍、最佳做法和 SEO 上的得分。 - **0.8 s**主要内容可见 在模拟的慢速手机网络下（Largest Contentful Paint，最大内容绘制）。 - **0 KB**发送的 JavaScript 页面是纯 HTML。只有你自己加的地方才会有 JavaScript，比如一个可交互组件。 - **0.5 s**构建网站用时 四个页面的入门网站，构建完即可发布。 100性能 100无障碍 100最佳做法 100SEO 3/3Agentic Browsing 查看全部数据和测量方法 | 指标 | vagejs 起始模板 | 良好标准 | | --- | --- | --- | | 主要内容出现（LCP） | 0.8 s | 低于 2.5 s | | 布局跳动（CLS） | 0 | 低于 0.1 | | 页面卡住的时间（TBT） | 0 ms | 越低越好 | | 首段文字出现（FCP） | 0.6 s | 越低越好 | | 发送给访客的 JavaScript | 0 KB | 越少越快 | | 下载的数据量 | 1.7 KB，共 2 个请求 | 越少越快 | | 构建网站用时 | 0.5 s，共 4 个页面 | 越快越好 | 测量方法：用 npm create vagejs@latest（vagejs 0.16.1）新建的网站，于 2026 年 10 月 28 日使用 Lighthouse 13.5.0 在移动端设置和模拟慢速网络下测试。我们测了两次，两次结果完全相同。这些是实验室数据。Google 还会参考真实访客的数据，你自己网站的数据会取决于你的图片、内容和托管平台。 ## 大家常问的问题。 直截了当的回答。 ### 我可以用 vagejs 搭建哪些网站？ 内容型网站，比如公司网站、博客、文档、作品集，以及商店、咖啡馆或诊所的网站。我们的案例页面里有一个在线的作品集、文档网站和面包店网站，你可以照着做。如果是需要登录和实时数据的应用，应用框架会更合适。 ### vagejs 网站有多快？ 一个全新的 vagejs 网站在 Lighthouse 的每个类别都拿到了 100 分，在模拟的慢速手机网络下 0.8 s 就显示出主要内容，并且发送了 0 KB JavaScript。这些是 2026 年 10 月 28 日的实验室结果，你自己网站的数据会取决于你的图片、内容和托管平台。 ### 怎么用 Claude Code、Codex 或 Cursor 搭建网站？ 运行 npm create vagejs@latest my-site，在它询问时选择你的助手。它会从第一条提示词开始，和你一起把网站搭起来。也可以直接让你的助手用 vagejs 搭建网站：每个新网站都包含一个 AGENTS.md 文件，告诉它有哪些命令和规则。 ### vagejs 如何防止 AI 助手发布错误？ vage check 会在每个页面上线前读一遍，并指出每个失效链接、缺失标题或无效结构化数据来自哪个文件，让你的助手先把它修好。指向你没有批准的网站的链接会让检查不通过，而且在你同意之前，什么都不会发布。 ### 我的页面存放在哪里？ 存放在项目 src/pages 文件夹里的纯 Markdown 文件中，每个文件的位置决定了它的地址：src/pages/pricing.md 会变成 /pricing/。你的 AI 助手和浏览器编辑器修改的是同一批文件，所以你的全部内容都保存在你自己拥有的文件里。 ### 我怎么发布网站？ 运行 npx vage deploy。它会检查网站，给你看一份计划，只有在你同意后才发布到 GitHub Pages、Cloudflare 或 Netlify，而且只有在你的网站有响应时才会说完成。其他任何静态托管平台（比如 Vercel）都可以直接提供构建好的 dist 文件夹。 [查看全部问题](https://vagejs.com/zh-CN/faq/)[分步指南](https://vagejs.com/guides/)