首页手记使用Docusaurus搭建个人网站

使用Docusaurus搭建个人网站

标签：

职场生活

第一次使用 Docusaurus 搭建我的个人网站

第一步安装 node 环境

安装 Node.js 16.14 或更高版本（可以通过执行 node -v 命令来查看当前所用的 Node。js 版本）
下载并安装 npm 包。本指南使用 npm 客户端命令行界面，该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端，请在终端窗口中运行 npm -v

第二步下载脚手架项目

在创建项目的目录下打开 windows 的 cmd 窗口,运行以下命令，等待系统自动下载生成项目文件完成;

npx create-docusaurus@latest my-website classic

下载完成后，项目目录结构如下:

my-website
├── blog
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

项目目录结构介绍

/blog/ - 包含博客的 Markdown 文件。如果你关闭了博客功能，则可以将此目录删除。你还可以通过设置 path 参数来改变此目录的名称。在博客功能指南文档中可以找到更多详细信息
/docs/ - 包含文档的 Markdown 文件。可在 sidebars.js 中自定义文档在侧边栏中的顺序。如果你关闭了文档功能，则可以删除该目录。你还可以通过设置 path 参数来改变此目录的名称。在文档功能指南中可以找到更多详细信息
/src/ - 非文档文件，例如独立页面（pages）或自定义的 React 组件。你不必严格地遵守将非文档文件放到这里，但是将它们集中在此目录下可以更轻松地进行管理，以便您需要进行某些格式校验或处理
- /src/pages - 此目录中的任何扩展名为 JSX/TSX/MDX 文件都将被转换为网站的独立页面(page)。可以在独立页面（pages）指南中找到更多详细信息
/static/ - 存放静态文件的目录。此处的所有内容都将被复制到最终的 build 目录的根目录下
/docusaurus.config.js - 包含站点配置的配置文件。与 Docusaurus 1 中的 siteConfig.js 文件等价
/package.json - Docusaurus 网站也是一个 React 应用程序。你可以在其中安装和使用所需的任何 npm 软件包
/sidebars.js - 生成文档时使用此文件来指定侧边栏中的文档顺序

第三步启动项目

使用 VSCode 打开项目，进入项目目录下，执行

npm run start

或者

yarn start

默认情况下，浏览器将打开 http://localhost:3000 地址。

第四步部署到 github 静态服务器

登录自己 github
创建一个 xxx(自己用户名).github.io 的仓库
修改本机电脑环境变量，添加一个用户变量，变量名为GIT_USER,值为自己 github 用户名,然后一直确定,退出,修改完成后需要重启电脑使环境变量生效
打开项目 docusaurus.config.js 文件,修改 config 下面的配置:
- 修改: url:修改为自己新建的仓库的地址(http://xxx(xxx为自己github用户名).github.io)
- 修改: organizationName:自己 github 用户名,
- 修改: projectName:xxx(xxx为自己github用户名).github.io(上面新建的仓库名)
- 修改: deploymentBranch: ‘gh-pages’,
执行以下命令，项目就会自动推送到你 github 新建的仓库上