This Website

A simple and sweet explanation into how this website was built.

Static vs Dynamic Web Pages

Static web pages are the quiet, reliable parts of the internet. They are pre-rendered files, typically HTML, CSS and Javascript (and any other static content you might need like images, video/audio files) that reside on a server and are delivered to the user exactly as stored. This means that every user receives the same content, unchanged by the server-side processes. This means rapid loading times as you you do not need to dynamically generate any content and the security of no backend code to exploit.

Dynamic web pages on the other hand are change response based on the business side logic on the server. The pages are generated in real-time by server-side scripts, using data from databases and other backend services to construct whatever unique response each user might need. The most basic example could be fetching a set of blog posts, or populating whether or not a user is signed in, or even more complex things like a real-time chat application.

Note: I also believe a hybrid approach is possible where most of the content on the page is static and then there are dynamic APIs that are called that integrate with the parent page. None of the original content needs the server side scripts. One example of this is a static web blog that has comments that are persisted or loaded by Disqus or Firebase. Additionally if you want to add event tracking to the page you can do so through Google Analytics, Heap or any other analytics solution. The parent page is static - the consuming services are dynamic.

While this may not seem significant the total time adds up aggregated over the number of clients and requests across every potential client consuming the page. Additionally with the rise in popularity of many serverless functions, the cost of running a dynamic website can be quite high. Just search for "Vercel bill" on twitter for some examples.

Choosing a Framework

Framework options

My personal opinion is you should choose whatever framework makes you the most comfortable to work with. If you are a Go person Gatsby is a great option. Astro for Javascript people and perhaps Jekyll if you love Ruby. Spend a little time to understand the plugin architecture and how you can get any niceities you might want such as comments or code highlighting.

Unlike before there are now excellent resources of static website frameworks you can choose from. The place to look at them is here.

Static Website Hosts

Below is a comparison of various static website hosting services, including their features and pricing options. At this point the market for static hosting is practically commoditized, so choosing one ends up being a matter of preference and looking at peripheral features such as CI/CD integration, serverless functions, and analytics tools.

Cloudflare

Cloudflare

Cloudflare Pages

Global CDN and SSL

Cloudflare offers free static website hosting with a global CDN and automatic SSL. Extremely popular among developers for its ease of use and current pricing.

  • + Free static website hosting
  • + Free build infrastructure
  • + Global CDN
  • + Automatic SSL

The Cloudflare offering is especially attractive as it offers a free tier as long as you are not using the workers feature. Workers allow you to run serverless functions that might be used with a SSR framework like Next.js or Nuxt.js. You get 100,000 invocations for free and then the paid tier . If you can find a way to keep your site completely static it will just be free forever. Or at least until their shareholders demand more revenue.

AWS

AWS

AWS

Scalable and secure

AWS provides a highly scalable and secure static website hosting solution with pay-as-you-go pricing. Extremely battle-tested and robust.

  • + Pay-as-you-go pricing
  • + High scalability
  • + Robust security
  • - Somewhat convoluted setup

Netlify

Netlify

Netlify

CI/CD integration

Netlify offers easy CI/CD integration for static websites, a free tier, and serverless functions.

  • Static website hosting
  • Easy CI/CD integration
  • Free tier available
  • Serverless functions

GCP

GCP

GCP

AI and ML capabilities

GCP provides highly customizable static website hosting with strong analytics tools and comprehensive AI and ML capabilities.

  • Static website hosting
  • Highly customizable

If AWS does it so must GCP. The internal guide is highly similar to AWS in that you must follow a set of steps that sets up a comparable amount of cloud resources and then deploys it.

If you are already in this ecosystem it makes sense otherwise just opt for something easier.

Conclusion

Just use Cloudflare.