0成本搭建博客系统(二)

0成本搭建博客系统

---

0成本搭建博客系统(一)
0成本搭建博客系统(二)

---

背景

:::tip 痛点说明

1. 缺少功能健壮的博客框架
2. 博客程序完成之后 不能自动发布

:::

具体实现过程

:::note 前提条件

1. 熟悉了解 docusaurus.io
2. 熟悉了解 开源中国

:::

1. 创建 docusaurus 项目

1.1 创建项目

$ npx create-docusaurus@latest my-website classic --typescript

[SUCCESS] Created my-website.
[INFO] Inside that directory, you can run several commands:

`npm start`
Starts the development server.

`npm run build`
Bundles your website into static files for production.

`npm run serve`
Serves the built website locally.

`npm deploy`
Publishes the website to GitHub pages.

We recommend that you begin by typing:

`cd my-website`
`npm start`

Happy building awesome websites!

2. 托管代码到 Gitee 上面

2.1 创建自动化部署脚本

// 使用
const aliOssDeployPlus = require('ali-oss-deploy-plus')

const ossOpts = {
    bucket: process.env.OSS_BUCKET, // 桶名称
    region: process.env.OSS_REGION, // 区域
    accessKeyId: process.env.OSS_AK, // AK
    accessKeySecret: process.env.OSS_SK, // AS
    internal: false, // 默认内网传输
}
const proOpts = {
    projectPath: '', // oss 存放项目的路径
    currentProjectPath: 'build', // 当前发布项目的文件夹路径 ps: dist
    maxRetryTimes: 3, // 上传失败重试次数 默认 3
    maxConcurrency: 10, // 上传最大并发数 默认 100
}
const aliDeploy = new aliOssDeployPlus({
    ossOpts,
    proOpts
})

aliDeploy.start().then(r => {
    console.log("OK")
})

2.2 配置流水线

version: '1.0'
name: pipeline-20230725
displayName: 自动发布
triggers:
  trigger: auto
  push:
    branches:
      precise:
        - main
variables:
  global:
    - OSS_AK
    - OSS_SK
    - OSS_BUCKET
    - OSS_REGION
stages:
  - name: stage-ce8e396c
    displayName: 打包
    strategy: naturally
    trigger: auto
    executor: []
    steps:
      - step: build@nodejs
        name: build_nodejs
        displayName: Nodejs 构建
        nodeVersion: 17.8.0
        commands:
          - '# 设置NPM源，提升安装速度'
          - npm config set registry https://registry.npmmirror.com
          - ''
          - '# 执行编译命令'
          - npm install && npm run build
          - ''
          - '# 执行部署命令'
          - export OSS_BUCKET=${OSS_BUCKET}
          - export OSS_REGION=${OSS_REGION}
          - export OSS_AK=${OSS_AK}
          - export OSS_SK=${OSS_SK}
          - npm run deployOSS
        caches: []
        notify: []
        strategy:
          retry: '0'

配置变量

3. 观察流水线执行情况