Which Static Site Builder framework to pick in 2023


People have been arguing for a while that websites are too bloated with too much JavaScripts that slow them down. So for a while static site builders, and headless CMS has been gaining traction over traditional all in one solutions like Sitecore, and WordPress.

My blog has been running on WordPress for 10+ years, and as much as I’m not a PHP guy and don’t like all the security implications that comes with using the most popular blogging platform in existence, it does the job. And it actually does the job pretty well especially if you don’t want to spend too much time on the technical aspects of running a blog.

However running a WordPress site also requires web hosting that supports PHP and MySQL, and for me that means that I have been paying for a small web site at a company called Gigahost. However Gigahost have in the last couple of years (if not more) solely been maintaining their hosting offerings, they haven’t innovated in anyway and their prices are not really competitive anymore, so I have decided to close my account with them. But that leaves me with the challenge of finding a new way to host my blog.

In this post I will investigate which framework I should use for building a personal blog in 2023, my only requirement is that I want it to be a static site, so that I can have a fast site that ranks high on Google, and a site that I can host anywhere, as there are a lot of good (free) options for hosting static sites today.

As with anything when it comes to programming it is a religious minefield to pick a framework. So I decided to take an analytical approach to which framework I should pick.

Before the framework decision I had already decided to use Cloudflare for hosting my new blog. Not because I think Cloudflare is perfect, but I already have an account with them, and it seems easier to buy an additional service from them, that starting another account somewhere else.

For hosting of static pages Cloudflare have a few options, their CDN if you really only have static content, Workers if you want the ability to write some backend JavaScript logic or Cloudflare Pages, which are their latest offering that is supposed to make it easy with a good developer experience to host static pages. I wanted to give Pages a try, as I in the past have had good experiences with Netlify which I believe is the product Cloudflare want their Pages offering to compete with.

So next step is picking a framework, to do that I went to the Cloudflare Pages documentation and looked at which frameworks they have support for, and to my surprise the list is very long:

A lot of framework that I have never heard of and also a few old ones that I kinda knew I didn’t want to use.

But to make it interesting I decided to just take the entire list and see pull some numbers from their main GitHub repository and use that to help me decide.

A quick way to run analysis on GitHub data is using their Event data set, which every day gets collected at https://www.gharchive.org/. It e.g. contains who stared what, commits, issues and a lot more. I decided to use the number stars on the main repository as my main factor to decide framework. Not the total number of stars, because that would favor the big old frameworks like React and Next.js but I wanted to look at the trend, which frameworks are up-and-coming.

Crunching the raw data from GitHub, would make this task a little more time consuming than desired, so instead I decided to use Clickhouse’s data playground as they have already imported all the data, and Clickhouse is a perfect tool for querying large data set like these.

Here’s the query I went with, it pulls the number of starts per repo per month the starts where created.

SELECT repo_name, makeDate(toYear(created_at), toMonth(created_at), 1), count() FROM github_events WHERE event_type = 'WatchEvent' AND repo_name IN ('facebook/docusaurus',
'emberjs/ember.js') GROUP BY repo_name, makeDate(toYear(created_at), toMonth(created_at), 1)

In the playground it looks like this:

Not the most visual representation of data. So I took the data and downloaded it and gave it to ChatGPT Code Interpreter (yes I know lazy, but you gotta try the new tools).

After some fiddling with ChatGPT I got the following nice graphs, nice trick is to ask for an SVG representation of the graphs, because the PNGs shown in the interface are pretty useless.

A bit difficult to see what is up-and-coming, so I asked for the top five repositories which have seen the highest growth in number of stars in the last two years. The way ChatGPT interpreted that was to calculate the percentage increase in number of stars per month using the two months July 2021 (initial count) and June 2023 (final count), not sure that is the best metric, but whatever the data is still quite interesting

  Repository           Total Count  Initial Count  Final Count  Growth Rate
        honojs/hono         4290            235          355     0.510638
          nuxt/nuxt         4644            629          931     0.480127
      solidjs/solid        21691            626          908     0.450479
    withastro/astro        23465            601          847     0.409318
  gridsome/gridsome         1060             52           71     0.365385
    remix-run/remix        24113            538          694     0.289963
        vitejs/vite        29424           1208         1538     0.273179
         vuejs/core        12670            705          815     0.156028
    sveltejs/svelte        26276            915          961     0.050273
    preactjs/preact         5867            224          224     0.000000
        hexojs/hexo         4781            187          185    -0.010695
       getzola/zola         4224            217          213    -0.018433
      gohugoio/hugo        16938            718          669    -0.068245
 getpelican/pelican         1407             55           51    -0.072727
    gatsbyjs/gatsby         5852            299          270    -0.096990
      jekyll/jekyll         5145            235          212    -0.097872
     vuejs/vuepress         3071            168          151    -0.101190
     facebook/react        48449           2375         1993    -0.160842
    angular/angular        18950            780          594    -0.238462
      11ty/eleventy         5159            271          177    -0.346863
     vercel/next.js        42059           2391         1560    -0.347553
      mkdocs/mkdocs         4322            166           98    -0.409639
facebook/docusaurus        21120           2223          754    -0.660819
   emberjs/ember.js         1171             60           18    -0.700000

We can clearly see that the following fire repositories are gaining some traction

Plotting the monthly over month growth for the 5 repositories with the highest growth number we get the following.

Some of them are still quite small, like hono, gridsom and nuxt. While Astro and SolidJS already got a good following. I already have used Solid to build some smaller web apps, and while it is fine for dynamic web apps, it doesn’t strike me as a good framework for static blogs. So based on this small analysis (and a bit of reading) I decided to build my new blog using the Astro framework. You are probably reading this post on it right now 🙂

I will get back to a more in-depth post on my experience with Astro.