個人ブログの構築に際して、Azure Static Web Apps でホストし、Cloudflare でドメインを購入したことで、年間千数百円ほどのドメイン更新費だけで始めることができたので、その作り方に関してまとめる。
Overall
ブログを作成するとなるとワードプレスが広く知られているが、ホストするサーバーのレンタルなど考えると費用がかさむ傾向にある。ワードプレス は動的なコンテンツを含むブログを構築する場合には適切かもしれないが、テキストベースのブログであれば、静的サイトジェネレーター（Static Site Generator, SSG）を用いた構成でも充分である。このブログも基本的にはテキストと少量の画像で構成されているため、SSG によってブログをホストしている。SSG で生成されたファイルは、サーバー側で動的に処理されることなく、そのまま Web サーバーに配置できるため、Azure Static Web Apps にホストしている。2025 年 5 月時点では、個人プロジェクトレベルであれば、Azure Static Web Apps は無料で利用できる。つまり、サーバーの管理費は不要で個人ブログを作成できる。GitHub を利用し、Markdown 形式での記事の作成など多少操作が必要ではあるが、慣れればそこまで難しいものではないと思う。
SSG とは
Static Site Generator, SSG は、コンテンツ（Markdown や AsciiDoc などで記述されたシンプルなテキストファイル）とテンプレートを組み合わせ、あらかじめ HTML、CSS、JavaScript などの静的ファイルを生成可能なツールである。生成されたファイルは、サーバー側で動的に処理されることなく、そのまま Web サーバーに配置できるため、表示速度が速く、セキュリティリスクが低い点が大きな魅力となっている。また、CDN や GitHub Pages などの静的ホスティングサービスと相性がよく、保守管理も比較的容易である。
SSG の中でもいくつか具体的なバリエーションが存在し、Hugo は、Go 言語を用いて開発されたオープンソースの静的サイトジェネレーターである。その高速なビルド速度と豊富な機能が大きな特徴と言われている。たとえば、Hugo ではコマンド一つで新規サイトの作成、テーマの追加、コンテンツの自動生成が可能なため、大量のページやコンテンツを扱うサイトでもストレスなく運用でき、エンジニアやクリエイターに広く支持されている。各種テーマやプラグインが豊富に用意されているため、デザインや機能面でのカスタマイズもしやすく、シンプルな個人ブログから複雑なドキュメントサイトまで、様々な用途に対応できる点も大きなメリットである。今回、サイトの構築に関して以下のブログを参考にしたが、ここでも Hugo を利用していたため、Hugo を中心的に検討していた。
その他の SSG は、Copilot の聞いた結果以下の特徴があるとのことだった。
-
Gatsby
React をベースに、GraphQL でデータを管理することで、ダイナミックな機能も併せ持つ静的サイトを生成可能である。近年は Jamstack の代表例として注目を集めている。 -
Jekyll
Ruby で書かれており、GitHub Pages 上でのホスティングに最適化されているため、ブログやプロジェクトサイトの構築に定評がある。 -
Hexo
Node.js で開発され、プラグインエコシステムが充実しているため、拡張性に優れたブログサイトなどの構築に活用されている。
当初 Gatsby の利用も考えたが、Hugo によるブログ構築の情報が多くあることや、ブログのデザインを決めるテーマが複数存在しそうなことから、最終的に Hugo に決定した。
ホスト先の選定
Azure Static Web Apps を選択したが、他に候補として Github Pages を検討していた。 Github Pages であれば、独自ドメインを取得する必要がなく、リポジトリ名.io でブログをホストすることができる。ドメインの費用がかからないため、無料で始めることができる。 しかし、今回は経験のため独自ドメイン名の取得も検討していたことから、その他のサービスを検討した。 その中で、Azure 自体は業務でも馴染みがあるが、実際に構築したことのあるサービスは少なかったため、知見を増やすことを目的に Azure Static Web Apps を選択した。
Azure Static Web Apps へのデプロイ
実際にブログの構築には、以下の記事を参考に進めた。Microsoft の公式ドキュメントにも Hugo でのデプロイの方法があるため参考になった。
Azure Static Web Apps で CI/CD をし隊
Hugo サイトを Azure Static Web Apps にデプロイする
デプロイまでの手順の概要としては、以下の通りである。
Hugo のインストール
以下のサイトから、利用 OS に応じて Hugo をインストールする。
Hugo アプリケーションの作成
- 新しいアプリの作成
Hugo のインストールが完了したら、ターミナルを開き、Hugo CLI を実行して新しいアプリの作成を行う。ここでは、static-app という名前で作成している。 今回は、Windows 環境で実施している。
|
|
- 作成したアプリケーションへ移動
|
|
- Git リポジトリの初期化
|
|
- ブランチ名が main であることを確認
|
|
- テーマのインストール
|
|
特にテーマはブログの見た目を決めるものであり、既にテンプレートとして作成されているため様々なテーマを試した。 以下のサイトに作成済みのテーマがまとめられており、個人ブログ向けのテーマやポートフォリオ向けのテーマなどがある。サンプルや説明があるため、こちらを参考にした。
- サイトの確認
以下のコマンドでローカルでサイトをホストし、プレビューを行う。
|
|
以下のような画面の表示が期待される。
- 変更をコミット
|
|
Hugo アプリケーションを GitHub にプッシュ
-
GitHub リポジトリ の作成
https://github.com/new で hugo-static-app という名前で空の GitHub リポジトリを作成しておく。 -
GitHub リポジトリの追加
GitHub リポジトリをリモートとしてローカル リポジトリに加える。 次のコマンドの <YOUR_USER_NAME> プレースホルダーの代わりに、GitHub のユーザー名に変える。
|
|
- GitHub にプッシュ
|
|
Azure Static Web Apps のデプロイ
- Azure ポータルで [静的 Web アプリ] と検索
-
[作成] を選択
-
[基本] タブで以下の情報を入力
| プロパティ | 値 |
|---|---|
| サブスクリプション | Azure サブスクリプション名 |
| リソース グループ | my-hugo-group |
| 名前 | hugo-static-app |
| プランの種類 | Free |
| Azure Functions API のリージョンとステージング環境 | 最も近いリージョン |
| ソース | GitHub |
| プロパティ | 値 |
|---|---|
| 組織 | 希望する GitHub 組織 |
| リポジトリ | hugo-static-app |
| ブランチ | main |
具体的な希望がなければ、その他は既定の設定で、次へを進めていき、[作成] でデプロイを行う。
- サイトへアクセス
Azure Static Web Apps の画面の URL から、ホストされるサイトへアクセスし、ローカルで作成したサイトがホストされることを確かめる。
独自ドメインの購入
独自ドメインの取得には、お名前.com の真っ先に検討した。しかし、メールが頻繁に送られてくると聞いたことがあり、他のサービスを検討した。無料で取得が可能な Freenom も検討したが、サービスの継続が不透明であったため控えた。また、個人ブログのため優先順位はそこまで高くなかったものの .com などのわかりやすい gTLD が良いと思っていた。いくつかのサービスを調べたところ、.com ドメインに関して提供元に応じて、価格差があるように見受けられた。その中で、Cloudflare が手数料を追加することなく、原価で提供しているという情報をみかけた。Cloudflare は、CDN (Content Delivery Network) の提供で広く知られる企業であり、その信頼性からサービスを選択した。デメリットとしては、ドメインの価格がアカウントを作成してログインしないと確認できないことであったが、以下の記事にまとめてあるように、有志が価格表を作成しているのでこちらを参考にした。結果として、希望の .com のドメインが安く販売されていたので、Cloudflare から $10.44 でドメインを購入した。
Cloudflare Registrar でドメイン取得する
独自ドメインの登録
Azure Static web apps をデプロイすると自動で URL が生成されるが、こちらはランダムに生成されたものであるため、ブログ内のコンテンツとの関連性が低い。そのため、自身で購入したドメインを割り当てる必要がある。ドメインの割り当てには、以下の記事を参照して実施した。
たぶん10分で試せる。Azure Static Web AppsにWebサイトをデプロイして独自ドメイン設定とFunctionsでAPI公開まで
Azure Static Web Apps でのカスタム ドメイン
- ポータルの [カスタムドメイン] から [他の DNS のカスタムドメイン] を選択
- [ドメイン名] に割り当てるドメイン名を入力
- 案内に従って CNAME を作成
Cloudflare でドメインを購入したため、Cloudflare のポータルから CNAME の設定を行う。 設定が完了したら、Azure ポータル側で [追加] を選択する。
- カスタムドメインでアクセス
割り当てたカスタムドメインでアクセスできることを確認
まとめ
個人ブログを始めるに際して、ブログの基盤を構築していくことも経験と思い、デプロイから検討した。その中で、できるだけコストを抑えることを優先した。結果として、SSG の Hugo を利用し、Azure Static Web Apps でブログをホストしている。生じる費用としては、ドメインの年間の更新料の千数百円ほどであり、非常にリーズナブルで個人ブログを始めることができたと思う。