1、简介

Docusaurus是Facebook开源的文档搭建网站,国内国外众多的开源项目均使用了Docusaurus,基于React开发,文档编写支持Markdown语法,使用简单,部署简单,使用者可以专注于文档本身。可部署在 GitHub Pages、vercel等网站不需要服务器。

Docusaurus可用于创建个人网站、个人博客、产品网站、开源项目文档等。

官网地址:https://docusaurus.io

2、搭建示例

https://chatgpt-java.unfbx.com

3、本地环境搭建

3.1、node环境

Docusaurus依赖node.js,先安装node环境,已经有node环境的可以直接跳过。
Node.js下载地址:https://nodejs.org/en/download

3.2、创建Docusaurus网站

# my-website 表示项目名称
npx create-docusaurus@latest my-website classic

3.3、本地运行

npm run start

打开:http://localhost:3000/ 即可看到本地地址

4、配置文件

Docusaurus支持很多自定义配置,都在docusaurus.config.js配置文件中展示。
我贴上一份自己的配置文件

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'Chatgpt-Java',
  tagline: 'ChatGPT Java SDK、支持OpenAI官方所有接口、开箱即用。',
  favicon: 'img/favicon.ico',

  // Set the production url of your site here
  url: 'https://chatgpt-java.unfbx.com',
  // Set the /<baseUrl>/ pathname under which your site is served
  // For GitHub pages deployment, it is often '/<projectName>/'
  baseUrl: '/',

  // GitHub pages deployment config.
  // If you aren't using GitHub pages, you don't need these.
  organizationName: 'unfbx', // Usually your GitHub org/user name.
  projectName: 'chatgpt-java-doc', // Usually your repo name.

  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang. For example, if your site is Chinese, you may want
  // to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: 'zh',
    locales: ['zh','en'],
  },
  scripts: [
    {
      src: 'https://hm.baidu.com/hm.js?xxxxxxxxxxx',
      async: true
    }
  ],
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/Grt1228/chatgpt-java-doc/tree/main/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/Grt1228/chatgpt-java-doc/tree/main/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // Replace with your project's social card
      image: 'img/docusaurus-social-card.jpg',
      announcementBar: {
        id: 'support_us',
        content:'顶部提示信息',
        textColor: '#ffffff',
        isCloseable: true,
      },
      navbar: {
        title: 'Chatgpt-Java',
        logo: {
          alt: 'Chatgpt-Java Logo',
          src: 'img/logo.png',
        },
        items: [
          {
            type: 'docSidebar',
            sidebarId: 'tutorialSidebar',
            position: 'left',
            label: '快速开始',
          },
          {to: 'https://javadoc.io/doc/com.unfbx/chatgpt-java', label: 'Java Doc', position: 'left'},
          {
            href: 'https://github.com/Grt1228/chatgpt-java',
            label: 'GitHub',
            position: 'right',
          },
          {
            to: 'https://www.unfbx.com',
            label: 'Blog ',
            position: 'right',
          },
        ],
      },
      footer: {
        style: 'dark',
        //配置底部菜单信息  我用不到直接注释了
        /**links: [
          {
            title: 'Docs',
            items: [
              {
                label: '快速开始',
                to: '/docs',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: 'https://unfbx.com',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/Grt1228/chatgpt-java',
              },
            ],
          },
        ],*/
        copyright: `Copyright © ${new Date().getFullYear()} Chatgpt-Java.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;

4.1、几个比较常用的配置

4.1.1、配置百度统计

  scripts: [
    {
      src: 'https://hm.baidu.com/hm.js?xxxxxxxxxxx',
      async: true
    }
  ],

4.1.2、配置顶部banner信息

在配置项themeConfig下新增配置:

  announcementBar: {
    id: 'support_us',
    content:'顶部提示信息',
    textColor: '#ffffff',
    isCloseable: true,
  },
下一篇文章聊一聊怎么部署Docusaurus到vercel托管并自定义域名。
文章目录