Jekyllは人気の高い静的サイトジェネレーター（SSG）の一つで、ブログ、ポートフォリオ、個人サイトの作成といった用途で広く使用されています。この記事では、GitHub ActionsでJekyllサイトをビルドし、Kinstaの静的サイトホスティングで無料にてデプロイする方法をご説明します。

Kinstaの静的サイトホスティングでは、SSGやNode.js上で構築されたウェブアプリケーションから自動でサイトをビルドすることができます。Jekyll（Ruby上で構築）によって生成された静的サイトなど、他の静的コンテンツを提供するには別のアプローチが必要です。

前提条件

この説明は、以下の条件を満たしていることを想定しています。

  • JekyllとGitの経験がある
  • Jekyllのウェブサイトがローカルで稼働している

流れに沿って進むために、参照として、こちらのサンプルコードを使用することができます。

KinstaでJekyllウェブサイトをデプロイする

JekyllのウェブサイトをKinstaにデプロイするには、次のようなさまざまな方法があります。

  • Kinstaのアプリケーションホスティングを使用する
  • 以下のいずれかのパターンでKinstaの静的サイトホスティングを使用する
    • A) Kinstaにデプロイする前に、継続的インテグレーション/デプロイメント（CI/CD）でウェブサイトをビルドする
    • B) 静的ファイルのみを提供する

この記事では、Kinstaの静的サイトホスティングでJekyllをデプロイする両方の方法をご説明します。

A. Kinstaにデプロイする前にGitHub Actionsでサイトをビルドする

この方法では、GitHub Actions（GHA）ワークフローを使用して、特定のブランチにウェブサイトを構築（deploy）し、このブランチを使用して、生成された静的ファイルをKinstaにデプロイします。

これを行うには、GitHub Actionsを使うので、コードベースがGitHubリポジトリ（パブリックまたはプライベート）でホストされている必要があります。ただし、他のCI/CDツールを使っても同じ結果を得ることができます。

この方法の最も大きな利点は以下の通りです。

  • サイトに継続的インテグレーション (CI) プロセスを導入することができます。例えば、testやlintステージでコードを確認可能です。
  • リポジトリにプッシュするたびに、サイトが自動でビルドされます。プッシュする前にビルドする必要はありません。
  • CI/CDパイプラインの通過後にのみ、ウェブサイトの更新が実施されます。

ステップ

  1. Jekyllサイトのリポジトリルート上でターミナルを開く
  2. 新しいorphan（空）ブランチを作成（deploy）しリポジトリにプッシュ
git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deploy

このブランチにはファイルを追加しないでください。自動で生成されたJekyllの_siteフォルダの内容でGitHub Actionsワークフローによって入力されます。

  1. mainブランチをチェックアウトします。
git checkout main
  1. mainに.github/workflowsディレクトリを作成します。
  1. GHAを設定するには、.github/workflowsの下に以下の内容で新しいファイルgh-actions.ymlを作成します。
name: Deploy Jekyll
on:
  # The workflow runs only on pushes to the <main> branch
  push:
    branches: ["main"]
    workflow_dispatch:
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
      - name: Set up Jekyll
        run: gem install bundler && bundle install
      - name: Build site
        run: bundle exec jekyll build
        env:
          JEKYLL_ENV: production
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: compiled-site
          path: _site
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
# Commit and push the artifacts to the <deploy> branch
      - uses: actions/checkout@v4
        with:
          ref: deploy
      - name: Download artifacts
        uses: actions/download-artifact@v3
        with:
          name: compiled-site
          path: _site
      - name: Commit and push
      # Replace "<username>" with your GH org or user name
        run: |
          git config user.name "<username>"
          git config user.email "<username>@users.noreply.github.com"
          git pull origin deploy
          git add _site
          git commit -m "Auto generated from ${GITHUB_SHA::7}"
          git push
  1. コミットして、コードをmainブランチにプッシュします。

mainブランチにプッシュするたびに、GitHub Actionsのワークフローが以下のように実行されます。

  1. _siteの下に静的ファイルでJekyllのウェブサイトを構築
  2. _siteの内容で成果物を作成
  3. deployブランチをチェックアウト
  4. _siteの変更をdeployブランチにコミット

サイトに変更を加えるには、mainブランチに変更をプッシュするだけでOKです。

