Cloudflare Pages + Hugo + github でブログサイトを作成しました。

Goyahn
Page content

こんばんは。

Webサイトやブログサイトを作成したいと思ったとき、どのようなサービスを利用して構築しますか？

私が10代の頃は、インターネットサービスプロバイダ(ISP)各社が用意していたユーザディレクトリ(exmaple.com/~user_name/ みたいなやつです)に HTML時点片手に打ち込んだhtmlファイルをFTPクライアントでアップロードして公開していました。 ホームページビルダーやDreamweaverなどの商用ソフトもありましたが、私の周りではエディタで書いている人が多かった記憶があります。

時は流れて現在、ブログサービスを始め、WordPressやMovableTypeといったCMS、最近だとJAMStack + HeadlessCMSで静的サイトを構築するなど、 Webサイト1つをとっても選択肢は非常に多くなっています。

今回は、技術ブログサイトを構築する、という視点でどのように技術選定をおこなったかについてまとめてみたいと思います。

環境構成

まずは、最終的なこのブログサイトの制作および公開環境を示します。

ブログ制作

ドメイン管理＆DNSサーバ、ホスティングサーバ、ソースコード管理(バックアップ兼用)すべてが異なるベンダーのサービスを利用していることがわかるかと思います。 キメラ構成になって理由については、後述します。

使用している要素技術

Webサイト作成・公開に必要なドメインや公開用サーバ、コンテンツ作成環境に用いている技術は次のとおりです。

  • Amazon Route53
    • ブログサイトで使用するドメインの取得・管理
    • ブログサイトのドメインに対するDNSサーバ機能
  • Cloudflare Pages
    • 静的サイトのホスティングサービス
    • React, Vue, HugoなどのビルドコマンドによるCI/CDをサポート
  • github
    • ソースコードリポジトリ管理サービス
    • Cloudflare Pagesと連携することで自動ビルド・自動デプロイを実現
  • hugo
    • 今回採用した静的サイトジェネレータ(go言語で実装)
    • Markdown記法で書かれたテキストデータを元にテンプレートエンジンによるHTML出力をおこなう

サイトの月額費用

現在利用している範囲で、利用料金が発生しているのは Amazon Route53の料金だけとなります。 月に均すと200 ～ 300円くらいになります。

  • ドメイン取得・維持管理費 … 12.00 USD/年
  • Route53利用料 … 0.60 USD/月
  • Cloudflare Pages … 無料(20,000ファイル, 月500回のビルドまで)
  • github … 無料

Cloudflare Pagesの無料枠ではファイル数の制限はあるものの、1記事につきHTML1ファイル、画像4つとしても4000記事近くは無料枠で賄えます。

要素技術の簡単な解説

ドメイン管理・DNSサーバについて

Cloudflare Pagesで作成したサイト(プロジェクトと呼ばれます)には、専用のドメインがプロジェクト作成時に付与されます。 しかし、付与されるのは、project-name.pages.dev といったドメインです。 blog.kuninobi.com のように独自ドメインを私用したい場合は、別途独自ドメインを取得して、Cloudflare Pagesのプロジェクトと紐づける必要があります。 (カスタムドメインの設定と呼ばれます)

独自ドメインの取得には、ドメインレジストリサービスを使用します。Cloudflare Pagesにもドメインレジストリサービスがあるのですが、 .jp ドメインは取り扱いがないため、 .jp ドメインを使用したい場合は別のレジストリサービスを利用する必要があります。 ドメイン管理やDNSサーバには、よく使われるのは お名前.com などのドメイン管理サービス単体や、 エックスサーバー 、さくらのレンタルサーバ などのホスティング用サーバとドメインがセットのサービスを使われるかと思います。

最近のホスティングサービスは、ドメイン登録もセットでおこなっているケースが多く、そちらを利用する方がスムーズにWebサイトを構築することができるかと思います。 今回は、もともとAWSの Route53 + Cloudfront + S3 といった組み合わせでサイトを構築しようと考えていたので、Route53でドメインの取得とDNSサーバ管理をおこなっています。

コンテンツ作成環境

ブログの記事の作成などは、ローカルPCでおこなっています。 今回採用した hugo と呼ばれる静的サイトジェネレータを実行できる環境を構築し、ドラフト段階での記事の作成・確認をおこないます。 記事データなどは、github上に構築したプライベートリポジトリからクローンしてきたローカルリポジトリ上で管理しています。

Cloudflare Pagesは、連携設定をおこなったgithubのリポジトリに対する更新をトリガーにビルドとデプロイが自動的に実行されます。 ビルドとデプロイは、大きく分けて本番化(mainリポジトリへの更新)とプレビュー化(mainリポジトリ以外のリポジトリへの更新)の2つのアクションがあります。 私の場合は、main(本番化)、develop(プレビュー化のうち、Cloudflare Pages上で確認したい公開前最終版)、feature(記事作成中)という感じで作業ブランチを分け、developブランチへのマージまではローカル環境でおこなった後、最終確認のためにリモートブランチに push、問題なければ main ブランチへのマージをプルリクエストを作成して実行、という流れで作業しています。 このあたりについては、別の記事にまとめたいと思います。

コンテンツ保存先リポジトリ

ブログサイトのコンテンツは、先に挙げたとおり github 上にブログサイト用のプライベートリポジトリを作成して管理しています。 githubを活用することでデータのバックアップやコンテンツの世代管理をおこなうことができます。 基本執筆中の記事は、ローカルリポジトリ上で管理し、公開候補となった段階でリモートリポジトリに push するような運用をしています。

githubとCloudflare Pagesの連携

サイト公開用サーバ

前述したように、github の main リポジトリへの更新をトリガーにCloudflare Pages側で github のリポジトリを取得してサイトのビルド・デプロイ作業が実行されます。 Cloudflare Pagesでは、ビルド実行後の特定ディレクトリ以下のファイルをサイトコンテンツとして公開することができます。

hugo によるビルドの場合、デフォルト設定では public というディレクトリ以下に静的サイトが出力されます。 Cloudflare Pagesでは、世界各国にあるCloudflare Pagesのエッジサーバに静的サイトのコンテンツがデプロイされ、設定したカスタムドメインでアクセスできるようになります。

Cloudflare Pagesダッシュボード画面

おわりに

今回は、当サイトの作成・公開環境について紹介しました。 ドメインについては、さすがに無料でというのは難しいものの、レンタルサーバ不要で自分のWebサイトを公開することもできることが分かっていただけかと思います。

ただし、今回ご紹介したCloudflare Pagesだけの場合、Webサイトにはほぼ必須なお問い合わせフォームが利用できません。 フォームの利用については、外部サービスの利用が必要になります。 導入の容易さでは、やはりWordPressなどのCMSの利用が便利かもしれません。