umstek blog

My React+Markdown blog journey (Part 1)

☕️ 3 min read

I had the idea of creating a blog since at least 2010. In fact, I did create several blogs (https://umstek.wordpress.com/, http://www.umstek.co.vu/, https://bunnydebugs.wordpress.com/) and some of them even had custom domains, I got for free. After becoming more of a programmer than a multimedia guy, I decided that I needed a custom blog — or a website.

Since my focus was a static blog, that also had few custom pages to showcase what I have developed, I decided to go with Jekyll on GitHub pages. Selecting GitHub pages as the hosting space is the best matching choice because of several reasons. I only need to add a file to the remote repository hosted on git, with virtually unlimited space, to trigger a build and update my blog. I can even use GitHub’s web UI to write a post! As far as the limitations are concerned, I didn’t need any database connectivity or use of any APIs that needed authentication.

Jekyll, on the other hand, was the preferred choice with GitHub pages, although now you can just add some HTML pages or Markdown and configure GitHub Pages with a theme to build a site instantly. Even if I could do that at the time, I needed the ability to customize my website. My relationship with Jekyll was fine initially as it was already familiar to me with the liquid template engine, which is used to generate HTML pages (you need pages other than markdown posts, and navigation etc.) — I had used Symfony (v2 and v3) which was (is?) a popular PHP web framework with a template language called twig, which is similar to liquid. But it became uncomfortable when I had to touch Ruby to get some things done. Jekyll also had some problems with Windows and I had problems with Linux.

Anyway, I didn’t have much time to write posts, as I was busy with academic work and other work, such as finding the perfect blog platform rather than writing blogs on what is available.

I don’t remember when I decided that I needed a new blog site but should be around January 2017. But I know why I wanted a new site: React was beginning to be the de-facto view library and NodeJS was already popular. I accidentally learned React and was obsessed with it.

So, I needed to write posts in markdown, other pages and the site in React, and to have the site SEO ready. Since I was still going to host the site on GitHub pages, SSR was not possible (and not needed, since the content was static) because there was no server. But, if I can get the rendered HTML once per change, it was what I needed. After researching, I found GatsbyJS, which matched all of my obsessions.

GatsbyJS is an entire ecosystem which lets you create static progressive web apps with state-of-the-art tools like React, GraphQL, Markup(down) together with APIs that brings data to the site. Everything is built before publishing on your preferred platform (gh-pages, netlify, now.sh etc.) so it’s plain ol' HTML with additional CSS/JS and other assets. I used the gatsby-advanced-starter boilerplate and it’s even configured with more plugins such as image compression, tags, SEO and Google Analytics. I added the magnificent Grommet UI kit from hp (?) and was good to go.

Of course, the journey didn’t end there.