Day241/300 Docusaurus+GitHub Pages+Github Actions 自动部署博客

（一）需求

我想搭一个自己的博客网站。

（二）方案

1、思路

• 先实现手动打包后，能后发布到GitHub Pages；
• Github Actions 实现提交代码CICD 自动化部署；

2、用的技术

• Docusaurus
• Markdown
• GitHub Pages
• Github Token
• Github Actions

3、手动安装实现步骤

安装步骤Docusaurus官网有

https://www.docusaurus.cn/docs/installation

（1）安装脚手架

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 - 生成文档时使用此文件来指定侧边栏中的文档顺序

（2）本地启动命令

cd my-website
npm run start

（3）配置文件

这四个文件不能错。

url: 'https://iguoxing.github.io',
baseUrl: '/iguoxing/',
organizationName: 'iguoxing', // Usually your GitHub org/user name.
projectName: 'iguoxing.github.io', // Usually your repo name.

（4）本地打包

npm run build

（5）手动发布命令

GIT_USER=iguoxing USE_SSH=true yarn deploy

4、自动部署实现步骤

（1）新建gh-pages分支

（2）根目录建立.github/workflows/documentation.yml文件

文件配置如下

# Copyright 2022 zhaoguoxing
# 
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
# 
#     http://www.apache.org/licenses/LICENSE-2.0
# 
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
name: Deploy Arden Github pages
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@main
      with:
        persist-credentials: false
    - name: Install and Build
      run: |
        npm install
        npm run-script build 
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build
        BUILD_SCRIPT: npm install && npm run build

（3）配置GitHub AccessToken

https://docs.github.com/cn/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

（4）提交代码后，就能实现了

这是我实现的效果；
https://iguoxing.github.io/iguoxing/

5、记录卡住我的几个问题

（1）[Docusaurus Error] Running git push command failed. Does the GitHub user account you are using have push access to the repository?

organizationName 名称用 GitHub用户名；

（2）This workflow has no runs yet.

修改分支名为main

参考链接

https://juejin.cn/post/6936846407051509774

写在最后的话

学习路上，常常会懈怠

《有想学技术需要监督的同学嘛~》
https://mp.weixin.qq.com/s/FyuddlwRY7DsHUejCjiVug