Docusaurus 是一个用于构建快速、简洁且可扩展的静态网站的开源项目,特别适合用来创建文档网站。以下是一个基础的 Docusaurus 教程,将引导你通过安装和设置一个简单的文档网站。
安装 Docusaurus
首先,你需要有 Node.js 和 npm/yarn 安装在你的计算机上。请参考前面的回答以了解如何在 CentOS 上安装 Node.js 和 npm。
创建一个新的目录作为你的项目的根目录,并进入该目录:
mkdir my-website
cd my-website
使用 npx 初始化一个新的 Docusaurus 项目:
npx create-docusaurus@latest my-website classic
这将在 my-website
目录下创建一个新的 Docusaurus 项目,并使用“经典”模板。
进入项目目录并开始开发服务器:
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。如果有任何具体的问题或者需要解决问题时,请查阅官方文档或者搜索社区和论坛以获取帮助。
评论