以前、SPA(Gatsby.js)を GitHub Actionsを使って GitHub Pagesにデプロイする記事を投稿しました。

GatsbyとGitHub PagesとGitHub Actionsで技術系イベントサイトを無料・爆速で作る方法
https://qiita.com/uedayou/items/903f44a8dd251463ce59

こちらは、技術系イベントサイトを複数人数で編集することを前提としているため、特定のブランチ(記事内ではmasterブランチ)のpushをトリガーに自動的にデプロイされるものでした。

以前までは、このような何かのトリガーにより自動的に処理が実行されることしかできなったらしいですが、最近手動で処理を実行できるようになったそうです。

GitHub Actions: Manual triggers with workflow_dispatch
https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/

個人の小規模なアプリであれば、頻繁に更新することも少なく、自動ではなくこちらの任意のタイミングで実行できたほうがうれしいことがあると思います。

最近、作った鉄道路線当てクイズゲームWebアプリ「路線王」がまさにそんなアプリだったので、「workflow_dispatch」により手動でデプロイするようにしてみました。

路線王については、別の記事を作成していますので、よかったら見てみてください。

鉄道オープンデータ使ってクイズゲーム作りました
https://qiita.com/uedayou/items/4020d1daa92051fb2209

手動でのデプロイ方法

デプロイ準備

基本的に自動デプロイするときの設定と同じです。

GatsbyとGitHub PagesとGitHub Actionsで技術系イベントサイトを無料・爆速で作る方法
https://qiita.com/uedayou/items/903f44a8dd251463ce59

の以下の作業をあらかじめ行っておいてください。

1. サイト公開
2. 秘密鍵・公開鍵作成
3. 公開鍵を登録
4. 秘密鍵を登録

その後、.github/workflows/gh-pages.yml を作成してリポジトリにpushします。

name: github pages

on:
  workflow_dispatch:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@v2

    - name: build
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'

    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
    - name: Install
      run: npm ci

    - name: Build
      run: npm run build

    - name: deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        publish_dir: ./dist

※ https://github.com/uedayou/rosenoh/blob/master/.github/workflows/gh-pages.yml より
※ run, publish_dir 等はプロジェクトに応じて書き換えてください、Vue.js ならそのまま使えると思います。
※ React なら publish_dir: ./build としてください。

特定のブランチのpushをトリガーに自動デプロイしたい場合は

on:
  workflow_dispatch:
    branches:
      - master

の部分を

on:
  push:
    branches:
      - master

とすれば良いようです。

デプロイ実行

このままだとGitHub Pages にはビルドされないので、GitHubのリポジトリページからデプロイされるように操作します。

まず、「Actions」タブを開きます。

次に、「Workflows > github pages」を開きます。

「Run workflow」をクリックします。

最後に「Run workflowボタン」を押すと、GitHub Actions が実行できます。

路線王 のように頻繁に更新しないものであれば、workflow_dispatchトリガで手動で実行にされるようにしておいたほうがよいかもしれません。