deployブランチに直接変更をプッシュしないようにしてください。意図しないプッシュを避けるために、GitHubでこのブランチをロックすることもできます。

以下のKinstaへのデプロイ方法もあわせてご参照ください。

B. ローカル環境でサイトをビルドしKinstaに直接デプロイする

上記の方法の代替案として、ローカルでサイトをビルドし（そしてローカルで_siteフォルダの中身に変更を加え）、その後リポジトリ（GitHub、GitLab、またはBitbucket上）にJekyllの_siteフォルダの内容をプッシュすることもできます。この方法では、プッシュのたびにGH Actionsや他のCI/CDツールを使ってビルドを行う必要がないので、以前の方法よりもはるかに簡単です。

この方法の欠点は、リポジトリのプッシュ時に、その前にサイトのコンテンツをビルドしなければならないことです。

この方法では_siteフォルダのコンテンツのみを使用し、Kinsta静的サイトホスティングで直接配信を行います。

ステップ

  1. リポジトリの.gitignoreファイルを開き、_siteの行を削除
  2. コミットし、_siteフォルダをリポジトリにプッシュ

ウェブサイトに変更を加える際には、リポジトリへのプッシュ前にJekyllでサイトをビルドすることをお忘れなく。

Kinstaの静的サイトホスティングでJekyllサイトをデプロイする

GitHub Actionsを使うパターン

GitHub Actionsワークフローを使用し、Kinstaの静的サイトホスティングでデプロイするには、次の手順を実行します。

  1. MyKinstaアカウントにログインするか、新規アカウントを作成
  2. MyKinstaの管理画面に移動
  3. 画面の左上にあるメニューアイコンをクリック
  4. サイドバーから、「静的サイト」をクリック
  5. 「静的サイトを追加」をクリック
  6. Gitサービスを認証する
  7. リポジトリを選択
  8. deployブランチをデフォルトブランチ （_siteフォルダのコンテンツがある場所）として選択
  9. 「コミットに際し自動でデプロイ」を選択して、リポジトリにプッシュするたびにサイトをデプロイ
  10. サイトに一意の「表示名」を追加し「続行」 をクリック
  11. ビルドの設定を調整
    1. ビルドコマンド：空白のまま
    2. Nodeのバージョン：そのまま（変更しない）
    3. 公開ディレクトリ：_site
  1. 「サイトを作成」をクリック

これでKinstaにサイトがデプロイされます。その後、必要に応じて独自ドメインや好みのSSL証明書を追加することができます。

ローカル環境でビルドを行うパターン

ローカル環境でのビルドを選択した場合は、同じ手順に従ってウェブサイトをデプロイします。デプロイ元のブランチを変更するだけです（ステップ8）。deployの代わりに、mainまたはお好みのブランチを使用してください。

まとめ

この記事では、Kinstaの静的サイトホスティングでJekyllのウェブサイトをデプロイする2つの方法をご紹介しました。

最初の方法は、CI/CDを使用してアプリケーションをビルドし、リポジトリの別のブランチに_siteフォルダのコンテンツを生成するものです。Kinstaの静的サイトホスティングでこの方法を使用する最大の利点は、次のとおりです。

  • CI/CDでは、サイトに多数のプロセスを追加することができる
  • 優れたホスティングサービスでサイトをデプロイし、最高のパフォーマンスでサービスを提供できる
  • リポジトリ非公開のためのGitHubプレミアムアカウントは不要（例えばGitHub Pagesを使用する場合のように）

2番目の方法では、ローカル環境でJekyllを構築し、_siteフォルダの内容をJekyllファイルの残りの部分と同じブランチにプッシュします。これは、他のGitプロバイダ（GitLabとBitbucket）のリポジトリで繰り返すことができ、それ以上の設定は必要ありません。最も簡単な方法ですが、リポジトリにプッシュするたびに事前のサイトのビルドが必要になるという不便さはあります。

これらの選択肢に加えて、KinstaのアプリケーションホスティングでJekyllサイトをデプロイすることもできます。これにより、さらなるホスティングの柔軟性や堅牢な機能が確保可能です。例えば、スケーラビリティを維持しながら、Dockerファイルを使用したカスタムデプロイメント、リアルタイムと履歴データを対象とした包括的な分析が利用できます。

Kinstaブログで静的サイトに関する各種記事をご覧ください。

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.