# 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. For a framework, set the output location 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, check the first relevant error in its logs. 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.

Just ask to “publish to Revdoku” to
publish your HTML pages presentation dashboard app prototype game prototype
as a fast and secure website

from your Codex , Claude or another AI app publish files or folders

Connect
Skill
MCP

Paste this into your AI app.

Copy

Install the Revdoku skill in your AI app.

Copy
npx skills add revdoku/revdoku --skill revdoku -g

Choose your AI app to connect through MCP.

Codex CLI
Claude Code
Other

Copy codex mcp add revdoku --url https://app.revdoku.com/mcp
codex mcp login revdoku

Copy claude mcp add --transport http revdoku https://app.revdoku.com/mcp
claude mcp login revdoku

Transport Streamable HTTP Auth Browser OAuth

Copy https://app.revdoku.com/mcp

Open the MCP setup guide →

Free · Public or protected · Visitor analytics · Forms and email alerts Building websites for clients? Explore Revdoku for agencies →

---

[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)