ウェブサイトを迅速かつ効率的に構築、管理できるように設計されています。ブログ、ポートフォリオ、そして動的なデータを必要としないあらゆる形式のウェブサイトを作成するのに使うことができます。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つの方法があります。継続的インテグレーションと継続的デプロイメント(CI/CD)を使用してウェブサイトを構築し、デプロイするhugo-bin開発者依存関係を利用するローカルでビルドした静的ファイルを配信するこの記事では、これらすべてを扱います。前提条件この解説に沿って作業を進めるには、以下のものが必要です。HugoとGitの使用経験ローカルで稼働するHugoサイトInfoHugoについてもっと詳しくは、Hugoを使って高速な静的サイトを構築する方法をご覧ください。CircleCIでサイトを構築しKinstaにデプロイする最初の方法では、CI/CDツールとしてCircleCIを使ってみます。この方法では、Hugoサイトをdeployという新しいブランチにビルドするCircleCIワークフローを作成し、このブランチから静的ファイルをデプロイするようにKinstaで設定を行います。CI/CDを使用する利点この方法では、Gitリポジトリにプッシュする前にローカルでサイトをビルドする必要がなくなります。通常、KinstaはNode.jsベースのSSGを用いたサイト構築プロセスをサポートしていますが、Hugoのような他の種類のSSGの場合は、ワークフローを使用しサイト構築プロセスを自動で処理できます。CI/CD設定ファイルに他のジョブを追加することもできます。コードのlintやテストを行うことができます。CI/CDパイプラインが正常に完了した場合にのみ、デプロイが実行されるように流れを指定することにもなります。設定ファイルの作成Hugoプロジェクトのルートディレクトリに.circleciフォルダを作成することから始めます。このフォルダの中に、ワークフローの設定を定義するconfig.ymlファイルを作成します。Gitサービスを使ってGitリポジトリを作成し、コードをリポジトリにプッシュします。次に、deployという空のブランチを作成し、そこにデプロイ用の静的ファイルをプッシュします。プロジェクトのターミナルで次のコマンドを実行してください。deployこのブランチにはファイルを追加しないでください。CircleCIワークフローによって、Hugoが生成したpublicフォルダのコンテンツが自動で配置されます。CircleCIアカウントの作成CircleCIのウェブサイトにアクセスし、まだアカウントを持っていない場合はアカウントを作成してください。お好きなGitサービスを使って新規登録することで、追加設定なしで簡単にリポジトリにアクセスできるようになります。リポジトリの設定ログイン後、CircleCIダッシュボードに移動し、左サイドバーの「Projects」をクリックし、設定したいリポジトリを選択します。CircleCIが自動的に設定ファイルを検出します。Project」ボタンをクリックして、CircleCIにコードベースへのアクセスを許可し、コード変更時にワークフローを実行するようにします。CircleCI設定の定義これでCircleCI設定ファイルが作成されました。内容をビルドしてみましょう。デフォルトのブランチ(deployブランチではない)であることを確認し、CircleCIのバージョンを定義することから始めます。エクゼキュータの定義これはHugoプロジェクトなので、ジョブを実行するためのエクゼキュータを定義する必要があります。ジョブごとに定義する必要がないように、hugo-executorを定義します。このエクゼキュータにより、Dockerイメージ(cibuilds/hugo:latest)を使った、Hugoサイト構築の一貫した環境が得られます。buildという2つのジョブを定義します。これらが、各ジョブで実行するステップを指定することになります。hugo-executorビルドジョブこのジョブはHugoサイトを構築し、生成された静的ファイルを一時的にワークスペースに保存するものです。buildジョブを扱う際にアクセスできるようになります。public上のジョブでは、先に定義したhugo-executorエグゼキュータを使うことを指定しています。以下にある4つの主要なステップを実行します。checkout:GitHubリポジトリからプロジェクトのソースコードをチェックアウトします。theme:Gitサブモジュールを初期化して更新し(もしあれば)、Hugoテーマが最新であることを確認します。これは、HugoサイトがGitHubですでに公開されているテーマの大きなファイルをプッシュする代わりに、Gitmodulesを使ってテーマを参照する場合に便利です。site:Hugoサイトを構築し、保存先フォルダをworkspace/publicに指定します。buildジョブで利用できるようにします。することで、コードがデフォルトのブランチに残り、deployブランチにはサイトの静的ファイルだけが置かれることになります。push上のジョブは次のような処理を行います。attach_workspace:buildジョブがpublicディレクトリを永続化したワークスペースを紐付けます。GitHub:ここではいくつかのGit操作を行います。作業ディレクトリをdeploymentに変更すCircleCIから自動生成されたコミットであることを示すメッセージを添えて変更をコミットGitHubリポジトリの新しいブランチに変更をプッシュ<GitHubUsername>と<your-repo-name>は必ず実際のGitHubユーザー名とリポジトリ名に置き換えてください。CircleCIがGitHubアカウントにアクセスできるように、GitHubアクセストークンを作成してください。SettingsでGITHUB_TOKENという環境変数としてトークンを追加します。ワークフローの定義ジョブの設定が完了したら、次はワークフローの設定を行います。buildジョブを実行する前にbuildジョブが正常に完了することを義務付けるワークフローを作成します。コミットとプッシュワークフローが正常に設定できたら、変更をコミットしてGitリポジトリにプッシュします。CircleCIが設定ファイルの存在を自動で検出し、コードの変更時に定義したワークフローをトリガーします。CircleCIパイプラインの詳細GitHubリポジトリを確認すると、deployブランチには、静的ファイルを含むpublicフォルダが既に存在することがわかります。こちらのサンプルリポジトリで詳しいCircleCIの設定を確認可能です。静的ファイルをKinstaにデプロイするKinstaへのデプロイは、静的ファイルがすでにビルドされていることで、ほんの数秒で完了します。以下の手順に従って、静的サイトホスティングでHugoサイトを無料でデプロイ可能です。最後に「サイトを作成」をクリックこれで完了です。数秒でデプロイ後のサイトが完成します。サイトのリンクが表示されます。お望みであれば、独自ドメインとSSL証明書を後で追加することができます。Hugo-binを使用してHugoサイトをビルドしKinstaにデプロイするHugo-binパッケージは、Hugoのバイナリラッパーです。Node.jsコマンドでHugoプロジェクトをビルドして提供することができます。この方法では、Kinsta静的サイトホスティングにデプロイする前にサイトをビルドするためのCI/CDツールは必要ありません。HugoプロジェクトでHugo-binパッケージを使用するには以下の通りです。-yコマンドを実行して、プロジェクトのルートでNode.jsを初期化します。次に、以下のコマンドを実行して、プロジェクトの開発者依存関係としてHugo-binをインストールします。hugo-bin以下のスクリプトコマンドをpackage.jsonファイルに追加します。}これにより、デプロイ前にファイルをビルドしなくとも、Hugoサイトをビルドして提供可能です。submoduleを使用することは現在できません。Kinstaで利用するには、ローカルのGitリポジトリにテーマファイルを追加してください。すべてが完了したら、コードをGitリポジトリにプッシュします。以下の手順に従って、静的サイトをKinstaにデプロイしてください。buildNodeのバージョン:18.16.0公開ディレクトリ:public最後に「サイトを作成」をクリックこれで完了です。数秒待てばデプロイを経てサイトの準備が整います。InfoHugo-binパッケージを使用する場合、アプリケーションホスティングサービスを使用してサイトをデプロイすることもできます。アプリケーションホスティングの高度な機能が利用できるため、魅力的な選択肢です。スケーラビリティ、Dockerfileを使用したカスタマイズ型デプロイ、リアルタイムおよび過去のデータを網羅する包括的な分析などがこれに付帯します。静的ファイルのみをKinstaに提供する最後に、HugoサイトをKinstaにデプロイするもう一つの方法です。ローカルでサイトをビルドしてからKinstaにデプロイすることができます。このプロセスでは、プロジェクトのルートにpublicフォルダが生成されます。この方法を使用する主な欠点は、プッシュする前に毎回ローカルでサイトをビルドする必要があることで、サイト構築プロセスを自動化する他の方法に比べて時間がかかります。デフォルトでは、publicフォルダは.gitignoreファイルに含まれているためGitリポジトリから除外されます。このフォルダをリポジトリに含め、サイトをKinstaにデプロイするには、次の手順に従います。静的ファイルだけをGitHubリポジトリにプッシュすることもできます。リポジトリを初期化する必要はありません。initを実行するだけでOKです。これで、静的ファイルのバージョン管理をプロジェクトの他の部分から切り離せます。この表記はルートフォルダを表し、Kinstaのシステムによりそれに従ってファイルが配信されます。まとめこの記事では、Kinstaの静的サイトホスティングプラットフォームに無料でHugoサイトをデプロイするための3つの方法をご説明しました。特定の要件に適した方法を柔軟にご選択ください。Hugoを使用して光速静的サイトを作成する方法については、こちらの記事で解説しています。アプリケーション、データベース、WordPressサイトのすべてを一箇所で。Kinstaの高性能クラウドプラットフォームでは、次のような便利な性能や機能の数々をご用意しています。最大37箇所のデータセンター、260のPoPを武器に世界規模でオーディエンスに訴求アプリケーションホスティング、データベースホスティングを無料利用枠を使いお試しいただけます。プラン一覧をご覧いただくか、お客様のご要望について営業までお気軽にお問い合わせください。KinstaKinstaでテクニカルエディターとして働くフロントエンド開発者。オープンソースをこよなく愛する講師でもあり、JavaScriptとそのフレームワークを中心に200件以上の技術記事を執筆している。今回の記事では、Disqusを利用して静的サイトにコメントセクションを追加、統合してサイト訪問者によるエンゲージメントを高める方法をご紹介します。【共用サーバーを超える】WordPress専用マネージドホスティングKinstaのWordPress専用マネージドホスティングは、すべてのプランに比類のないサイトパフォーマンスを実現する、エンタープライズレベルの機能が付帯。コメントをキャンセル【コメントに関する方針】皆様のコメントに感謝申し上げます。ご意見がございましたらお気軽にお聞かせください。すべてのコメントが手動でモデレートされ、スパムや宣伝とみなされるものは削除されますので予めご了承ください。メールアドレスが公開されることはありません。※このフォームを送信することにより、米国へのデータ転送を含む、Kinstaの個人情報保護方針に従ったデータ送信など、個人データの処理に同意したことになります。Inc.が所有する登録商標です。Inc.の知的財産です。Inc.による推奨や承認を意味するものではありません。Inc.により認定、所有されておらず、関連会社でもありません。