Hugoは人気のあるオープンソースの静的サイトジェネレーター（SSG） で、 ウェブサイトを迅速かつ効率的に構築、管理できるように設計されています。ブログ、ポートフォリオ、そして動的なデータを必要としないあらゆる形式のウェブサイトを作成するのに使うことができます。

Hugoを使用してサイトを構築するならば、当然ながら、多くの人に見てもらえるように公開したいと思うはずです。そこでKinstaの静的サイトホスティングの出番です。

Kinstaの静的サイトホスティング

Kinstaの静的サイトホスティングは、静的サイトに特化した無料サービスです。動的に変化しないHTML、CSS、JavaScriptファイルを事前に構築して提供します。Gitサービス（BitBucket、GitHub、またはGitLab）でホストされているリポジトリをKinstaアカウントに接続し、静的サイトファイルをインターネット上にデプロイすることができます。

Kinstaの静的サイトホスティングでは、Node.jsを土台としたSSGからサイトを自動で構築することができますが、プログラミング言語Go（Golang）で書かれたHugoのような他の選択肢については、別のアプローチを用いる必要があります。

この記事では、Kinstaの静的サイトホスティングを使って、HugoサイトをKinstaに無料でデプロイする方法をご紹介します。

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

HugoサイトをKinstaの静的サイトホスティングにデプロイするには、3つの方法があります。

  1. 継続的インテグレーションと継続的デプロイメント（CI/CD）を使用してウェブサイトを構築し、デプロイする
  2. hugo-bin開発者依存関係を利用する
  3. ローカルでビルドした静的ファイルを配信する

この記事では、これらすべてを扱います。

前提条件

この解説に沿って作業を進めるには、以下のものが必要です。

  • HugoとGitの使用経験
  • ローカルで稼働するHugoサイト

CircleCIでサイトを構築しKinstaにデプロイする

最初の方法では、CI/CDツールとしてCircleCIを使ってみます。この方法では、Hugoサイトをdeployという新しいブランチにビルドするCircleCIワークフローを作成し、このブランチから静的ファイルをデプロイするようにKinstaで設定を行います。

CI/CDを使用する利点

この方法では、Gitリポジトリにプッシュする前にローカルでサイトをビルドする必要がなくなります。通常、KinstaはNode.jsベースのSSGを用いたサイト構築プロセスをサポートしていますが、Hugoのような他の種類のSSGの場合は、ワークフローを使用しサイト構築プロセスを自動で処理できます。

さらに、CI/CD設定ファイルに他のジョブを追加することもできます。例えば、コードのlintやテストを行うことができます。また、CI/CDパイプラインが正常に完了した場合にのみ、デプロイが実行されるように流れを指定することにもなります。

ステップ 1. 設定ファイルの作成

Hugoプロジェクトのルートディレクトリに.circleciフォルダを作成することから始めます。このフォルダの中に、ワークフローの設定を定義するconfig.ymlファイルを作成します。

ステップ 2. Gitリポジトリにコードをプッシュする

お好みの Gitサービスを使ってGitリポジトリを作成し、コードをリポジトリにプッシュします。

ステップ 3. 空ブランチの作成

次に、deployという空のブランチを作成し、そこにデプロイ用の静的ファイルをプッシュします。プロジェクトのターミナルで次のコマンドを実行してください。

git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deploy

このブランチにはファイルを追加しないでください。CircleCIワークフローによって、Hugoが生成したpublicフォルダのコンテンツが自動で配置されます。

ステップ 4. CircleCIアカウントの作成

CircleCIのウェブサイトにアクセスし、まだアカウントを持っていない場合はアカウントを作成してください。お好きなGitサービスを使って新規登録することで、追加設定なしで簡単にリポジトリにアクセスできるようになります。

ステップ 5. リポジトリの設定

ログイン後、CircleCIダッシュボードに移動し、左サイドバーの「Projects」をクリックし、設定したいリポジトリを選択します。CircleCIが自動的に設定ファイルを検出します。

CircleCIでリポジトリを設定する
CircleCIでリポジトリを設定する

「Set Up Project」ボタンをクリックして、CircleCIにコードベースへのアクセスを許可し、コード変更時にワークフローを実行するようにします。

ステップ6. CircleCI設定の定義

これでCircleCI設定ファイルが作成されました。内容をビルドしてみましょう。デフォルトのブランチ（deployブランチではない）であることを確認し、CircleCIのバージョンを定義することから始めます。現在のバージョンは 2.1です。

version: 2.1

ステップ 7. エクゼキュータの定義

これはHugoプロジェクトなので、ジョブを実行するためのエクゼキュータを定義する必要があります。ジョブごとに定義する必要がないように、hugo-executorを定義します。このエクゼキュータにより、Dockerイメージ（cibuilds/hugo:latest）を使った、Hugoサイト構築の一貫した環境が得られます。

