VuePress + GitHub Actions 自动化构建文档博客

本地新建项目:

# 新建一个 blog 文件夹
mkdir blog

# 进入blog
cd blog

# 初始化
npm init --yes

# 新建一个 markdown 文件
echo '# Hello VuePress!' > index.md

# 安装依赖
npm install -D vuepress

# 打开项目，在 package.json 里加一些脚本:
{
  "scripts": {
    "start": "vuepress dev",
    "build": "vuepress build",
  },
   "homepage": "https://github.com/anick-xs/blog"
}

# 添加 '.vuepress'文件夹，在文件夹下新建config.js
// config.js 内容
module.exports = {
    base: '/blog/'
}

github新建项目blog以及上传代码:

添加秘钥：

上图是储存秘密的环境变量的地方。环境变量的名字可以随便起，这里用的是ACCESS_TOKEN。如果你不用这个名字，后面脚本里的变量名也要跟着改。

设置actions：

这里选择的是node.js

替换这里的代码：

name: GitHub Actions blog
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Build and Deploy
        uses: JamesIves/github-pages-deploy-action@master
        env:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: .vuepress/dist
          BUILD_SCRIPT: npm install && npm run build

提交：