Microsoft announced Azure Static WebApps preview in the Build 2020 virtual event. Azure Static WebApps is a service from the Azure to host a web app directly from the source code repository with Azure managed CI/CD pipelines. As of now it is supporting only from GitHub and uses GitHub Actions Workflows for CI/CD and Azure Functions for backend support, the moment when you commit the code in the repository it builds the site and deploys to the associated Azure Static WebApp. At the time of I was writing this post Azure Static WebApps in still in public preview with a free plan offering.
Azure Functions for backend support.
Azure Managed CI/CD - Every commit to the code triggers build and deploy the site
CDN Support - Globally distributed static content, putting content closer to your users.
Free SSL certificates, which are automatically renewed.
Supports custom domains to your website.
Pull requests enabling preview versions of your site before publishing.
Ready to deploy website
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.
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>"
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.