Publish HTML project using Azure Static Web Apps

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

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

3. Add Your HTML Content

Inside your cloned repository:

  1. Create a new folder named public (or any name of your choice).
  2. 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

  1. Log in to the Azure Portal.
  2. In the left-hand menu, click on “Create a resource”.
  3. Search for “Static Web App” and select “Static Web App (Preview)”.
  4. Click on the “Create” button.
  5. 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.

--

--

Marc Kenneth Lomio & Melrose Mejidana

Software engineers that shares knowledge and experience through this medium.