解锁互联网知识分享新风尚：打造动态自动化的 Vuepress 博客系统

2023-09-06 01:09:55

前言

在信息时代，知识的分享与传播变得前所未有地重要。博客作为一种便捷、高效的知识分享方式，受到越来越多的人青睐。而对于技术博主来说，使用 Vuepress 搭建个人博客无疑是明智之选。Vuepress 凭借其简洁优雅的界面、强大的扩展性和丰富的主题，深受开发者的喜爱。

然而，手动构建和部署 Vuepress 博客的过程往往繁琐且耗时。为了简化这一流程，越来越多的开发者开始使用 Github Actions 来实现博客的自动构建和部署。Github Actions 是一款强大的自动化工具，允许您在 Github 上创建和运行自定义工作流，以便在代码发生更改时自动执行一系列任务。

自动化构建 Vuepress 博客

在 Github Actions 中创建工作流时，您可以使用各种各样的操作来完成构建 Vuepress 博客所需的任务。例如，您可以使用 actions/checkout 操作来检出仓库代码，使用 actions/setup-node 操作来安装 Node.js 环境，以及使用 vuepress/vuepress-action 操作来构建 Vuepress 博客。

name: Build Vuepress Blog

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build

上述工作流配置将自动在每次推送代码到 main 分支时触发构建 Vuepress 博客的任务。在任务中，系统首先检出仓库代码，然后安装 Node.js 环境，再安装 Vuepress 博客所需的依赖项，最后运行 npm run build 命令来构建 Vuepress 博客。

自动部署到 Gitee 和 Giteepage

除了自动构建 Vuepress 博客之外，您还可以使用 Github Actions 将构建结果自动部署到 Gitee 和 Giteepage 上。

name: Deploy Vuepress Blog to Gitee and Giteepage

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - run: npm install
      - run: npm run build
      - uses: crazychen/gitee-action@v1
        with:
          ACCESS_TOKEN: ${{ secrets.GITEE_ACCESS_TOKEN }}
          REPOSITORY: ${{ github.repository }}
          BRANCH: gh-pages
          FOLDER: docs/.vuepress/dist

上述工作流配置将自动在每次推送代码到 main 分支时触发部署 Vuepress 博客的任务。在任务中，系统首先检出仓库代码，然后安装 Node.js 环境，再安装 Vuepress 博客所需的依赖项，最后运行 npm run build 命令来构建 Vuepress 博客。接着，系统会将构建结果上传到 Gitee 上的 gh-pages 分支，并更新 Giteepage。