Github Actionを使用してhexoの自動ビルドを行う

前言#

前一段时间から hexo から WordPress に移行し、1 年後に再び hexo に戻りました。しかし、hexo をサーバーにプッシュする手順があまりにも煩雑だったため、このステップを自動化するワークフローを作成しました。

Github Action#

GitHub Actions は、継続的インテグレーションと継続的デリバリーのプラットフォームで、コンパイル、テスト、デプロイのプロセスを自動化できます。

GitHub は、ワークフローを実行するための Linux、Windows、macOS の仮想マシンを提供しており、または自分のデータセンターやクラウドインフラストラクチャで自己ホストのランナーをホストすることもできます。

優点#

多ドメイン・多サイトのデプロイが可能
GitHub への接続ができないという問題が発生しない
自動デプロイが完了する
複雑なコマンドを使用する必要がなくなる

ワークフロー#

ここで私のワークフローを共有します。普段、記事を書き終えた後、リポジトリにコミットすると自動的にビルド・更新されます。ワークフローをデプロイした後は、GitHub Pages、netlify、vercel、cloudflare pages などを使用して、多ライン・多ドメインを実現できます。

前置#

まず、新しいリポジトリ A を作成し、後で hexo が生成するウェブページファイルのストレージリポジトリとして使用します。形式は xxx.github.io とし、次にリポジトリ B を新規作成します（プライベートに変更することをお勧めします）。ブログのソースコードをリポジトリにアップロードし、Actions を見つけて「set up a workflow yourself」をクリックして新しいワークフローを作成します。
action
以下のコードを入力します:

name: 自動デプロイ
# mainブランチに変更がプッシュされたときにActionを起動
on:
  push:
    branches:
      - main
      # 自分のリポジトリの状況に応じて変更（ソースコードがあるブランチを記入）
  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: ブランチを確認
        uses: actions/checkout@v2
        with:
          ref: main
          fetch-depth: 0
      - name: ローカルファイルのタイムスタンプを同期
        run: |
          git ls-files -z | while read -d '' path; do touch -d $(git log -1 --format="@%ct" "$path") "$path"; done

      - name: Nodeをインストール
        uses: actions/setup-node@v1
        with:
          node-version: "16.x"

      - name: Hexoをインストール
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g
  
      - name: Hexoをキャッシュ
        id: cache-npm
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: 依存関係をインストール
        if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
        run: |
          npm install gulp-cli -g # gulpをグローバルにインストール
          npm install --save

      - name: 静的ファイルを生成
        run: |
          hexo clean
          hexo generate
          gulp

  

      - name: Githubにデプロイ
        run: |
          cd ./public
          git init
          git config --global user.name "xxx"
          git config --global user.email "xxx@xxx.com"
          git add .
          git commit -m '${{ github.event.head_commit.message }}'
          git push --force --all https://user:token@github.com/user/user.github.io

注意！⚠️ git config --global user.name "xxx" の xxx をあなたの GitHub ユーザー名（ニックネームではない）に置き換えてください。
注意！⚠️ git config --global user.email "xxx@xxx.com" のxxx@xxx.comをあなたの GitHub 主メールアドレスに置き換えてください。
注意！⚠️ git push --force --all https://user:token@github.com/user/user.github.io の最初の user をあなたのユーザー名に、token をあなたの GitHub トークンに置き換えてください。トークンがない場合は、`設定` ページで作成してください。
さらに、github.com の後のuserをあなたのユーザー名に変更し、後のuser.github.ioをあなたがブログウェブページを保存するリポジトリ名に変更してください。

附加#

除外項目の追加#

インストールコマンドで使用できる内容は、必要なソースコードには含まれていないため、これらの内容を除外項目に追加する必要があります。これにより、GitHub にアップロードされないことを示し、提出するファイルの量を大幅に減らし、提出速度を向上させることができます。.gitignoreを開き（存在しない場合は作成）、以下の内容を入力します：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/butterfly/.git

最後の行は実際の.git の位置に変更する必要があります。私は butterfly テーマを使用しているため、異なるテーマのフォルダ名は異なります！
butterfly テーマでない場合は、最後の行の内容を現在使用しているテーマに置き換えることを忘れないでください。

デプロイ状況の確認#

GitHub にソースコードを保存しているプライベートリポジトリを開き、アクションを見つけます。

先ほどのコミット記録に基づいて、対応するデプロイログを見つけ、デプロイをクリックしてデプロイ状況を確認します。

すべてにチェックが入っていれば、おめでとうございます。これで自動デプロイを楽しむことができます。

この記事は Mix Space によって xLog に同期更新されました。原始リンクは https://blog.alcex.cn/posts/Hexo/2023429a1