静态构建

设置

默认情况下，Fumadocs 使用服务器优先方法，这总是需要运行的服务器来提供服务。

您也可以通过在 React 框架上启用它来输出静态构建。

搜索

内置搜索

您需要额外的配置来静态存储搜索索引，并且搜索将在浏览器中计算：

搜索客户端： 启用静态模式。
搜索服务器： 输出静态索引。

云解决方案

由于搜索功能由远程服务器提供，静态导出无需配置即可工作。

部署

Next.js

您可以启用 Next.js 静态导出，它允许您将应用导出为静态 HTML 站点，而无需 Node.js 服务器。

next.config.mjs

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',

  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
};

请参阅 Next.js 文档以了解限制和详细信息。

React Router

通过在所有页面上配置预渲染，您可以将 build/client 目录作为静态网站提供服务。

react-router.config.ts

import type { Config } from '@react-router/dev/config';
import { glob } from 'node:fs/promises';
import { createGetUrl, getSlugs } from 'fumadocs-core/source';

const getUrl = createGetUrl('/docs');

export default {
  ssr: true,
  async prerender({ getStaticPaths }) {
    const paths: string[] = [...getStaticPaths()];

    for await (const entry of glob('**/*.mdx', { cwd: 'content/docs' })) {
      paths.push(getUrl(getSlugs(entry)));
    }

    return paths;
  },
} satisfies Config;

Tanstack Start

通过配置预渲染，您可以将静态预渲染的 HTML 页面作为静态网站提供服务。

vite.config.ts

import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // ...other plugins
    tanstackStart({
      // Tanstack Router will automatically crawl your pages
      target: 'static',
      prerender: {
        enabled: true,
      },
      // if you have any hidden paths that's not visible on UI, you can add them explicitly.
      pages: [
        {
          path: '/docs/test',
        },
      ],
    }),
  ],
});

Waku

当所有页面都配置为 static 渲染模式时，Waku 可以静态提供您的站点。

请参阅部署以了解详细信息。

On this page