第一次使用 Docusaurus 搭建我的個(gè)人網(wǎng)站

第一步 安裝 node 環(huán)境

• 安裝 Node.js 16.14 或更高版本（可以通過執(zhí)行 node -v 命令來查看當(dāng)前所用的 Node。js 版本）

• 下載并安裝 npm 包。本指南使用 npm 客戶端命令行界面，該界面默認(rèn)安裝在 Node.js。要檢查你是否安裝了 npm 客戶端，請?jiān)诮K端窗口中運(yùn)行 npm -v

第二步 下載腳手架項(xiàng)目

在創(chuàng)建項(xiàng)目的目錄下打開 windows 的 cmd 窗口,運(yùn)行以下命令，等待系統(tǒng)自動下載生成項(xiàng)目文件完成;

npx create-docusaurus@latest my-website classic

下載完成后，項(xiàng)目目錄結(jié)構(gòu)如下:

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

項(xiàng)目目錄結(jié)構(gòu)介紹

• /blog/ - 包含博客的 Markdown 文件。如果你關(guān)閉了博客功能，則可以將此目錄刪除。你還可以通過設(shè)置 path 參數(shù)來改變此目錄的名稱。在 博客功能指南 文檔中可以找到更多詳細(xì)信息

• /docs/ - 包含文檔的 Markdown 文件。可在 sidebars.js 中自定義文檔在側(cè)邊欄中的順序。如果你關(guān)閉了文檔功能，則可以刪除該目錄。你還可以通過設(shè)置 path 參數(shù)來改變此目錄的名稱。在 文檔功能指南 中可以找到更多詳細(xì)信息

• /src/ - 非文檔文件，例如獨(dú)立頁面（pages）或自定義的 React 組件。你不必嚴(yán)格地遵守將非文檔文件放到這里，但是將它們集中在此目錄下可以更輕松地進(jìn)行管理，以便您需要進(jìn)行某些格式校驗(yàn)或處理

  • /src/pages - 此目錄中的任何擴(kuò)展名為 JSX/TSX/MDX 文件都將被轉(zhuǎn)換為網(wǎng)站的獨(dú)立頁面(page)。 可以在 獨(dú)立頁面（pages）指南 中找到更多詳細(xì)信息

• /static/ - 存放靜態(tài)文件的目錄。此處的所有內(nèi)容都將被復(fù)制到最終的 build 目錄的根目錄下

• /docusaurus.config.js - 包含站點(diǎn)配置的配置文件。與 Docusaurus 1 中的 siteConfig.js 文件等價(jià)

• /package.json - Docusaurus 網(wǎng)站也是一個(gè) React 應(yīng)用程序。你可以在其中安裝和使用所需的任何 npm 軟件包

• /sidebars.js - 生成文檔時(shí)使用此文件來指定側(cè)邊欄中的文檔順序

第三步 啟動項(xiàng)目

使用 VSCode 打開項(xiàng)目，進(jìn)入項(xiàng)目目錄下，執(zhí)行

npm run start

或者

yarn start

默認(rèn)情況下，瀏覽器將打開 http://localhost:3000 地址。

第四步 部署到 github 靜態(tài)服務(wù)器

• 登錄自己 github
• 創(chuàng)建一個(gè) xxx(自己用戶名).github.io 的倉庫
• 修改本機(jī)電腦環(huán)境變量，添加一個(gè)用戶變量，變量名為GIT_USER,值為自己 github 用戶名,然后一直確定,退出,修改完成后需要重啟電腦使環(huán)境變量生效
• 打開項(xiàng)目 docusaurus.config.js 文件,修改 config 下面的配置:
  • 修改: url:修改為自己新建的倉庫的地址(http://xxx(xxx為自己github用戶名).github.io)
  • 修改: organizationName:自己 github 用戶名,
  • 修改: projectName:xxx(xxx為自己github用戶名).github.io(上面新建的倉庫名)
  • 修改: deploymentBranch: 'gh-pages',
• 執(zhí)行以下命令，項(xiàng)目就會自動推送到你 github 新建的倉庫上

yarn deploy

現(xiàn)在，你就可以通過https://xxx.github.io訪問你的網(wǎng)站了，你也可以把它分享給你的同學(xué)進(jìn)行訪問

本文由博客一文多發(fā)平臺 OpenWrite 發(fā)布！