搭建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