快速开始

1. 初始化项目

方式一：通过脚手架创建

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

npm

yarn

pnpm

bun

  1. npm create rspress@latest

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

方式二：手动创建

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

  1. mkdir rspress-app && cd rspress-app

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

npm

yarn

pnpm

bun

  1. npm install rspress -D

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

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

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

  1. {
  2.   "scripts": {
  3.     "dev": "rspress dev",
  4.     "build": "rspress build",
  5.     "preview": "rspress preview"
  6.   }
  7. }

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

rspress.config.ts

  1. import { defineConfig } from 'rspress/config';
  3. export default defineConfig({
  4.   // 文档根目录
  5.   root: 'docs',
  6. });

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

  1. {
  2.   "compilerOptions": {
  3.     "target": "ES2020",
  4.     "lib": ["DOM", "ES2020"],
  5.     "module": "ESNext",
  6.     "jsx": "react-jsx",
  7.     "noEmit": true,
  8.     "strict": true,
  9.     "skipLibCheck": true,
  10.     "isolatedModules": true,
  11.     "resolveJsonModule": true,
  12.     "moduleResolution": "bundler",
  13.     "useDefineForClassFields": true,
  14.     "allowImportingTsExtensions": true
  15.   },
  16.   "include": ["docs", "theme", "rspress.config.ts"],
  17.   "mdx": {
  18.     "checkMdx": true
  19.   }
  20. }

2. 启动 Dev Server

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

  1. npm run dev

这样 Rspress 将启动开发服务。

提示

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

3. 生产环境构建

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

  1. npm run build

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

4. 本地预览产物

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

  1. npm run preview

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