How to Host a Website with Azure Static Web Apps (Step-by-Step Guide)

Introduction

Azure Static Web Apps is Microsoft’s answer to Netlify and Vercel. It’s designed for hosting static sites and frontend apps (React, Angular, Vue, Svelte) with automatic GitHub Actions for CI/CD.

This guide shows you how to deploy a site with Azure Static Web Apps step by step.

Why Use Azure Static Web Apps?

• Free SSL + CDN
• Built-in GitHub Actions CI/CD
• Supports frontend frameworks and static HTML
• Easy custom domain setup

Step 1: Create a GitHub Repository

Push your site (HTML, React, Vue, etc.) to GitHub.

Step 2: Create a Static Web App in Azure

1. Go to Azure Portal.
2. Search for Static Web Apps.
3. Click Create.
4. Fill in:
   • Subscription: your account
   • Resource Group: create one if needed
   • Name: e.g., my-azure-app
   • Region: closest to your users
   • Source: GitHub
   • Build Preset: choose your framework (React, Vue, Angular, etc.)

Step 3: Authorize GitHub

1. Log in with GitHub.
2. Select your repo and branch.

Azure automatically adds a GitHub Actions workflow to build and deploy your app.

Step 4: Deploy Your Site

Commit and push any change → GitHub Actions runs → Azure deploys automatically.
Your site will be live at:

https://proud-rock-12345.azurestaticapps.net

Step 5: Add a Custom Domain

1. In the Azure Portal → Static Web Apps → Custom Domains
2. Add your domain (e.g., mywebsite.com)
3. Update DNS records → SSL is automatic

Troubleshooting

• Build failed? Check the GitHub Actions logs.
• Wrong output folder? For React (CRA), set build as the output. For Vite, dist.
• 404s on refresh? Add a fallback route in your workflow config.

Conclusion

Azure Static Web Apps is a solid option if you’re in the Microsoft ecosystem or already use GitHub. It’s easy to set up and scales automatically with CI/CD built in.

Coming up in Hosting Academy: we’ll explore cPanel hosting (generic guide) and Docker deployments.