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