使用 yarn 搭建基于 docusaurus 的在线文档

Docusaurus 是一个很不错的在线文档呈现工具，文档内容基于 markdown 格式编写，该工具是facebook开源的项目。对比了同类相似的其他工具，感觉这个比较不错。

Docusaurus V2 官网
RancherDocs（一个基于它实现的站点，查看源码）

一、准备环境

1. Yarn
2. Node.js

配置步省略。

二、创建项目

例如我创建一个工作目录 E:\Docusaurus 然后使用命令行进入这个目录后，按如下命令 npx 操作

语法：npx @docusaurus/init@next init [name] [template]
其中这个 name 就是项目名，然后 template 是模板，模板一开始就用它官方的 classic，经典的即可。
示例：
npx @docusaurus/init@next init shanhy-blog classic

三、本地启动

创建完了之后，命令行进入到这个 shanhy-blog 的文件夹里操作，如下：
安装初始化

yarn install

本地启动

yarn start

如果只是构建，使用命令：

yarn build

运行成功了之后呢，它会自动打开一个浏览器，然后访问的是http://localhost:3000，可以看到界面了。

---

其他

1、如果yarn install的速度很慢，可以尝试配置淘宝Registry，命令：

yarn config set registry  ttps://registry.npm.taobao.org -g

查看当前 Registry 的命令如下（默认为https://registry.yarnpkg.com）：

yarn config get registry

2、目录解释

/blog/ - 里面就是写博客文章的，都是 markdown 文件。
/docs/ - 里面就是写文档的，也都是 markdown 文件。
/src/ - 源代码文件夹，里面有一个 css 文件夹，然后它里边有个 custom.css 里面是写自定义的 css 代码的。
/src/pages - 里边放一些自定义的页面，使用 react 语法来写。
/static/ - 放静态资源文件，这些文件会出现在最后打包出来的静态网站里面，在它的根目录下边，它下边的 img 文件夹是放静态图片的。
/docusaurus.config.js - 这个是配置这个站点的。
/package.json - node.js 的工程配置文件。
/sidebar.js - 配置文档页面侧边栏，只有文档页面才有，用它来定义文档的目录结构。
另外呢，也可以自己创建一个 theme 文件夹，里边可以定义一些组件用来替换默认主题里面的一些组件。

---

（END）