Zephyr Cloud Docs

    Rspress

    Deploy your Rspress documentation sites to Zephyr Cloud with lightning-fast builds powered by Rspack. Rspress is a React-based static site generator that combines the power of React with Markdown content creation.

    Prerequisites
    Quick Setup with Codemod
    npm
    yarn
    pnpm
    bun
    npx with-zephyr

    This detects your bundler and configures Zephyr automatically. Learn more →

    For manual setup, continue below.

    Installation

    Install the Rspress plugin in your project:

    npm
    yarn
    pnpm
    bun
    deno
    npm add --dev zephyr-rspress-plugin

    Configuration

    Add the Zephyr plugin to your Rspress configuration:

    // rspress.config.ts
import path from 'node:path';
import { defineConfig } from 'rspress/config';
import { withZephyr } from 'zephyr-rspress-plugin';

export default defineConfig({
  root: path.join(__dirname, 'docs'),
  outDir: './doc_build',
  ssg: true,
  builderPlugins: [],
  plugins: [withZephyr()],
});

    Project Structure

    Rspress uses a content-driven architecture:

    my-rspress-site/
├── docs/                    # Documentation content
│   ├── _meta.json          # Navigation configuration
│   ├── index.md            # Home page
│   ├── guide/              # Guide section
│   │   ├── _meta.json      # Section navigation
│   │   └── index.md        # Guide content
│   └── public/             # Static assets
├── rspress.config.ts       # Rspress configuration
└── package.json

    Development Workflow

    Start your development server:

    npm
    yarn
    pnpm
    bun
    deno
    npm dev

    Build for production:

    npm
    yarn
    pnpm
    bun
    deno
    npm build

    Preview production build:

    npm
    yarn
    pnpm
    bun
    deno
    npm preview

    Content Management

    Write content in Markdown files within the docs/ directory:

    • Pages: Create .md files for individual pages
    • Navigation: Use _meta.json files to configure navigation and page order
    • Assets: Add static assets to docs/public/ for images and other files
    • MDX Support: Use React components within your Markdown content

    Configuration Options

    Customize your Rspress site with additional configuration:

    export default defineConfig({
  root: path.join(__dirname, 'docs'),
  outDir: './doc_build',
  ssg: true,
  title: 'My Documentation',
  description: 'Documentation site built with Rspress',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
    ],
  },
  plugins: [withZephyr()],
});