Hosting on ☁️ Azure Static WebApps (Preview)

Prerequisites

• Ready to deploy website
• Git Installed
• GitHub Account
• Azure Account with valid subscription.

This post is in continuation to my previous post Create and Build A Static Website With Hugo,  and if you don’t have a ready to deploy website and want to build a new site using Hugo then you can refer to that post to create a new static website with in a few minutes.

If you have not installed the git already then you can go to Git  website and install it.

Push the site to GitHub repository

Once you are done with site customization, added the content and built the site, you can push your site to GitHub Repository.

You can go to site’s root directory in your favorite command line terminal and then run the following commands, in my case C:\Sites\kpatnayakuni is my site’s root directory.

To initialize the local repository…

C:\Sites\kpatnayakuni> git init

To add the changes…

C:\Sites\kpatnayakuni> git add .

To commit the changes…

C:\Sites\kpatnayakuni> git commit -m "Initial Commit"

If you already have a GitHub account then login and create a repository with the same name as the local repository name, and in my case it is kpatnayakuni. If you don’t have a GitHub account then login into https://github.com/  and sign up with your email id and create the repository .

First time if you are using the git then you need to set some global settings to work with the remote repositories…

To set user name…

C:\Sites\kpatnayakuni> git config --global user.name "<User Full Name>" 

To set email address…

C:\Sites\kpatnayakuni> git config --global user.email "<User Email Address>" 

You need to use your name and email in the above examples.

To add remote repository…

C:\Sites\kpatnayakuni> git remote add origin https://github.com/<user_name>/<repository_name>.git

To push the site onto GitHub

C:\Sites\kpatnayakuni> git push -u origin master

With our site is up in the GitHub repository, now let’s create a Static WebApp in the Azure Portal.

If you don’t have an Azure account then you can login using your GitHub credentials, or create a new account  then get your subscription.

However, as of now Azure Static WebApps service comes with a free plan to start with.

Login into the Azure Portal , then click on the search box and type the search word static then click on the Static Web Apps (Preview) service…

When the Static Web Apps (Preview) blade is opened then click on Add button to create a new static web app…

And as shown in the image below, please select the subscription and the resource group where you want to host your static website and then enter the app name and select the region near to your location, and then click on Sign in with GitHub to select the GitHub repository from where our static site is coming from.

Once the GitHub login is successful, then please select the username/organizationname as organization, repository and branch then click next…

If you have your only built site in the github repository then you can set root / as your App Location else if you have your complete site along with the build folder then you can set the build folder in the App Location, in my case it is /public. Api and Artifacts locations you can leave it for now, and if you want to add Azure Functions and configure artifacts then you can refer to the Microsoft Docs  for the same.

Click on Review + create and if the review is successful then click on Create to deploy the Static Web App. Once the deployment is successful then click on Go to resource to go to the Static Web App blade.

Now, your site up and you will land up on the Static Web App (Preview) overview page with all the necessary info like URL, Workflow file and etc., and you can click on the url link to browse your site.

Azure Static WebApp creates a random url for our site, but you can add a custom domain  to your webapp.

Azure Static WebApp allows you to create a staging environment by creating a pull request  and when the pull request is merged then the staging environment will be moved to production environment.

Recently, I have migrated my WordPress site to a static website using Hugo and currently this site is being hosted in the Azure Static WebApps, and till now I have not seen/experienced any issues with this preview hosting platform, however I have my backup plan ready to switch to GitHub Pages just in case of any hurdles.