关于javascript:Day-75100-DocusaurusGitHub-PagesGithub-Actions-自动部署博客

（一）需要

我想搭一个本人的博客网站。

（二）计划

1、思路

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

2、用的技术

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

3、手动装置实现步骤

装置步骤 Docusaurus 官网有

https://www.docusaurus.cn/doc…

（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/au…

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

这是我实现的成果；
https://iguoxing.github.io/ig…

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/693684…

写在最初的话

学习路上，经常会懈怠

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