# Azure Static Web Apps Tutorial for AI-Generated Sites

> Publish an AI-generated website from GitHub with this beginner Azure Static Web Apps tutorial, including build settings and a custom domain.

![Azure Static Web Apps service page](/assets/blog/how-to-publish-an-ai-generated-site-on-azure-static-web-apps/01-service-page.png)

An AI tool can generate a site in minutes. Publishing it is less obvious. This **Azure Static Web Apps tutorial** takes a project from GitHub to a public HTTPS address, with automatic redeployment after later changes. It works for plain HTML and static-output frameworks such as React, Vue, and Astro.

## Before you start

Make sure the project runs locally and contains no secrets. Static files sent to a browser are public. If a client demo is confidential, use a private sharing link or password gate instead of public **vibe coding hosting**.

You need:

- An Azure account with an active subscription
- A GitHub account and repository you can authorize
- An `index.html` file or a framework that produces static files
- The build command and build folder, if the project uses them

Microsoft’s [portal quickstart](https://learn.microsoft.com/en-us/azure/static-web-apps/get-started-portal) provides more background.

## 1. Put the site in GitHub

Create a repository and push the generated files to a branch such as `main`.

- For plain HTML, `index.html` can sit at the repository root.
- For a framework, commit the source, `package.json`, and lockfile.
- Never commit `.env` files, API keys, or private client material.

Check the repository in your browser. Azure will use it to publish the AI-generated website.

## 2. Create a Static Web App in Azure

Open the [Azure portal](https://portal.azure.com/), choose **Create a resource**, search for **Static Web Apps**, and select **Create**.

1. Choose your subscription and create or select a resource group.
2. Name the app and select a suitable plan.
3. Set **Source** to GitHub.
4. Authorize Azure to access GitHub when prompted.

Check the current plan limits before creating the resource.

![Azure Static Web Apps quickstart](/assets/blog/how-to-publish-an-ai-generated-site-on-azure-static-web-apps/02-create-app.png)

## 3. Choose the repository and branch

Azure shows the GitHub resources it can access. Select:

- **Organization**: the account or company that owns the code
- **Repository**: the site you want to deploy
- **Branch**: usually `main`, or another production branch

Pushes to that branch can deploy to production. Review client changes on a separate branch before merging them.

## 4. Enter app location and output location

These paths are inside the repository.

| Project type | App location | Output location |
|---|---:|---:|
| Plain HTML at repository root | `/` | Leave blank |
| Vite, Vue, or Astro | `/` | Usually `dist` |
| Create React App | `/` | Usually `build` |
| App inside a subfolder | `/site` | Its build folder |

Plain HTML needs no build output. A framework must point to the folder created by its build. Verify it locally because defaults vary. Microsoft maintains a [framework output table](https://learn.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks) and [build configuration reference](https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration). Leave the API location blank unless you have an Azure Functions API.

## 5. Let the generated GitHub Actions workflow deploy

Select **Review + create**, check the settings, and create the resource. Azure adds a YAML workflow under `.github/workflows/`. GitHub Actions then builds and uploads the site.

Wait for a green check. If the run fails, open its first useful error. Common causes are:

- The wrong output folder
- A missing dependency or lockfile
- A build command that fails locally

Correct the project or workflow, commit the fix, and push again.

## 6. Open the Azure URL

Return to the app’s **Overview** page. After deployment, open the generated `azurestaticapps.net` URL.

- Test the home page and one deeper route.
- Check navigation, images, forms, and downloads.
- Refresh the deeper route to find routing problems.
- Confirm that no draft or private data is visible.

Azure supplies HTTPS for this address. A green deployment does not prove every page works, so test it.

## 7. Add a custom domain

Go to **Settings > Custom domains > Add**.

1. Enter the domain or subdomain.
2. Choose Azure DNS or another provider.
3. Add the DNS and validation records Azure shows.
4. Return to Azure and complete validation.

DNS changes may take time to appear. Azure creates a free SSL/TLS certificate after validation. Follow Microsoft’s current [custom domain guide](https://learn.microsoft.com/en-us/azure/static-web-apps/custom-domain), since records depend on the domain setup.

![Azure Static Web Apps custom domain guide](/assets/blog/how-to-publish-an-ai-generated-site-on-azure-static-web-apps/03-custom-domain.png)

## Update the site

Edit the site, test locally, commit the files, and push or merge them into the production branch. The workflow runs again while the public URL stays the same. That is practical **vibe coding hosting**: AI can help revise the project, while Git history and branch review keep publication controlled.

### Deployment checklist

| Item | What to check | Why it matters |
|---|---|---|
| Repository | Correct files; no secrets | Shipped files are public |
| Branch | Production branch selected | Pushes can publish |
| Paths | App and output folders match | Wrong paths break builds |
| Workflow | GitHub Actions workflow is green | Deployment must finish |
| Website | Routes, images, and forms work | Build success is not a full test |
| Domain | DNS and HTTPS work | Visitors need a trusted address |

Your site is live.

Start publishing for free

Connect this AI to Revdoku so it can store files, create, update, and publish websites for me. Read and follow https://revdoku.com/prompt.md. A Revdoku account is required. If I do not have one, send me https://app.revdoku.com/users/sign_up?utm_source=revdoku.com&utm_medium=ai-chat&utm_campaign=connect_ai_first and wait until I confirm signup is complete. For ChatGPT, Claude, or another cloud AI, connect https://app.revdoku.com/mcp and complete Revdoku OAuth. For a local agent, use Revdoku's browser device sign-in and complete the connection in Revdoku. Never ask me for a password or API key in chat, or for a verification code. When Revdoku tools are connected, verify the connection, tell me you’re ready, and ask what I want to publish.

Copy Prompt

or

Create Free Account

---

[View the canonical page](https://revdoku.com/blog/how-to-publish-an-ai-generated-site-on-azure-static-web-apps/) · [Browse llms.txt](https://revdoku.com/llms.txt)