GitHub PagesとGitLab Pages それぞれで静的ファイルをデプロイしてみた

GitHub Pages

まずは通常の静的HTML、CSS、JavaScriptファイルをGitリポジトリのルート直下に配置します。
今回はちょっとした出来心で作っていたWordleという簡単な言葉を使ったゲームを使います。

GitHub Pagesはめちゃくちゃ簡単で、リポジトリのSettings＞Pagesで以下のように設定するだけです。

するとGitHub PagesのURLが表示されアクセスするとリポジトリの内容がそのままデプロイされた状態になります。
ちなみにURLは以下のようなフォーマットになっています。

https://{username}.github.io/{repository-name}

GitLab Pages

GitLab Pagesはもう少し複雑になります。
GitLab CIを使って、静的ファイルをデプロイします。

ルート直下配置のファイルはデプロイしにくいようなので、publicディレクトリを作成してそこにHTML、CSS、JavaScriptを配置します。

リポジトリのサイドメニューからDeploy＞Pagesにアクセスするとセットアップウィザードみたいなページにたどり着きます。
GitLab Pages/GitLab CIの設定がないとこうなるみたいです。

今回はマニュアルで設定してみます。
リポジトリの直下に.gitlab-ci.ymlファイルを設置して、以下のように記述します。

.gitlab-ci.yml

pages:
  script:
    - echo 'Deploying.'
  artifacts:
    paths:
      - public
  only:
    - main

pagesジョブのartifactsにpublicディレクトリを、実行対象のブランチをmain飲みにします。
これだけです。

これでmainブランチにプッシュすると自動的にジョブが開始されます。
あるいは、Build＞Pipelinesで「Run pipeline」を実行してください。

GitLab Pagesの設定画面でもありますが、「Use unique domain」にチェックをいれるとURLの一部がハッシュ化され、覚えられない形になります。
URLの基本フォーマットは以下の通りで、チェックを外している状態ではこれになります。
チェックを入れていてもハッシュ化されたURLにリダイレクトされます。

https://{username}.gitlab.io/{repository-name}

こちらはSelf Hostedでも動作することを確認しています。

GitHubでもGitLabと同じファイル構成にできないか

GitHubの場合、リポジトリを直接デプロイする場合はリポジトリ直下である/ (root)または/docsのみとのことです。
そのため、/docs以下にファイルを配置するなどの手法を提案している記事を見かけます。

publicディレクトリ以下をデプロイするにはGitHub Actionsを使って、publicディレクトリ以下をアップロードするというジョブを走らせる必要があるようです。
上部メニューのActionsへ行き、テンプレートの中から「Static HTML」を選択します。

.github/workflows/static.ymlのサンプルが表示されるので、stepsのpathを書き換えます。

        with:
          # Upload entire repository
          path: './public/'

それ以外はあまり気にせず後で理解しましょう。
コミットするとActionsでデプロイジョブが走ります。
同じくURLにアクセスすると見えるはずです。

念の為Settings＞PagesのSourceが「GitHub Actions」になっているかを確認しましょう。

つまり

GitHub Pages、GitLab Pagesともに、静的ファイルをデプロイするのは割と簡単にできそうです。
例えばVue.jsのプロジェクトをビルドして、ビルドした結果をデプロイするということも可能でしょう。ジョブの設定にはDockerコンテナイメージを指定する方法もあるので、それでビルドするということもできるみたいです。
今度やってみます。