Docusaurus 是一个用于构建快速、简洁且可扩展的静态网站的开源项目,特别适合用来创建文档网站。以下是一个基础的 Docusaurus 教程,将引导你通过安装和设置一个简单的文档网站。

安装 Docusaurus

首先,你需要有 Node.js 和 npm/yarn 安装在你的计算机上。请参考前面的回答以了解如何在 CentOS 上安装 Node.js 和 npm。

  1. 创建一个新的目录作为你的项目的根目录,并进入该目录:

mkdir my-website
cd my-website

  1. 使用 npx 初始化一个新的 Docusaurus 项目:

npx create-docusaurus@latest my-website classic


这将在 my-website 目录下创建一个新的 Docusaurus 项目,并使用“经典”模板。

  1. 进入项目目录并开始开发服务器:

cd my-website
npm run start


这将启动本地开发服务器,并且通常会自动在浏览器中打开。

结构理解

在项目的根目录中,你会看到以下关键目录和文件:

  • docusaurus.config.js:这是你网站的配置文件。这里你可以设置网站标题、URL、主题颜色等。

  • docs/:这个目录包含你的文档文件,通常是 Markdown 格式。

  • blog/:如果你的网站包括博客,这个目录包含博客文章。

  • src/:这个目录包含自定义页面和组件。

  • static/:这个目录包含静态文件,如图片、CSS、JavaScript。

编写文档

你的文档应该保存为 Markdown 文件,并放置在 docs/ 目录下。例如,创建一个名为 hello.md 的文件:

---
id: hello
title: Hello, World!
---

# Hello, World!

这是我的第一个 Docusaurus 文档页面。

上面的 Markdown 文件前面带有一个特殊的注释块,称为 "Front Matter",它用来设置文档的 ID、标题等属性。

配置导航栏和侧边栏

编辑 docusaurus.config.js 来配置导航栏和侧边栏。例如:

module.exports = {
  // ...
  themeConfig: {
    navbar: {
      title: 'My Site',
      items: [
        // 导航栏项目
        {
          type: 'doc',
          docId: 'hello',
          position: 'left',
          label: 'Tutorial',
        },
        // 其他导航项...
      ],
    },
    footer: {
      // 底部信息配置...
    },
    // ...
  },
  // ...
};

你可以编辑 sidebars.js 来定义侧边栏的结构。例如:

module.exports = {
  sidebar: [
    {
      type: 'category',
      label: 'Tutorial',
      items: ['hello'],
    },
  ],
};

部署网站

当你准备好将你的网站部署到生产环境时,可以使用:

npm run build

这将在 build/ 目录下生成静态内容。你可以使用任何静态站点托管服务来部署这个目录的内容,例如 GitHub Pages、Vercel、Netlify 等。

进一步学习

Docusaurus 官方文档提供了详细的指导和更多的配置选项:https://docusaurus.io/docs

可以查看官网文档来了解更高级的主题,比如国际化、版本控制、插件和主题定制等。

以上步骤应该能帮助你开始使用 Docusaurus。如果有任何具体的问题或者需要解决问题时,请查阅官方文档或者搜索社区和论坛以获取帮助。