Azure Static Web AppsとGitHub Pagesでのポートフォリオ作成の比較と優位性

はじめに

エンジニアやデザイナーが自身のポートフォリオを公開する際、Azure Static Web Apps と GitHub Pages はどちらも魅力的な選択肢です。

本記事では、それぞれの特徴、メリット・デメリットを比較し、組み合わせて活用する方法について解説します。

1. Azure Static Web Appsとは？

Azure Static Web Apps は、Microsoft Azureが提供する静的サイト向けのホスティングサービスです。GitHubやAzure DevOpsと連携して、自動デプロイが可能です。

メリット

• 無料プランあり（制限付き）
• カスタムドメイン対応
• API（Azure Functions）との連携が容易
• CDNによる高速配信
• 認証機能（GitHub、Microsoftアカウントなど）を簡単に設定可能

デメリット

• 無料プランは制限あり（カスタム認証不可、カスタムスクリプト制限）
• エンタープライズ向け機能は有料
• Azureのアカウントが必要

関連Microsoft Learn教材

Azure Static Web Apps の概要

2. GitHub Pagesとは？

GitHub Pages は、GitHubが提供する静的サイトホスティングサービスです。GitHubリポジトリにPushするだけでデプロイできます。

メリット

• 完全無料で利用可能
• GitHubとシームレスに統合
• カスタムドメイン対応
• Jekyllとの統合が可能（Markdownベースで簡単にサイト構築可能）

デメリット

• バックエンド機能なし（APIは外部サービスを利用する必要あり）
• CI/CDの自由度が低い
• カスタム認証機能なし

関連Microsoft Learn教材

GitHub Pages の概要

3. Azure Static Web AppsとGitHub Pagesの比較

4. Azure Static Web AppsとGitHub Pagesの組み合わせ方

ポートフォリオサイトを強化するために、GitHub Pages と Azure Static Web Apps を組み合わせることも可能です。

組み合わせのアイデア

1. GitHub Pagesで基本ポートフォリオをホスティング

   • プロフィール、経歴、制作物の一覧などをGitHub Pagesで公開

2. Azure Static Web Appsで動的機能を追加

   • お問い合わせフォーム（Azure Functions利用）
   • ログイン機能（Azure Authentication）
   • API連携（Azureの各種サービスと統合）

実装の流れ

1. GitHub Pagesをセットアップ

   • GitHubのリポジトリを作成し、HTML/CSS/JSをPush
   • Settings → Pages から公開設定

2. Azure Static Web Appsをセットアップ

   • Azure Portalで「Static Web Apps」を作成
   • GitHubリポジトリを連携し、自動デプロイを設定
   • API機能が必要な場合はAzure Functionsを追加

関連Microsoft Learn教材

• Azure Static Web Appsのチュートリアル
• GitHub Actionsを利用したデプロイ

5. どちらを選ぶべきか？

まとめ

• GitHub Pagesは無料で簡単に静的サイトを公開できる
• Azure Static Web AppsはAPI連携や認証機能など高度な機能を提供
• 組み合わせることで、静的なポートフォリオに動的機能を追加可能

どちらのサービスも無料で試せるので、目的に応じて活用してみましょう！

参考リンク

• Azure Static Web Apps
• GitHub Pages
• Microsoft Learn