executors:
  hugo-executor:
    docker:
      - image: cibuilds/hugo:latest

ステップ8. ジョブの定義

次に、buildとpush buildという2つのジョブを定義します。これらが、各ジョブで実行するステップを指定することになります。

jobs:
  build:
    executor: hugo-executor

  push build:
    executor: hugo-executor

ビルドジョブ

このジョブはHugoサイトを構築し、生成された静的ファイルを一時的にワークスペースに保存するものです。こうすることで、後でpush buildジョブを扱う際にアクセスできるようになります。

build:
  executor: hugo-executor
  steps:
    - checkout

    - run:
        name: Update theme
        command: git submodule update --init --recursive

    - run:
        name: Build Hugo site
        command: hugo --destination=workspace/public

    # Persist the 'build' directory to the workspace
    - persist_to_workspace:
        root: workspace
        paths:
          - public

上のジョブでは、先に定義したhugo-executorエグゼキュータを使うことを指定しています。そして、以下にある4つの主要なステップを実行します。

  • checkout：GitHubリポジトリからプロジェクトのソースコードをチェックアウトします。
  • Update theme：Gitサブモジュールを初期化して更新し（もしあれば）、Hugoテーマが最新であることを確認します。これは、HugoサイトがGitHubですでに公開されているテーマの大きなファイルをプッシュする代わりに、Gitmodulesを使ってテーマを参照する場合に便利です。
  • Build Hugo site：Hugoサイトを構築し、保存先フォルダをworkspace/publicに指定します。
  • persist_to_workspace：publicディレクトリ（Hugoビルドの出力）をワークスペースに永続化し、後でpush buildジョブで利用できるようにします。

プッシュビルドジョブ

push buildジョブは、ビルドしたサイトをGitHubリポジトリのorphanブランチ (deploy) にプッシュします。こうすることで、コードがデフォルトのブランチに残り、deployブランチにはサイトの静的ファイルだけが置かれることになります。

push build:
  executor: hugo-executor
  steps:
    - attach_workspace:
        at: workspace

    - run:
        name: Push build folder to GitHub
        command: |
          # Configure Git identity (replace <GitHubUsername> with your actual username)
          git config --global user.name "<GitHubUsername>"
          git config --global user.email "<GitHubUsername>@users.noreply.github.com"

          # Clone the repository (replace <your-repo-name> with your actual repository URL)
          git clone --branch deploy --depth 1 https://<GitHubUsername>:${GITHUB_TOKEN}@github.com/<GitHubUsername>/<your-repo-name>.git deployment

          # Copy the 'public' directory to the deployment folder
          cp -R workspace/public deployment

          # Navigate to the deployment folder
          cd deployment

          # Commit and push changes
          git add .
          git commit -m "Auto generated from ${CIRCLE_SHA1}"
          git push

上のジョブは次のような処理を行います。

  • attach_workspace：buildジョブがpublicディレクトリを永続化したワークスペースを紐付けます。
  • Push build folder to GitHub：ここではいくつかのGit操作を行います。
    • GitHubのユーザー名とメールアドレスでGit IDを設定
    • GitHubリポジトリをCircleCIランナーマシン上のdeploymentという名前のフォルダに複製
    • workspace/publicディレクトリ（ビルドしたHugoサイト）の内容をdeploymentフォルダにコピー
    • 作業ディレクトリをdeploymentに変更す
    • CircleCIから自動生成されたコミットであることを示すメッセージを添えて変更をコミット
    • GitHubリポジトリの新しいブランチに変更をプッシュ

<GitHubUsername>と<your-repo-name>は必ず実際のGitHubユーザー名とリポジトリ名に置き換えてください。また、CircleCIがGitHubアカウントにアクセスできるように、GitHubアクセストークンを作成してください。

Define scopes for GitHub access token
GitHubアクセストークンのスコープを定義する

そして、CircleCIのProject SettingsでGITHUB_TOKENという環境変数としてトークンを追加します。

ステップ 9. ワークフローの定義

ジョブの設定が完了したら、次はワークフローの設定を行います。CircleCIの設定に引き続き、mainブランチでコードの変更があったときにbuildジョブをトリガーし、push buildジョブを実行する前にbuildジョブが正常に完了することを義務付けるワークフローを作成します。

workflows:
  version: 2
  build-and-deploy:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main
      - push build:
          requires:
            - build

ステップ 10. コミットとプッシュ

ワークフローが正常に設定できたら、変更をコミットしてGitリポジトリにプッシュします。CircleCIが設定ファイルの存在を自動で検出し、コードの変更時に定義したワークフローをトリガーします。

CircleCIパイプラインの詳細
CircleCIパイプラインの詳細

GitHubリポジトリを確認すると、deployブランチには、静的ファイルを含むpublicフォルダが既に存在することがわかります。

