Hugo × Cloudflare Pagesで静的ページを公開【無料！】

どうも、職業エンジニアです。
今日は休みなんだけど特に予定がなかったので、あんまり仕事ではやらないであろうことをやってみたいと思い、Hugo × Cloudflare Pagesでページ公開をしてみました。
無料で自作のWEBページが公開できるなんて、いい時代になりましたねえ。

構成

利用するもの

今回利用するものは

• Hugo
• Cloudflare Pages
• GitLab
  の3つになります。

仕組み

Hugoで開発したソースコードをGitLab上にpushすると、Cloudflareが検知してページ公開されるような仕組みです。Cloudflare PagesとGitLabが標準機能として連携できるので、CI/CD設定ファイルを書かなくて済むのが利点だったりします。

なお、筆者はHugo触るのは初めてです！Hugoは静的ページを作成するものなので、公開するページの表示速度がめっちゃ早かったり、サーバー移行が楽だったりするメリットがあります。ブログとして公開することもできるみたい。そのうちやってみようかなあ。

構成図

今回の構成を図にするとこんなかんじ。シンプルで構築も簡単です！

プロフィールページを作ってみた

今回はお試しということで、手軽に作れそうなプロフィールページにしてみました。
やまぐろのプロフィール

Hugoには色んなテーマが用意されており、このページはHugo Profileで作成しています。作成にかかった時間はたぶん1hくらい。Hugoの構成なんかはAntigravityにお願いしたらすぐ作ってくれたので、ほとんどは中身の文章考えたりする時間でした。無料且つ高速でWEBページの公開までいけたわけですね！すごい！

あと、今回は無料のメリットを享受したかったので、Cloudflare Pagesが割り当ててくれたドメインをそのまま利用していますが、独自ドメインを割り当てることも可能です。

プロフィールページももちろん、静的ページと相性が良いLPや企業HPなんかを作るのも良さそうですね。また、サーバーレス構成なので非エンジニアの方でも扱いやすそうな印象です。AIの登場前はこんなこと言えなかったんですけどねえ。時代は変わりましたね、本当に。

最後に

そういや会社向けのPJ報告書、書いたのに提出するの忘れてて草。