将博客从 GitHub Pages 迁移到 Azure Static Web Apps

背景

我的博客 atbug.com 一直采用 Hugo 作为静态网站生成器，内容和源码托管在 GitHub 仓库，通过 GitHub Actions 自动构建并发布到 addozhang.github.io 仓库，最终使用 GitHub Pages 进行托管。这种方式简单高效，适合个人博客的持续集成与部署。

迁移原因

作为微软 Azure MVP，我可以使用 Azure 的相关服务。Azure Static Web Apps 提供了更高的可用性、全球 CDN、自动化部署、集成认证等优势，因此决定将博客从 GitHub Pages 迁移到 Azure Static Web Apps。

迁移过程

1. 准备工作

   • 保持博客源码和内容依然托管在 GitHub 仓库，无需更改原有内容结构。
   • 确保本地 Hugo 版本与生产环境一致，建议使用官方推荐的 Hugo Extended 版本。

2. 创建 Azure Static Web App

   • 登录 Azure 门户，搜索并创建“Static Web App”资源。
   • 在 Hosting plan 选项中选择 Free，对于个人博客用户完全足够且免费。
   • 选择 GitHub 作为代码源，授权并选择你的博客仓库和分支。
   • 在“构建细节”中，设置：
     • Build Presets：选择 Hugo，Azure 会自动识别并优化相关构建参数
     • App location（应用程序位置）：建议使用默认值 /
     • API location（API 位置）：留空
     • Output location（输出位置）：public
   • 完成创建后，Azure 会自动生成 GitHub Actions Workflow 文件（如 .github/workflows/azure-static-web-apps.yml）。

3. 配置 GitHub Actions Workflow

   • 检查自动生成的 workflow 文件，确保包含 Hugo 的安装与构建步骤。可参考官方文档补充如下内容：

     • 推荐在 workflow 文件中设置 HUGO_VERSION 环境变量，确保构建环境一致。例如：

       env:
         HUGO_VERSION: '0.125.7'
       

     • 输出目录需为 public，与 Azure Static Web Apps 配置一致。

   最终的 workflow 文件大致如下：

   name: Azure Static Web Apps CI/CD
   
   on:
     push:
       branches:
         - main
     pull_request:
       types: [opened, synchronize, reopened, closed]
       branches:
         - main
   
   jobs:
     build_and_deploy_job:
       if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
       runs-on: ubuntu-latest
       name: Build and Deploy Job
       steps:
         - uses: actions/checkout@v3
           with:
             submodules: true
             lfs: false
         - name: Build And Deploy
           id: builddeploy
           uses: Azure/static-web-apps-deploy@v1
           with:
             azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_THANKFUL_ROCK_09D389F00 }}
             repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
             action: "upload"
             ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
             # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
             app_location: "/" # App source code path
             api_location: "" # Api source code path - optional
             output_location: "public" # Built app content directory - optional
             ###### End of Repository/Build Configurations ######
           env:
             HUGO_VERSION: 0.110.0
   
     close_pull_request_job:
       if: github.event_name == 'pull_request' && github.event.action == 'closed'
       runs-on: ubuntu-latest
       name: Close Pull Request Job
       steps:
         - name: Close Pull Request
           id: closepullrequest
           uses: Azure/static-web-apps-deploy@v1
           with:
             azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_THANKFUL_ROCK_09D389F00 }}
             action: "close"
   

4. 自定义域名与 HTTPS

   • 在 Azure Static Web Apps 的“自定义域名”设置中添加你的域名，按提示配置 DNS 记录。
   • Azure 会自动为自定义域名签发并启用免费 HTTPS 证书。

5. 验证与优化

   • 部署完成后，访问 Azure Static Web Apps 分配的默认域名或自定义域名，确认内容和样式无误。
   • 可在 Azure 门户查看部署日志和监控数据，持续优化访问体验。

6. 监控与维护

   • Azure Static Web Apps 提供了内置的监控和日志功能，可以实时查看访问量、错误率等指标。

   • 可根据需要配置 Application Insights 进行更深入的性能分析。

     

总结

通过 Azure Static Web Apps，博客获得了更强的可用性和扩展能力，自动化流程也更加完善。未来可进一步集成 Azure 的更多服务，提升博客体验。