Azure Static Web Apps – the fast and secure way to run your blog
Static Web Apps are becoming increasingly popular because of the advantages: great security, super speed, super scalability, maintainability and low cost. With the Jamstack architecture, great tools are now available for building feature-rich static web apps and hosting them. Actually this blog is an example of a static web app. Read on to find out how it works!
See the speed results at Google PageSpeed Insights for www.how2code.info:
Jamstack Architecture
The Jamstack architecture is a new standard for building fast and secure websites. The whole idea is to serve pre-rendered static content from a very fast and cheap CDN (Content Delivery Network), while providing any dynamic content through Javascript and APIs.
With modern tools, a whole website can be rebuilt / pre-rendered in a CI/CD pipeline and deployed to CDNs in a few minutes (or even less). This makes Jamstack useful also for e-commerce websites, news websites, etc that need very fresh content.
As there are fewer "moving parts", the Jamstack architecture gives you better performance, scalability and security.
In a nutshell, the Jamstack pattern is:
- Pre-rendering into static assets
- JavaScript to enhance and personalize
- API Microservices for things like authentication, search, etc
With Jamstack, you also get a natural decoupling of things, which means it will be easier to maintain your website and reuse functionality.
Pre-Rendering
Pre-rendering means that you take your content, which could be inside a database or in files, and create html, images, css, scripts, etc files from it. For example, you may have a library of images, but you need them to be pre-rendered in various sizes such as thumbnails and adopted for different screen sizes. Another example, you may wish to minify your scripts.
While you can build your own pre-rendering tool (I did earlier!), there are many great tools already available.
Static site generators
Gatsby, Hugo and VuePress are just some of the excellent free static site generators (pre-rendering tools) available. Hugo is great for simpler projects and builds your website really fast, while Gatsby has thousands of plugins and is great for more complex projects.
Also many pre-rendering tools come with ready-to-use themes. Here are some example themes for Hugo:
You can even switch theme of your website later without too much trouble (or build your own theme).
Another option that gives you a pre-rendered static site is to use Blazor Webassembly or a framework such as Angular, React or Vue.
For www.how2code.info, I picked Hugo because of the easiness of use and the pre-rendering speed. I use the Hugo theme Clarity.
Content Management
A Content Management System (CMS) such as WordPress helps you edit your content. It makes your website easily updateable, even for users without technical skills.
With the Jamstack architecture, your frontend (presentation layer) and your CMS are decoupled. You could even use multiple front ends for publishing the same content in multiple channels. While some tools like Gatsby can source content directly from WordPress, my recommended option is to use a headless CMS.
Headless CMS
A headless Content Management System is a backend-only CMS that act as a content repository. It makes your content available to your frontend (presentation layer) through an API or other standard interface.
Some good examples of headless CMSs are Strapi, Netlify CMS and Tina.
Headless CMSs can store the content in databases or even GitHub repos. They are pretty generic and work with most static site generators.
For www.how2code.info I picked Netlify CMS, because it was easy to setup and integrates very well with GitHub. Authentication is handled by GitHub. Any edits I do are automatically pushed to GitHub and then my website is updated within a few minutes.
Here's an example of what editing in Netlify CMS looks like:
Azure Static Web Apps
Azure Static Web Apps is currently in public preview, but most functionality is there:
- Static website hosting
- CDN - your files are automatically replicated on web servers globally and users will be served by the nearest web server
- Custom domain
- Automatic HTTPS certificate acquisition, even for your custom domain
- Customizable redirects, URL rewriting, routing, error pages, MIME-types and HTTP headers
- Automatic CI/CD with private or public GitHub repositories via GitHub actions
- Automatic hosting of APIs via serverless Azure Functions
- Automatic build-presets for Gatsby, Hugo, Vuepress, Blazor and more
Compared to Azure Data Lake Static Website Hosting, Azure Static Web Apps are much more convenient. The biggest difference is that you get everything within one Azure service instead of having to use multiple Azure services.
Creating an Azure Static Web App takes just a few minutes in the Azure Portal.
Pricing
Azure Static Web Apps is currently free because it is in public preview. There are no pricing indicators yet, but we can expect it to be quite affordable. If not, you can easily switch to other static web app hosting services.
The other tools/services mentioned in this article are all free and open source.
Security
With static web apps, there are very limited attack surfaces for your web sites. Most request will just fetch static files. For them you don't need to worry about buffer overflows, SQL injections, etc. Only your APIs execute code that needs to be protected.
You can restrict access to parts, or whole, of your web site in Azure Static Web Apps by creating roles and managing authentication with Azure Active Directory, GitHub, Facebook or Twitter. You can place the source code of your repository in a private GitHub repository (or a custom source).
Deploying an Azure Static Web App requires a deployment token. These are stored as Repository secrets in GitHub to enable automatic CI/CD from the GitHub actions.
You can also store secrets in the Azure Static Web App configuration. These will only be available from inside your APIs. So even for static web apps in a public GitHub repository, you can protect sensitive things like keys and certificates by storing them in the configuration.
Make sure to protect your GitHub account by a strong password and two-factor authentication!
Now build your own static website
I've published a GitHub template with instructions to easily create your own static website. You should easily be able to get a website with Hugo and Azure Static Web Apps up and running within 15 minutes!
The template will give you a website similar to this blog. You can easily customize it and change Hugo theme.