Docusaurus快速搭建个人知识网站

发表于 更新于 分类于

因为目前博客的主题在文字排版上总感觉有一些问题，再加上想做一个个人的知识整合网站于是就开始折腾Docusaurus。

创建项目

  1. 新建一个GitHub仓库，使用codespace打开。
  2. 在命令行中初始化docusaurus 
    1
    2
    npx create-docusaurus@latest my-knowledge-repo classic --typescript
    npm run start
  3. 将文件移动到当前目录：mv my-knowledge-repo/* .
  4. 提交变更，初始化完成

Github Action + Github Pages

根据官方文档Triggering deployment with GitHub Actions操作。

docusaurus.config.ts

除了一些网站的基本描述配置之外还有一些值得注意的配置项：

上方navebar项目配置：Navbar items

代码高亮

1
2
3
4
5
6
7
8
9
10
11
12
13
prism: {
  additionalLanguages: [
    'java',
    'latex',
    'haskell',
    'matlab',
    'PHp',
    'bash',
    'diff',
    'json',
    'scss',
  ],
}

使用官方文档作为例子：

sidebars.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const sidebars: SidebarsConfig = {
  technical: [
    'technical/introduction',
    {
      label: 'Programming Language Pragmatics',
      type: 'category',
      link: {
        type: 'generated-index',
        title: 'Programming Language Pragmatics',
        description:
          "Programming Language Pragmatics笔记",
      },
      items:[
          'technical/programming-language-pragmatics/01',
          'technical/programming-language-pragmatics/02'
      ],
    }
  ],
  life: [{type: 'autogenerated', dirName: 'life'}],
};
docusaurus.config.ts
1
2
3
4
5
6
items: [
        {
          label: 'Technical',
          to: 'docs/technical',
        },
]

MDX语法

警告：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
:::note

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

:::tip

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

:::info

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

:::warning

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::

:::danger

Some **content** with _Markdown_ `syntax`. Check [this `api`](#).

:::