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

Jamstack

JavaScript, APIs and Markup

Screenshot of the Jamstack.org 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 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…

Questions?

Cloud With Chris logo, with a link to the website - www.cloudwithchris.com