Publish HTML project using Azure Static Web Apps

Marc Kenneth Lomio & Melrose Mejidana

2 min readNov 6, 2023

Creating a static web app using Azure Static Web Apps and HTML is a straightforward process.

Here’s a step-by-step guide to help you set up a basic static website on Azure:

1. Prerequisites

An Azure account. If you don’t have one, you can create a free Azure account.
A GitHub account. Azure Static Web Apps integrates with GitHub.

2. Create a New Repository on GitHub

Log in to your GitHub account.
Create a new repository.
Clone the repository to your local machine.

3. Add Your HTML Content

Inside your cloned repository:

Create a new folder named public (or any name of your choice).
Inside the public folder, create an index.html file with your desired content.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My Static Web App</title>
</head>
<body>
 <h1>Hello, Azure!</h1>
</body>
</html>

4. Push Your Changes to GitHub

From your repository folder:

git add .
git commit -m "Add basic HTML content"
git push

5. Create Azure Static Web App

Log in to the Azure Portal.
In the left-hand menu, click on “Create a resource”.
Search for “Static Web App” and select “Static Web App (Preview)”.
Click on the “Create” button.
Fill in the following details:

Subscription: Choose your Azure subscription.
Resource Group: Create a new one or select an existing one.
Name: Give a unique name to your app.
Region: Choose the nearest region.
Source: Choose GitHub and authenticate if prompted.
Organization: Choose your GitHub username.
Repository: Select your repository.
Branch: Use main or your default branch.

6. Under the “Build Details”, configure:

Build Presets: Custom
App Location: Enter the folder name where your index.html resides, in our case, it's public.
Api Location: Leave it blank if you don’t have any API.
Output Location: Set it to . since the app serves directly from the public folder.

7. Review the other settings and adjust as necessary, then click “Review + create”.

8. Review your settings and click “Create”.

Azure will now set up a GitHub Action in your repository to build and deploy your static web app. After a few minutes, your app should be live. You can find the URL in the Azure Portal under the Static Web App’s overview section.

That’s it! You’ve successfully deployed a basic HTML site to Azure Static Web Apps.