Step-by-Step Guide: Creating a Static Website Using Azure

Step-by-Step Guide: Creating a Static Website Using Azure

ยท

2 min read

Introduction: This blog post explains how to create a static website using Azure, which is Microsoft's cloud computing platform. Let's get started!๐Ÿ‘‡

Step 1: Open the Azure Portal and sign in with your credentials. Once you're logged in, navigate to the search bar at the top of the portal and enter 'Static Web Apps' to search for the service.

Step 2: Click on the 'Create' button to initiate the process of creating a new Static Web App.

Step 3: You will see the following screen, where you will need to pick a Subscription and add the following details:

  • Resource Group

  • Name (for the app)

  • Region

Step 4: For deployment, you will need to authenticate with your GitHub account and select the repository and branch.

Step 5: Now, in the Build Details section, you have several options for Build Presets. For a simple HTML/JS site, you can choose the "Custom" option.

Step 6: Click on the "Review+Create" button, and it will take a few seconds to go through the validation process. Once completed, you should be able to click on the "Create" button to initiate the creation of the Static Web App.

Step 6: If you navigate to your GitHub repository, you should notice the presence of a new directory called ".github/workflows/". In this directory, you will find a YAML file created by the Static Web App, which handles automatic deployments as changes are made to the project.

Under the Action tab in the GitHub repo, you should be able to view the Build jobs.

In simpler terms, if you make changes to your website, commit and push those changes to the branch, or if you merge a pull request to the branch, the deployment process will be automated. You won't have to perform any manual steps because the GitHub action set up by Static Web App will handle the deployment automatically.

Results

Step 6: Once the job finishes, you should be able to access the deployed application by navigating to the URL provided.

There you have it!

Thank you for Reading โ™ฅ๏ธ

~Edvin Dsouza

Did you find this article valuable?

Support Edvin DevOps Blog by becoming a sponsor. Any amount is appreciated!

ย