个人知识库的搭建 - 基于 Docusaurus

续上一篇文章 为什么你需要一个知识库，本篇文章将基于 Docusaurus 框架，对知识库的搭建展开详细讲解。

在本文开始之前，请先确保你准备就绪：

• 科学上网的条件
• 随机应变的能力
• 一点儿英语基础

配置本地环境#

安装 Node.js#

访问 Node.js 官网，下载并安装 Node.js。

VS Code 的安装配置#

我们用 VS Code 作为本地编辑器，用于修改网站框架、编写文章。

首先，到 VS Code 官网 下载安装 VS Code。

软件安装完成后，我们可以选装以下两个插件：

安装插件后，可能需要按提示重启 VS Code。

更加详细的配置说明可以参考 VS Code 生产力指南 - 环境配置 这篇文章。

安装 Docusaurus 框架#

切换到需要建立网站项目的目录。

例如：我想要在电脑的 D 盘下建立一个名为 wiki 的文件夹，作为这个知识库项目。那么请在 VS Code 内选择 文件 - 打开文件夹，点击 D 盘，并点击 选择文件夹

使用 npx 初始化网站：

例如，如果我的网站项目文件夹的名字为 wiki，那就用 wiki 替换掉 [name]，而根据 官方文档， [template] 指的是网站模板的主题，这里我们将其替换为 classic 即可。所以此处我们执行的命令为：

我们在 VS Code 内使用快捷键 Ctrl + ` 打开终端，把上面的那行代码粘贴进来并敲击回车，耐心等待加载完成。

当加载完成后，我们在终端内使用命令切换到网站文件夹目录：

其中，[name] 替换为你网站项目文件夹的名字，例如在上一步我们使用的是 wiki。

接着，执行以下命令：

执行网站的本地部署。等待部署进度完成后，它会自动在浏览器打开 localhost:3000 页面，如果一切顺利，你可以看到网站已经成功生成。

将网站部署至云端#

上一个步骤，我们成功生成了网站，但它只是被部署在了本地，从互联网上是无法访问到这个站点的。我们需要将网站部署至云服务器，让别的用户也可以从互联网任意访问。

注册 GitHub 账户#

在 GitHub 官网 注册 GitHub 账户。

安装 Git#

我们从 Git 官网 下载 Git 软件，并完成安装。

重启 VS Code，召出终端，粘贴以下的命令初始化 Git：

此处需要把 "username" 替换为你的 Git 提交用户名，推荐与刚刚在 GitHub 注册的账户名一致，例如我将其替换为 linyuxuanlin。"[email protected]" 同理，替换为 GitHub 注册的邮箱即可。

更加详细的配置说明可以参考 Git 学习笔记 这篇文章。

在 VS Code 内配置项目仓库#

为了接下来能推送到 GitHub 服务器上，我们需要在 VS Code 内配置项目 Git 仓库，并上传到 GitHub 上。

在 VS Code 内使用快捷键 Ctrl + Shift + G 切换到源代码管理界面，初始化项目 Git 仓库，并作出首次提交。

随后，使用快捷键 Ctrl + Alt + S 将本地 Git 仓库推送到 GitHub（按提示登录 GitHub 账户即可）。

使用 Vercel 云端部署网站#

此处 Vercel 的功能，相当于 GitHub Action + GitHub Pages，即自动持续部署 + 静态网站展示。选择 Vercel 是因为其生成的静态网站，国内访问速度相比 GitHub Pages 会快很多。

首先，直接访问 Vercel 的 GitHub 登录页面 ，使用 GitHub 账户注册 Vercel 账户。

完成之后，点击网页上的 New Project，导入 GitHub 响应的仓库（例如我们之前建立的 wiki 仓库），此处可能需要根据提示，再进行一次 GitHub 的登录。导入之后，一路点击 Next 继续，很快网站就能部署成功了。

总结#

这篇文章我们实现了基于 Docusaurus 的知识库的本地和云端部署。本文的过程中如果遇到问题，可以联系我 微信 反馈。在下一篇文章【待更新】中，我将对个性化的配置做详细的讲解。

参考与致谢#

• Docs·Docusaurus

文章作者：Power Lin
原文地址：https://wiki-power.com
版权声明：文章采用 CC BY-NC-SA 4.0 协议，转载请注明出处。