GitHub Pages と Next.js と GitHub Actions を使って個人サイトを公開するメモ。
GitHub Pages は使ったことがあるけど、GitHub Actions は使ったことがないので、最初から調べて使うことになる。

Next.js が何たるかもよくわかっていない部分が多いので、必要になったらそのときに調べる。

そもそも、GitHub Pages と Next.js と GitHub Actions で個人サイトを公開できるのか不明なので、挑戦になる。

GitHub の「Hub」の「H」が大文字だということを最近知った。

まずは GitHub Actions から。

GitHub Actions の公式ページはここ。
👉 Actions | GitHub

この公式ページの説明に沿って学習、実践を進めていく。

概要を知る

プッシュ、Issue、リリースなどのGitHubプラットフォームのイベントをトリガーとしてワークフローを起動しましょう。

今回、プッシュをしたらWebページをビルドして公開、ということをしようとしているけど、プッシュ以外にもトリガーを色々と設定できるようだ。

パブリックリポジトリ　無料　♡GitHubはオープンソースを支援します。

パブリックリポジトリなら無料のようだ。太っ腹。

個人サイトは元から公開なので、その中身も公開してしまった良いと思っている。なので、今回作る個人サイトもパブリックリポジトリで公開し、無料の恩恵にあずからさせていただきたい所存。

ページの一番したに行くと「ドキュメント」というリンクがあったので、次は、このリンク先のページで使い方を学ぶ。

GitHub Action とは何か

GitHub Actions のドキュメントである「GitHub Actions Documentation - GitHub Docs」このページから、GitHub Actions の使い方を把握していく。

ドキュメントのトップページの冒頭の説明はこうなっている。

Automate, customize, and execute your software development workflows right in your repository with GitHub Actions. You can discover, create, and share actions to perform any job you'd like, including CI/CD, and combine actions in a completely customized workflow.

GitHub Actionsを使用して、リポジトリ内でソフトウェア開発ワークフローを自動化、カスタマイズ、および実行します。 CIを含む、必要なジョブを実行するためのアクションを検出、作成、および共有できます

下がGoogle翻訳したもの。ビルドなどの処理を自動化できる、ということだろう。

クイックスタート

「Quickstart」という青いボタンがあるので、クイックスタートしてみる。

Add a GitHub Actions workflow to an existing repository in 5 minutes or less.

5分以下で既存のリポジトリに GitHub Actions を追加する、という内容になっているらしい。

このクイックスタートでは、既存のリポジトリに対して Super-Linter というリンターの実行のワークフローを追加する内容になっているようだ。

まずは、リポジトリに .github/workflows というディレクトリ（.github ディレクトリ内の workflow ディレクトリ）を追加し、この workflow ディレクトリの中に superlinter.yml というファイルを追加する、とある。

あくまで今回のクイックスタートとして Super-Linter を実行するワークフローを作るわけなので、superlinter.yml というファイル名は仕様として決まったものではなく、何らかの YAML ファイルであればワークフローとして認識される、ということだろうか。

superlinter.yml の内容

superlinter.yml のファイルの中身として、以下の内容をコピーせよ、とある。

name: Super-Linter

# Run this workflow every time a new commit pushed to your repository
on: push

jobs:
  # Set the job key. The key is displayed as the job name
  # when a job name is not provided
  super-lint:
    # Name the Job
    name: Lint code base
    # Set the type of machine to run on
    runs-on: ubuntu-latest

    steps:
      # Checks out a copy of your repository on the ubuntu-latest machine
      - name: Checkout code
        uses: actions/checkout@v2

      # Runs the Super-Linter action
      - name: Run Super-Linter
        uses: github/super-linter@v3
        env:
          DEFAULT_BRANCH: main
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

上から見ていき、なんとなく雰囲気を掴んでみる。

ワークフローの名前の指定

name: Super-Linter

ここはまあ、ワークフローの名前だろう。このファイル単位で指定している内容は「ワークフロー」っていう呼び方で合ってるんだろうか。

ワークフローを実行するタイミングの指定

# Run this workflow every time a new commit pushed to your repository
on: push

「pushされたとき」というワークフロー実行のタイミングの条件を設定しているように見える。コメントでも「あなたのリポジトリに新しいコミットがプッシュされるごとに、このワークフローを実行する」と書いてあるので、おそらく予想は合っている。

ここで「ワークフロー」という語を使用しているので、先程の呼び方の懸念は払拭された。

ジョブの指定

jobs:
  # Set the job key. The key is displayed as the job name
  # when a job name is not provided

この jobs: の中で、実際に実行する処理についての設定が書いてあるのだろう。

「ジョブのキーを設定する」とある。この中にプロパティとして「super-lint:」というキーが設定されているので、これがジョブのキーということになるのだろう。ということは「ジョブ」というのは複数設定できるということか。

ここで設定された複数のジョブは、同じタイミングですべて実行される、という認識で合っているのだろうか。

The key is displayed as the job name when a job name is not provided

もしジョブの名前が設定されていなければ、ここのキーの名前がジョブの名前として表示されるようだ。

# Name the Job
    name: Lint code base

これがその「ジョブの名前」というやつのようだ。

# Set the type of machine to run on
    runs-on: ubuntu-latest

ジョブを実行するマシンの種類をここで設定するようだ。ここの例では「ubuntu-latest」が設定されている。GitHub Actions として、ここに設定できるマシンの種類が決まっているのだろう。ここで指定できるマシンの種類については、あとで詳しく触れられる気がするので、今は深堀りしないでおく。

ジョブのステップの指定

 steps:

このプロパティの中にジョブで実行する処理をリスト（配列）として設定するようで、そのリストの各要素はオブジェクトのようだ。ここのプロパティが「steps」となっていることから、ここで指定する各処理の項目は「ステップ」と呼ぶのが適当そうだ。

      # Checks out a copy of your repository on the ubuntu-latest machine
      - name: Checkout code
        uses: actions/checkout@v2

1つ目のステップとして「ubuntu-latest マシンにリポジトリの内容をコピーをチェックアウトする」という内容を指定しているようだ。

ステップに名前をつけることができるようで「name」というプロパティでそれを設定している。

「uses」というプロパティで、実際に実行するステップの内容を指定しているようで、「actions/checkout@v2」というのが、リポジトリのコピーのチェックアウトを意味しているようだ。これも、使用できるものが仕様として決められている感じがする。

「actions」という表現があるので、1つのステップで実行する処理の単位は「アクション」と呼ぶべきなのだろう。つまり、ここでは「checkout@v2」というアクションを指定している。（そして、アクション名に「@v2」という名称が付いていることから察するに、アクションにもバージョンアップがあるのだろう、と想像する）

他にどのようなアクションが用意されているのかという部分はあとで詳しく触れそうなので、今はまだ深堀りしないでおく。

      # Runs the Super-Linter action
      - name: Run Super-Linter
        uses: github/super-linter@v3
        env:
          DEFAULT_BRANCH: main
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

2つ目のステップでは、Super-Linter を実行するアクションを指定しているようだ。

1つ目のステップには無い「env」というプロパティを設定していて、その中のオブジェクトに「DEFAULT_BRANCH」と「GITHUB_TOKEN」という2つのプロパティを設定している。

「DEFAULT_BRANCH」は、アクションを実行するブランチを指定しているんじゃないだろうか。

「GITHUB_TOKEN」の値では「${{ secrets.GITHUB_TOKEN }}」という表記がされているが、おそらくここにアクセストークンが展開されるのだろう。

以降、実際にリポジトリを作って、このクイックスタートの GitHub Actions の設定を実際に試してみる。