Make your site faster, leaner and more badass with Gatsby

Dec 1, 2019

My new website is finally completed. This month I’ve decided to finally close the project completely emptying my backlog. Here it is a redesign of a redesign that I’ve started 13 months ago (initial redesign started about 2 years ago…, so yes the pace is astounding)

In the meantime, I’ve decided to switch the underlying technology. For most of the client’s project I go with WordPress, it gives extremely high options of modifying layout and creating new pages through ACF flexible field, and now Gutenberg editor. It offers familiarity, robust plugin ecosystem and ease of content management for editors. With my project, I wanted to have more fun with the website and decided on creating the front-end layer in React. Unfortunately, WordPress isn’t the best for that (although it got much better, Vue is still the way to go for modern front-end tasks).

The CMS that „powers the internet” seems like too much for me. I don’t want to create lots of custom posts, deployment is painfull and since I’ll be the one maintaining the site I tend to leave some sections hardcoded in template files or partials (I prefer to change the content in code rather than going through a CMS). Additionally moving content between databases (local and production) and a bunch of other issues related to security made me more confident that WordPress isn’t the way for this project.

WordPress simply felt like too much work.

The great search for alternative

On the 15th of November, I’ve finally found time to rewrite the site. But the 2-year old question remained:

If WordPress is out, what should I use instead of that?

During the 2 year road to redesign, I played around with different tech stock. When starting the redesign I had more time on my hands and wanted to build the site from scratch using Ruby on Rails 🤪. I gave up pretty soon after hacking together after basically re-creating a CMS. Rebuilding full CMS was too time-consuming, and a pain to keep up, not to mention the need for a dedicated server for running the app. But I had some time to test out React on Rails package, and discover server-side rendering 🤓

I decided to create a website backed on top of the available tech. Reinventing the wheel seemed wrong at this point. I looked at numerous other solutions among one - Statamic (a really good alternative to WordPress), but it still felt bloated.

Finally, I’ve decided to go with React on the front-end and Netlify CMS as a simple CMS solution. The last part was to bind them together nicely. That’s where Gatsby came in.

Holy trinity of speed - Static, CDN & Gatsby

After 8 days of work to move the site to Gatsby I’ve moved all the content, configured SEO, sitemaps, added new content to the site and moved old articles.

What’s so special about Gatsby?

Gatsby is a static-site generator framework, that takes a react app and outputs HTML, JS, CSS. Which means there’s no need for a paid hosting solution, and you can deploy it straight to CDN.

Netlify - my new favourite hosting solution

For my hosting solution, I went with Netlify. They provide awesome additional features, such as forms integration, serverless functions, DNS management with integrated CDN and much more.

Thanks to using Gatsby & Netlify I was database free, with everything backed up on GitLab and continuous deployment via Netlify.

The biggest advantage of the move to Gatsby was pure, raw speed. The site felt much more responsive and snappy, loading on poor mobile internet speeds fast. Just by clicking from page to page quickly it was obvious that the static site was instant, and the WordPress site had a visible delay. I was also able to add more dynamic components (i.e. projects portfolio filtering).

Finally, I don’t have to worry about getting hacked (I had over 2500 brute force login attempts monthly using WordPress) because there is nothing to hack.

Pros of Being Database Free

The idea of being database free is exciting for at least a few reasons:

You can commit everything to version control, and push and pull changes.
No database syncing. Ever.
It’s super-fast, even on cheap hosting.
Static files are not hard to serve quickly.
Markdown is the main syntax in which you write posts. I use iA Writer for all of my writing, I finally don’t have to change the syntax on upload.
Modifying templates and site structure by just changing files around locally is a refreshing experience.

Should you use Gatsby for your next project?

Gatsby is fun, fast and relatively easy to set up. I was way more productive than using anything else, but it’s not for everyone.

I started coding in JS back in 2015, it’s my go-to language for most of the projects. Over the years I gained experience with modern Javascript frameworks and build tooling, picking up Gatsby wasn’t a problem. Saying that, if you don’t feel comfortable with modern Javascript, this is probably not the thing for you

Things that I loved

Writing in markdown in my text editor then pushing to git is a treat.
Using Javascript for templating is cool, I love smart templating solutions (Rails, Laravel), but this flavour is still my favourite.
Minimal GUI of Netlify CMS is amazing, and you don’t have to touch it at all.
GraphQL is really, easy to set up and plugin to components.
Adding collections (a.k.a. Post types) is a breeze.

Some things were confusing

Setting up a simple blog site from scratch was pretty confusing, but if you just use the starter template it’s easy.
SEO is a pain to work with. I’ve ended up creating custom helper to set up titles and meta tags.
For non-developer folks out there, making any significant changes is near-impossible (except adding changes in Netlify CMS)

Gatsby is only a front-end framework, but it can be used with multiple plugins to build a comfortable alternative to WordPress.

Netlify CMS is simply amazing - minimalistic with features that are more than enough for most websites out there. You can use data from lots of different sources with Gatsby, even WordPress.

If you’re open for a challenge to have a diabolically fast website with minimal setup, without hosting headaches and complicity of WordPress - go for it.

Gatsby is worth it. I’ve decided to run all private sites on Gatsby from now on. It’s faster and cheaper to develop and maintain.

If you want to play around with Gatsby I encourage you to test out gatsby-starter-netlify-cms starter theme I used this as my starter for this project.