あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

HugoのサイトをGitHub/Bitbucket経由でAmplify(CloudFront)で公開する方法

Hugoは静的サイトジェネレーターとして有名ですが、CloudFront で公開するにはなにかと手間がかかっていたようです。

ですが、現在は GitHub/BitBucket/GitLab/AWS CodeCommitでソース管理していれば、Amplify Consoleを使用することで簡単にCloudFrontにデプロイできるようになっています。独自ドメインも使用できます。

Gitでコミット、リモートリポジトリにpushすると、自動で CloudFront にデプロイされるのでとっても便利です。

その方法をご紹介します。

AWSのコンソールで、Amplify Console を表示します。

そして、Deploy の Get STARTED をクリックします。

f:id:fnyablog:20191115090039p:plain:w480

すると、アプリの作成画面が表示されるので、自分が使用してるサービスを選択します。ここでは BitBucket を選択します。Continue をクリックすると認証が行われます。

f:id:fnyablog:20191115090422p:plain:w480

認証が済むと、リポジトリとブランチの選択画面が表示されるのでそれぞれ選択します。すでに選択済みのリポジトリが選択されている旨のメッセージが表示されていますが、初回は表示されないので気にしないでください。

f:id:fnyablog:20191115090853p:plain:w480

ビルドの設定画面は特に何もせず、「次へ」をクリックします。

f:id:fnyablog:20191115091149p:plain:w480

確認画面が表示されるので、内容に問題なければ「保存してデプロイ」をクリックします。

f:id:fnyablog:20191115091417p:plain:w480

デプロイが終了したら、アプリに割り当てられた *.amplifyapp.com のリンクをクリックします。

f:id:fnyablog:20191115091822p:plain:w480

サイトは表示されたでしょうか?

たったこれだけの設定で、CloudFront で Hugo のサイトを公開できるなんて驚愕です。

もちろん独自ドメインの設定もできます。

ただ、Route 53 でドメイン管理をしていれば問題ありませんが、お名前.com だとドメインの移管が必要になります。

www.aruse.net

とはいえ、独自ドメインの設定も簡単にできるので、Hugo を使っているのなら Amplify Console はぜひ活用したいですね。