#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.

npx with-zephyr

#Installation

Install the Rspress plugin in your project:

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 dev

Build for production:

npm build

Preview production build:

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()],
});