Deploying Static sites to Azure the cheap and performant way

Chris Reddington | @reddobowen

Chris Reddington

Microsoft Cloud Solution Architect
Cloud With Chris blogger, podcaster & producer
Azure Thames Valley

Azure Thames Valley

CloudWithChris

@reddobowen

ChrisReddington

Chris Reddington

A quick poll. How is your experience with…

Hugo, or other Static Site generators?
Azure
- Azure Storage Accounts
- Azure Static Web Apps
- Content Delivery Networks (CDNs)

Beginner
Intermediate
Advanced

This talk will help you…

Understand the Static Content Hosting Cloud Design Pattern
Understand the concept of Jamstack and how Static Site Generators like Hugo relate to the above pattern
Use the relevant Azure Services including Azure Storage or Azure Static Websites, Azure CDN and Azure DNS to implement the pattern

Static Content Hosting Pattern is useful when…

Wanting to minimise the cost of hosting static resources from expensive compute platforms (e.g. images for a dynamic website, or an entire website that is static in nature)
Making content accessible across geographical regions by using Content Delivery Networks (CDNs).

Static Content Hosting Pattern may not be useful when…

The content is dynamic in nature (e.g. needs to add some additional information before serving the result to client)
If using this alongside a compute platform and offloading a small amount of static content, is the work/re-architecture worth the reward?

Static Content Hosting Pattern Additional Considerations

The Static Content must be exposed over an HTTP/HTTPS endpoint so that it can be accessed
If some content shouldn’t be available anonymously, consider leveraging the Valet Key pattern (e.g. Shared Access Signatures in Storage Accounts)

Static Content Hosting Pattern Additional Considerations

Adopt a CDN to protect the origin and minimise latency (improving performance) for end users
Consider additional complexity & deployment lifecycle if using this pattern in combination with additional compute platforms

Pre-rendering With Jamstack, the entire front end is prebuilt into highly optimized static pages and assets during a build process. This process of pre-rendering results in sites which can be served directly from a CDN, reducing the cost, complexity and risk, of dynamic servers as critical infrastructure. With so many popular tools for generating sites, like Gatsby, Hugo, Jekyll, Eleventy, NextJS, and very many more, many web developers are already familiar with the tools needed to become productive Jamstack developers.

Enhancing with JavaScript With the markup and other user interface assets of Jamstack sites served directly from a CDN, they can be delivered very quickly and securely. On this foundation, Jamstack sites can use JavaScript and APIs to talk to backend services, allowing experiences to be enhanced and personalized.

Supercharging with services The thriving API economy has become a significant enabler for Jamstack sites. The ability to leverage domain experts who offer their products and service via APIs has allowed teams to build far more complex applications than if they were to take on the risk and burden of such capabilities themselves. Now we can outsource things like authentication and identity, payments, content management, data services, search, and much more. Jamstack sites might utilise such services at build time, and also at run time directly from the browser via JavaScript. And the clean decoupling of these services allows for greater portability and flexibility, as well as significantly reduced risk.

Jamstack

JavaScript, APIs and Markup

Screenshot of the Jamstack.org website - The modern way to build websites & apps that delivers better performance

Entire Project on a CDN Because Jamstack projects don’t rely on server-side code, they can be distributed instead of living on a single server. Serving directly from a CDN unlocks speeds and performance that can’t be beat. The more of your app you can push to the edge, the better the user experience.

Modern Build Tools Take advantage of the world of modern build tools. It can be a jungle to get oriented in and it’s a fast moving space, but you’ll want to be able to use tomorrow’s web standards today without waiting for tomorrow’s browsers. And that currently means Babel, PostCSS, Webpack, and friends.

Automated Builds Because Jamstack markup is prebuilt, content changes won’t go live until you run another build. Automating this process will save you lots of frustration. You can do this yourself with webhooks, or use a publishing platform that includes the service automatically.

Atomic Deploys As Jamstack projects grow really large, new changes might require re-deploying hundreds of files. Uploading these one at a time can cause inconsistent state while the process completes. You can avoid this with a system that lets you do “atomic deploys,” where no changes go live until all changed files have been uploaded.

Instant Cache Invalidation When the build-to-deploy cycle becomes a regular occurrence, you need to know that when a deploy goes live, it really goes live. Eliminate any doubt by making sure your CDN can handle instant cache purges.

Everything Lives in Git With a Jamstack project, anyone should be able to do a git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction, and also simplifies staging and testing workflows.

Jamstack Recommended Practices

Entire Project on a CDN
Modern Build Tools
Automated Builds
Atomic Deploys
Instant Cache Invalidation
Everything Lives in Git

Static Site Generators you may recognise…

Screenshot showing several Static Site Generators - Hugo, Jekyll, Gatsby, Vuepress, Nuxt.JS and Pelican

Cloud With Chris Architecture

Architecture Diagram of cloudwithchris.com. It shows that cloudwithchris.com is on Azure DNS. There is an apex domain (cloudwithchris.com) which points to Azure Front Door, and redirects to another Azure Front Door Rule (for WWW). There is a www.cloudwithchris.com subdomain which points to a WWW rule, which directs to an Azure Static Web App. There is a podcasts.cloudwithchris.com subdomain which points to a Podcast Rule, which directs to Azure Storage. There is a presentations.cloudwithchris.com subdomain which points to a Presentations Rule, which directs to an Azure Static Web App

Stop! Demo time.

How to learn more…

A screenshot of cloudwithchris.com, which shows several upcoming pieces of content

A screenshot of GitHub Learning Lab, with a few example courses. A screenshot of Microsoft Learn, showing several example learning paths and courses

Deploying Static sites to Azure the cheap and performant way

Chris Reddington | @reddobowen

Chris Reddington

A quick poll. How is your experience with…

This talk will help you…

Static Content Hosting Pattern is useful when…

Static Content Hosting Pattern may not be useful when…

Static Content Hosting Pattern Additional Considerations

Static Content Hosting Pattern Additional Considerations

Jamstack

Jamstack Recommended Practices

Static Site Generators you may recognise…

Cloud With Chris Architecture

Stop! Demo time.

How to learn more…

Questions?