Building a static website with React

Having worked with gatsby.js to build lendavvaip.ee, I discovered the joy of modern frontend development.

The developer experience is pretty good: hot code-reloading, build pipeline configuration, asset minification etc are all preconfigured and work out of the box.

Through HackerNews I stumbled upon tailwindcss and despite it looking strange at the time, I decided to give it a try.

This turned out to be good decision! My cycle times for developing decent-looking things using tailwindcss went down dramatically and more importantly making things look good by choosing from a list of CSS classes was just plain fun.

There is one important thing to note though: to sensibly use tailwindcss actually requires a templating or component system of some kind.

Naïvely enough I assumed that just building a simple React app would get me far enough for a simple blog.

After investing several hours into finding the right libraries for things like processing Markdown and highlighting code snippets, figuring out how those libraries work, and tying everything together I eventually gave up on the project.

The reason for this is that by incrementally building up my "content model" every time I needed a new piece of data, I ended up with a big mess that didn't allow me to access e.g. frontmatter data when building the index of all posts on the blog.

In the end I got out of the project what I was looking for: I learned a lot about how to configure babel and webpack, what JSX compiles to, how to use React contexts and hooks, how to work with Markdown programmatically (remark!).

Luckily migrating styles and layouts over to gatsby.js — what this site is now built on — turned out to be pretty straightforward.