Lancecore • A blog about web performance, web design, and web development

New Year, New Tech

Posted 01/11/2017

new tech, who dis?

Part way through 2016, my wife and I decided to go into business together. Previously, I had been doing freelance web design & development, and using this site to promote myself. Once we got our business’s site online, this site was no longer needed as a promotional tool.

Instead, I could use it to realize a dream we've all longed for: a space to write, freely, without worrying about "creating content," without any guidelines to follow, and, of course, an excuse to experiment with new technology!

Some Background

Most of my career has been based around WordPress, so my development knowledge mainly consisted of what I needed to know to deal with WordPress: HTML, CSS, PHP, and front-end JavaScript.

I’ve played around with Node and npm a bit, and, for a while, my wife’s blog ran on Ghost, but that was about the extent of my backend JavaScript experience. If something broke in my wife’s Ghost installation, I just reinstalled and hoped for the best. I tried to learn what I could, but the entire concept behind JavaScript frameworks was something I had trouble wrapping my head around.

(As an aside, my wife’s blog currently runs on WordPress for a variety of reasons, one of which was definitely my ability to troubleshoot if necessary.)

But now I’m free to experiment. I’m no long constrained by the need to use this site professionally. If things go south, I can nuke it all and start from scratch. Even if I lose everything, I can just start over, NBD!

Searching for a New CMS

If I was going to use something other than WordPress, I wanted something that was very different. If I was just going to end up running another PHP-based CMS, I might as well stick with WordPress.

My plan for this site was what you see now: a very simple, text-heavy blog. I wanted to find a CMS that was made for something simple, without too many features for things I would never use. Again, if I wanted feature-heavy, I could just stick to WordPress or another PHP-based CMS.

If this site was going to be text-based, then it should be fast too. I don’t need the site slowing down to load 30 different scripts and plugins just to display some text. This lead me to looking at flat-file, database-less systems.

I hunted through Google and looked at every flat-file CMS I could find, from the more mainstream, like Jekyll, to the more obscure. I tried out a few of the more promising ones, and finally settled on a CMS I’d never heard of before: Gatsby.

Gatsby: Build sites like it’s 1995

Gatsby is a React.js static site generator that supports Markdown, HTML, and React.js pages.

I don’t know what React.js pages are; I barely understand React.js even after getting this site up and running. But Gatsby fit what I was looking for:

  • It was very much text-focused.
  • It was easy to get up and running, without knowing anything about React.
  • It uses Webpack to show changes in real time, without reloading the browser. Makes writing and checking formatting, etc. much quicker!
  • By default, it runs your blog as a single page application, so there’s no load time between pages.

Another great feature of Gatsby is that it has what it calls “Starters,” sample sites you can create from the command line when setting up your Gatsby-based site. This is hugely convenient for a React newbie like me.

I ended up using David Konsumer’s awesome drunkenblog. A few things stood out to me in David’s Starter:

  • No page reload on internal links: Gatsby’s default handling of links in your posts is to treat them all the same, as if they’re all external links. This means that if you link to your own internal content, the page will reload, ruining the SPA/no page reload effect. Drunkenblog fixes this oversight.
  • Tags: Original recipe Gatsby doesn’t have tag support, drunkenblog does.
  • Post summaries: Default Gatsby is lacking this feature. Drunkenblog includes an easy implementation of it.
  • “Read next” post recommendations: Gatsby has an option that allows you to manually set a “read next” link for each post. Drunkenblog improves on this by allowing you to set the recommendation manually, or use its algorithm to suggest a post automatically. It finds 5 similar posts, based on tags, then chooses one at random to display.

Drunkenblog was also simply styled, which was something else I was looking for. I didn’t want to have to fight someone else’s CSS just to get my own minimal styling to work.

A Semi-Shaky Start

Obviously, I got Gatsby up and running; otherwise, you wouldn’t be reading this right now! It wasn’t without its glitches though.

There are some trade-offs when working with a flat-file CMS vs a database-based CMS. The big one, at least with Gatsby, is that the entire site is rebuilt when you publish something new. Even with my small, single entry footprint, it takes a minute to build everything before I can upload it. Compared to writing a single post in something like WordPress and having it almost instantly available, this is a big change.

(Of course, there might be a way around rebuilding the CSS, etc. every time and I just don’t know it yet!)

As I mentioned above, I went with the drunkenblog Starter because Gatsby’s default feature list was a little too sparse for me. I also added a feature or two of my own, and reworked some parts of drunkenblog to get things running the way I wanted. The lack of RSS doesn’t bother me as a reader, because I don’t use it, but I know a lot of others still use RSS to keep up with blogs like this one. That’s an area where Gatsby’s newness definitely shows.

On the speed front, Pingdom reports an initial load time under 1 second, and a page size of 394.2 kB, even with Typekit included, and the entire site loading on the initial page load.

In future posts, I’ll explore adding my own features to Gatsby, including the two different times when I tried to add features that were actually already included.

In the meantime, if you notice anything wrong or misinformed in this posts or others, please reach out on Twitter and educate me! I freely admit that I’m out of my depth here!

Lance Boer is a Digital Marketing Consultant at Cascadia South.