Have a simple site that’s just html, css, javascript and other static content? You can host it for free in Azure. Not only is it free to host it is much easier to maintain than most off the self content management systems.
Scenario
Recently a colleague had a simple question: How do I host my static site in Azure? The customer had been using a 3rd party hosting service that provided them an FTP directory- anything they put into the directory would appear on their domain. The information on the site changed approximately once a year. The site was hosted on a custom domain and used a free LetsEncrypt certificate that was auto-renewed by the LetsEncrypt bot.
Why Not Use Static Web Sites For Blob
My colleague initially tried using Static Web Sites for Blob. The problem was that he could not use a built in certificate rotation because he wanted to host his content on a naked domain (ex: https://mydomain.com or www.mydomain.com).
Fortunately, Azure Static Web Apps (SWA) solved his problem. Here’s what we did.
Host Static Content on SWA
There are only a few simple steps to get your site live!
First, put all your content into a GitHub repo. The repo can be public or private.
Second, Deploy an Azure Static Web App.
Under Build Details select the template “Custom” point the app location to the location of the static content in your GitHub repo. If your static content is at the base of your repo just enter ”/” and leave all other fields blank.
Once the deployment is complete go back to your GitHub repo. Azure Static Web Apps has inserted a new file that we’ll need to edit.
Edit the file under .github/workflows
The file will have a unique name.
You’ll need to add a line to the workflow:
skip_app_build: true
Here's a full snippet as where line 14 shows the skip_app_build inserted an example:
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
skip_app_build: true
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_STONE_0BDFA3010 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######
Save and commit and that’s it!
In a few moments your content is con the web at an SWA address like 3424.blue-orchard.azurewebsites.com .
Now when the contents of the GitHub repo are modified the GitHub workflow will copy the new content and update the site for you!
What about SSL? As soon as you add a custom domain SWA will automatically get an SSL cert that matches your domain. It will renew as needed- you need to do nothing else!
Link to the full documentation for the azure-static-web-app deployment workflow can be found.
Benefits of Azure Static Web Apps
Static Web Apps have many benefits- even at the free tier.
- Free
- Add a custom domain (on the free tier)
- Free, auto renewed SSL certs
- Scale to premium or use cdn for even better performance
- No infrastructure ot manage or upgrade
- Adds source control to your static site
Reference: A full comparison of SWA and Static Sties for Blob.
Among all of these benefits the addition of source control to your static content can’t be understated.
Most importantly- with SWA you can get started right now, for FREE!