こちらのサンプルリポジトリで詳しいCircleCIの設定を確認可能です。

ステップ11. 静的ファイルをKinstaにデプロイする

Kinstaへのデプロイは、静的ファイルがすでにビルドされていることで、ほんの数秒で完了します。以下の手順に従って、静的サイトホスティングでHugoサイトを無料でデプロイ可能です。

  1. ログインするか、アカウントを作成してMyKinstaを表示
  2. 好みのGitサービスを使ってアカウントを統合
  3. 左サイドバーの「静的サイト」そして「サイトを追加」をクリック
  4. リポジトリとデプロイしたいブランチ（deployブランチ）を選択
  5. サイトに一意の名前を割り当て、「続行」をクリック
  6. 「ビルドコマンド」と「Nodeのバージョン」フィールドは空欄のままにし、「公開ディレクトリ」をpublicに指定
  7. 最後に「サイトを作成」をクリック

これで完了です。数秒でデプロイ後のサイトが完成します。サイトのリンクが表示されます。お望みであれば、独自ドメインとSSL証明書を後で追加することができます。

Hugo-binを使用してHugoサイトをビルドしKinstaにデプロイする

Hugo-binパッケージは、Hugoのバイナリラッパーです。Node.jsコマンドでHugoプロジェクトをビルドして提供することができます。この方法では、Kinsta静的サイトホスティングにデプロイする前にサイトをビルドするためのCI/CDツールは必要ありません。

HugoプロジェクトでHugo-binパッケージを使用するには以下の通りです。

  1. npm init -yコマンドを実行して、プロジェクトのルートでNode.jsを初期化します。
  2. 次に、以下のコマンドを実行して、プロジェクトの開発者依存関係としてHugo-binをインストールします。
npm i -D hugo-bin
  1. 以下のスクリプトコマンドをpackage.jsonファイルに追加します。
"scripts": {
    "build": "hugo",
    "create": "hugo new",
    "serve": "hugo server"
  }

これにより、デプロイ前にファイルをビルドしなくとも、Hugoサイトをビルドして提供可能です。

すべてが完了したら、コードをGitリポジトリにプッシュします。以下の手順に従って、静的サイトをKinstaにデプロイしてください。

  1. ログインするか、アカウントを作成してMyKinstaを表示
  2. 好みのGitサービスへのKinstaによるアクセスを認証
  3. 左サイドバーの「静的サイト」そして「サイトを追加」をクリック
  4. デプロイしたいリポジトリとブランチを選択
  5. サイトに一意の名前を割り当てる
  6. 次の形式でビルド設定を追加
    • ビルドコマンド：npm run build
    • Nodeのバージョン：18.16.0
    • 公開ディレクトリ：public
  1. 最後に「サイトを作成」をクリック

これで完了です。数秒待てばデプロイを経てサイトの準備が整います。

静的ファイルのみをKinstaに提供する

最後に、HugoサイトをKinstaにデプロイするもう一つの方法です。ローカルでサイトをビルドしてからKinstaにデプロイすることができます。このプロセスでは、プロジェクトのルートにpublicフォルダが生成されます。しかし、この方法を使用する主な欠点は、プッシュする前に毎回ローカルでサイトをビルドする必要があることで、サイト構築プロセスを自動化する他の方法に比べて時間がかかります。

デフォルトでは、publicフォルダは.gitignoreファイルに含まれているためGitリポジトリから除外されます。このフォルダをリポジトリに含め、サイトをKinstaにデプロイするには、次の手順に従います。

  1. .gitignoreファイルからpublicフォルダを削除
  2. 上記で説明したデプロイ手順に従う
  3. Kinstaにリポジトリをデプロイし、（サイトがすでにビルドされているので）「ビルドコマンド」と「Nodeのバージョン」フィールドは空欄のままにする
  4. 「公開ディレクトリ」をpublicとして指定

静的ファイルだけをGitHubリポジトリにプッシュすることもできます。この方法では、プロジェクトのルートフォルダでGit リポジトリを初期化する必要はありません。publicフォルダ内でgit initを実行するだけでOKです。これで、静的ファイルのバージョン管理をプロジェクトの他の部分から切り離せます。

このケースでは、ファイルをpublicフォルダ内に配置せずに個別にプッシュする場合、Kinstaにデプロイするときに「公開ディレクトリ」を .に指定します。この表記はルートフォルダを表し、Kinstaのシステムによりそれに従ってファイルが配信されます。

まとめ

この記事では、Kinstaの静的サイトホスティングプラットフォームに無料でHugoサイトをデプロイするための3つの方法をご説明しました。特定の要件に適した方法を柔軟にご選択ください。さらに、Hugoを使用して光速静的サイトを作成する方法については、こちらの記事で解説しています。

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.