Introduction

Turn your content into a website.

What is Fumapress?

Fumapress is a React site generator powered by Fumadocs, as compared to Fumadocs, it manages more features such as routing, while being more opinionated.

It is perfect if you want a beautiful, flexible docs, without revealing too much complexity.

Under the hood, the app is still a Waku app, you can easily transition to a full Fumadocs app without heavy migration.

Getting Started

Automatic Installation

Create a new Fumapress app.

npm create fumapress

Manual Installation

Install the dependencies:

npm i fumapress fumadocs-ui@npm:@fumadocs/base-ui fumadocs-core fumadocs-mdx @base-ui/react react react-dom

npm i vite tailwindcss @tailwindcss/vite @types/react @types/react-dom typescript -D

Create the config files:

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import press from "fumapress/vite";
import { fumadocsMdx } from "fumadocs-mdx/vite";

// the config file for Vite
export default defineConfig({
  plugins: [press(), fumadocsMdx(), tailwindcss()],
});

Add scripts:

package.json
{
  "scripts": {
    "dev": "fumapress dev",
    "build": "fumapress build",
    "start": "fumapress start",
    "types:check": "tsc --noEmit"
  }
}

Start the dev server:

npm run dev

You can now start writing Markdown files under the content directory.

content/index.mdx
---
title: My Page
description: Hello World
---

# Overview

This is my first document.

Learn More

Continue with Basics for writing content, customization, routing, and more.

Last updated on

On this page