在此之前,博客站点一直是由 Hugo 生成,借助 Github WebHook 自动布署在 VPS 上面。

最近将博客从 Hugo 转向了 Nextjs 。由于不想在服务器上安装 Nodejs ,便研究了一下 Github Action,借助 Github Action 来实现持续布布署功能。

Github Action

.github/workfolws 下面添加 ci.yaml 文件,创建一个工作流程。代码如下:

name: CI
on:
  push:
    branches:
      - master
    paths-ignore:
      - README.md
      - LICENSE
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16]
    steps:
      - uses: actions/[email protected]
      - uses: pnpm/action-[email protected]
        with:
          version: 6.32.0
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-[email protected]
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'
      - run: |
          pnpm install
          pnpm run export
      - name: deploy to server
        uses: AEnterprise/rsync-[email protected]
        env:
          DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
          ARGS: "-avz --exclude='media/*' --exclude='images/*'  --delete"
          SERVER_PORT:  ${{ secrets.SERVER_PORT }}
          FOLDER: "./out/"
          SERVER_IP: ${{ secrets.SERVER_IP }}
          USERNAME: ${{ secrets.USERNAME }}
          SERVER_DESTINATION: ${{ secrets.SERVER_DESTINATION }}

      - name: Pushes to another repository
        uses: cpina/github-action-push-to-another-[email protected]
        env:
          API_TOKEN_GITHUB: ${{ secrets.TOKEN }}
        with:
          source-directory: out/
          destination-github-username: 'xxxro'
          destination-repository-name: 'xxxro.github.io'
          commit-message: stuff
          user-email: [email protected]
          target-branch: main

这样,每次 push 到 master 分支就会触发这个工作流程。

  1. 选择系统环境 ubuntu-latest
  2. 拉取代码,配置运行环境。
  3. 运行编译命令,完成编译工作。
  4. 将编译结果发布到相关平台。

借助丰富的 Action ,我们可以快速完成相关工作。

借助 jsDelivr 加速图片资源

jsDelivr CDN 支持 Github 并且在中国有着不错的访问速度。

load any GitHub release, commit, or branch
https://cdn.jsdelivr.net/gh/user/[email protected]/file

首先对 md 里面 img 使用 Image 封装。

通过 next/iamgecustom loader 功能实现对图片 url 的统一处理。

// image-loader.config.js
import { imageLoader } from 'next-image-loader/build/image-loader'

const PUBLIC_CDN_BASE_URL = "https://cdn.jsdelivr.net/gh/user/[email protected]"

// write self-define a custom loader
// (resolverProps: { src: string; width: number; quality?: number }) => string
imageLoader.loader = ({ src, width, quality }) => {
  if (src.startsWith('/')) {
    return `${PUBLIC_CDN_BASE_URL}${src}`
  }
  return src
}

然后在上面的 Github Action 流程中将图片资源相关的仓库按需求更新即可。

相关话题