close
Rspress
  • 中文

      • 快速开始

      For your Agent
      一键创建 Rspress 项目

      复制这段 Prompt 发送给你的 AI Agent，它会自动帮你搭建一个全新的 Rspress 站点。

      环境准备

      Rspress 支持使用 Node.js、Deno 或 Bun 作为 JavaScript 运行时。

      请参考以下指南安装运行时：

      版本要求

      Rspress 需要 Node.js 版本 20.19+, 22.12+。

      1. 初始化项目

      方式一：通过脚手架创建

      你可以通过 Rspress 脚手架命令来创建项目:

      npm
      yarn
      pnpm
      bun
      deno
      npm create rspress@latest

      然后按照提示输入项目名称，即可创建一个 Rspress 项目。

      使用 Agent Skills

      如果你计划使用 AI Agent 维护文档站点，可以在创建项目时选择 Agent Skills。CLI 会在项目中生成 .agents/skills 目录，并把选中的 Skills 放到该目录下。

      对于大多数文档站点，推荐选择：

      如果你选择了自定义默认主题，还可以选择：

      • rspress-custom-theme：让你的 AI Agent 为你定制 Rspress 主题，例如 CSS 变量、Layout slots 和主题组件覆盖。

      这些 Skills 不会影响 Rspress 站点的运行时行为，只是为 AI Agent 编辑和维护项目提供本地指导。如果你不使用 AI Agent，可以按回车跳过这个选项。

      关于 Agent Skills 和其他 AI 相关能力的更多介绍，可参考 AI。

      方式二：手动创建

      首先，你可以通过以下命令创建一个新目录：

      mkdir rspress-app && cd rspress-app

      执行 npm init -y 来初始化一个项目。你可以使用 npm、pnpm、yarn 或 bun 安装 Rspress:

      npm
      yarn
      pnpm
      bun
      deno
      npm install @rspress/core -D

      然后通过如下命令创建文件:

      mkdir docs && echo '# Hello world' > docs/index.md

      在 package.json 中加上如下的脚本:

      {
  "scripts": {
    "dev": "rspress dev",
    "build": "rspress build",
    "preview": "rspress preview"
  }
}

      然后初始化一个配置文件 rspress.config.ts:

      rspress.config.ts
      import { defineConfig } from '@rspress/core';

export default defineConfig({
  // 文档根目录
  root: 'docs',
});

      同时新建 tsconfig.json，内容如下:

      {
  "compilerOptions": {
    "lib": ["DOM", "ES2023"],
    "jsx": "react-jsx",
    "target": "ES2023",
    "noEmit": true,
    "skipLibCheck": true,
    "useDefineForClassFields": true,

    /* modules */
    "module": "ESNext",
    "moduleDetection": "force",
    "moduleResolution": "bundler",
    "verbatimModuleSyntax": true,
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,
    "noUncheckedSideEffectImports": true,
    "isolatedModules": true,

    /* type checking */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["docs", "theme", "rspress.config.ts"],
  "mdx": {
    "checkMdx": true
  }
}

      2. 启动 Dev server

      通过如下命令启动本地开发服务:

      npm run dev

      这样 Rspress 将启动开发服务。

      提示

      对于 dev 命令，你可以通过 --port 或 --host 参数来指定开发服务的端口号或 host，例如 rspress dev --port 8080 --host 0.0.0.0。

      3. 生产环境构建

      通过如下命令构建生产环境的产物:

      npm run build

      默认情况下，Rspress 将会把产物打包到 doc_build 目录。

      4. 本地预览产物

      通过如下命令启动本地预览服务:

      npm run preview

      这样 Rspress 将启动产物预览服务。