Deploying Static sites to Azure the cheap and performant way

Chris Reddington | @reddobowen

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


JavaScript, APIs and Markup

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

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 It shows that is on Azure DNS. There is an apex domain ( which points to Azure Front Door, and redirects to another Azure Front Door Rule (for WWW). There is a subdomain which points to a WWW rule, which directs to an Azure Static Web App. There is a subdomain which points to a Podcast Rule, which directs to Azure Storage. There is a subdomain which points to a Presentations Rule, which directs to an Azure Static Web App

Stop! Demo time.

How to learn more…


Cloud With Chris logo, with a link to the website -