博客整合Github Actions实现自动发布记录

博客网站结合git提供的快速博客实现，现记录提交文档时实现自动发布，并复制一份到自己的远程服务器，通过域名访问远程服务器进而访问博客

服务器操作

创建密钥

ssh-keygen -t rsa -b 4096

• 密钥文件保存位置可以修改，如果不想修改可以直接Enter，默认的文件保存路径在 ~/.ssh/ 文件夹下
• 命令会生成两个文件，分别为id_rsa.pub（公钥）和id_rsa（私钥）

开启ssh登录

• 复制公钥内内容到~/.ssh/authorized_keys文件中

cd ~/.ssh/
cp id_rsa.pub authorized_keys

• 修改文件访问权限

chmod 600 ~/.ssh/authorized_keys
chmod 600 ~/.ssh/id_rsa
chmod 644 ~/.ssh/id_rsa.pub

创建git仓库

mkdir -p /www/wwwroot/blog
cd /www/wwwroot/blog
git init

如果服务器还没有安装qit，需要先安装git

修改配置

git config --global --add safe.directory /www/wwwroot/blog

github操作

cat /root/.ssh/id_rsa.pub

github 项目添加配置

创建github账号访问令牌

• 点击头像 -> settings -> Developer Settings -> Personal access tokens -> Tokens(classic) -> 创建新的token
• 复制token保存

创建 github 项目访问令牌

• 打开博客项目
• 打开settings -> Secrets and variables -> Actions
• 创建ACCESS_TOKEN变量，值填上一步保存的github账号访问令牌
• 创建DEPLOY_KEY变量，值填写服务器私钥
• 创建SERVER_HOST变量，值填写服务器公网IP
• 创建SERVER_USERNAME变量，值填写服务器访问用户名
• 创建SERVER_PASSWORD变量，值填写服务器访问密码

博客

博客项目添加.github文件夹，在文件夹下创建一个yml文件，内容填写

# 工作流名称
name: Deploy blog

# 监听分支提交
on:
  push:
    branches:
      - master

# 执行的工作
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          persist-credentials: false

      # 设置使用的node
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "16.15.1"

      # 拉取依赖并编译
      - name: Install and Build
        run: |
          yarn install
          yarn docs:build
          
      # 将编译好的文件提交到服务器
      - name: Upload to Deploy Server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USERNAME }}
          password: ${{ secrets.SERVER_PASSWORD }}
          source: './dist/*'
          target: '/www/wwwroot/dist'
          overwrite: true

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: blog
          FOLDER: src/.vuepress/dist

以上配置需要根据项目调整node版本node-version的值以及本地编译后的路径source和要上传到服务器的路径target的值！