跳到主要内容

Docusaurus 安装

构建环境​

Docusaurus 依赖 Node. js 和 npm 环境： 安装nodejs和npm

安装 Docusaurus​

1.开始安装

bash
npx create-docusaurus@latest my-website classic
  • my-website ：即将创建的项目目录名，可以修改
  • classic：使用经典模板。目前唯一的模板，不可修改。
tips

Docusaurus 是一个项目，所谓安装，是下载项目到本地。

2.选择语言

根据偏好选择 JavaScript 或 TypeScript。

zxzsk@debian ~/tmp> npx create-docusaurus@latest my-website classic
? Which language do you want to use? › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript

3.安装成功



✔ Which language do you want to use? › JavaScript
[INFO] Creating new Docusaurus project...
[INFO] Installing dependencies with npm...
[SUCCESS] Created my-website.
[INFO] Inside that directory, you can run several commands:

  `npm start`
    Starts the development server.

  `npm run build`
    Bundles your website into static files for production.

  `npm run serve`
    Serves the built website locally.

  `npm run deploy`
    Publishes the website to GitHub pages.

We recommend that you begin by typing:

  `cd my-website`
  `npm start`

Happy building awesome websites!



4.进入项目


bash
cd my-website


启动预览​


1.启动预览


运行 npm run start 启动预览，在浏览器中访问 http://localhost:3000/


zxzsk@debian ~/t/my-website> npm run start

> my-website@0.0.0 start
> docusaurus start

[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at: http://localhost:3000/

✔ Client
  Compiled successfully in 15.24s

client (webpack 5.101.3) compiled successfully



网站长这样，可以点击 Tutorial 和 Blog 查看已有文章。




文章位于 项目根目录/docs/和 项目根目录/blog/ ，以 .md存档。若要修改网页文章的内容，只需修改对应的 .md文档。


项目结构​


以下是项目根目录的结构，最重要的是 blog 和 docs 目录，在这里管理网站的文章，可进行添加、修改、删除。


bash
zxzsk@debian ~/t/my-website> lsd --tree --depth 2
.
├──  blog                 # 编写博客及配置博主信息
│   ├──  2019-05-28-first-blog-post.md
│   ├──  2021-08-01-mdx-blog-post.mdx
│   ├──  2021-08-26-welcome
│   ├──  authors.yml
│   └──  tags.yml
├──  docs                 # 编写文档
│   ├──  intro.md
│   ├──  tutorial-basics
│   └──  tutorial-extras
├──  docusaurus.config.js 	# 网站的配置文件：设置logo，导航栏，启用/禁用组件等。
├──  node_modules         	# 存放项目所有依赖包
│ ├──  @docusaurus    		  # Docusaurus 核心模块
│ ├──  react          		  # React 库
│ └──  webpack        		  # 打包工具
├──  package-lock.json
├──  package.json       # 项目依赖与脚本
├──  README.md
├──  sidebars.js          # 管理文档（docs）的侧边栏
├── 󱧼 src                  # 对项目进行二次开发
│   ├──  components         # 自定义组件
│   ├──  css                # 自定义css样式
│   └──  pages              # 自定义自定义页面
└──  static               # 管理网站的图片、视频、字体等静态文件
    └──  img


tips
Docusaurus 允许文章使用 .md 或 .mdx保存，我觉得使用 .md 保存为好，因为大多数 Markdown 编辑器对 .mdx 不友好。


构建网站​


运行命令：


npm
npm run build


会在项目根目录下生成 build 目录，此目录包含了网站的所有页面和资源。将 build 目录上传到服务器，并使用 Nginx 部署，让所有人均可通过互联网访问您的网站。


更新 Docusaurus​


每次启用预览时会检测 docusaurus 更新，如果有更新会在终端输出提示：




复制并运行提示中的 npm i ... ，完成更新后使用 npx docusaurs --version 查看版本。