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',
'gatsbyjs/gatsby',
'withastro/astro',
'gridsome/gridsome',
'hexojs/hexo',
'honojs/hono',
'gohugoio/hugo',
'jekyll/jekyll',
'vercel/next.js',
'nuxt/nuxt',
'getpelican/pelican',
'preactjs/preact',
'builderio/qwik',
'facebook/react',
'remix-run/remix',
'solidjs/solid',
'sveltejs/svelte',
'vitejs/vite',
'vuejs/core',
'vuejs/vuepress',
'getzola/zola',
'angular/angular',
'elderjs/elderjs',
'11ty/eleventy',
'mkdocs/mkdocs',
'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
- honojs/hono
- nuxt/nuxt
- solidjs/solid
- withastro/astro
- gridsome/gridsome
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.