搭建docusaurus博客

搭建docusaurus博客:

docusaurus是facebook的开源的用于简化构建,部署,和维护的博客网站.

• 特点:
  • 快速启动
  • 支持本地化
  • 页面可自定义

• 安装要求:

Node >= 8.x,官方推荐同时安装Yarn,或许是因为yarn安装比较方便吧,如果Yarn安装版本要 >= 1.5

Node安装地址: https://nodejs.org/en/download/

Yarn安装地址: https://yarnpkg.com/en/docs/install

• 安装

1 创建项目根目录

2 在项目根目录执行命令 npx docusaurus-init .

　　注意docusaurus-init后面的英文句号,代表本路径的意思.

• docusaurus项目结构介绍

docs-examples-from-docusaurus:显示文档模板,里面是页面显示的文档内容
website:显示站点内容及配置
　　blog-examples-from-docusaurus:博客内容模板文件夹,里面放置你的博客
　　core/Footer.js: 定义页脚显示内容
　　i18n:本地化配置
　　pages/en/index.js:首页显示内容
　　static:页面静态文件路径
　　sidebars.json: 定义显示docs内容
　　siteConfig.js: 网站核心配置文件　　

• 修改文件目录

　　项目初始化时,为了便于识别标明了模板目录,但是实际使用时需要修改这些模板目录名称

docs-examples-from-docusaurus -> docs 需要将blog-examples-from-docusaurus改名为docs

blog-examples-from-docusaurus -> blog 需要将blog-examples-from-docusaurus改名为blog

• 使用示例
• 1. 增加首页显示文档

　　在docs目录下增加newfile.md文件

---
    id: newfileid
    title: 我是一个新文件
    ---

新文件内容,从前有座山..

• 2.在sidebar.json中配置自己的newfile.md

{
    "docs": {
    "Docusaurus": ["doc1"],
    "First Category": ["doc2"],
    "Second Category": ["doc3"],
    "我是新文件": ["newfileid"]
      },
      "docs-other": {
    "First Category": ["doc4", "doc5"]
      }
}

• 3.在website目录下启动项目即可

npm start

• 恭喜你,有了自己的博客网站

• 参考资料:

　　　　https://docusaurus.io/docs/en/installation