Navigate back to the homepage

Why (and how) I moved to GatsbyJS

Mark Brown
April 5th, 2021 · 3 min read

⁉️ Why?

Honestly - the main reason I chose to move away from Wordpress and to GatsbyJS wasn’t to upskill in the #2 Web Framework from 2020 (according to stackoverflow) - but just because.. I liked it better.

🤔 What is Gatsby?

GatsbyJS is free, open-source, and React-based. It’s desiged to help developers build performant websites using static site generation. With my skillset in frontend development (read: none), this perked my ears up - up until now I hadn’t really liked the appearance of my blog (entirely through fault of my own), and the Novella theme made it all sound so straightforward to produce something I liked the look and feel of.

⚡️ What are static sites?

Although new to me, static sites are not a new concept - it’s just some HTML, CSS, and Javascript. There is no rendering at runtime, and there is no server-side code, no database etc. Having first-hand experience at writing some SQL injection bugs, I knew that could only be a good thing for this blog.

A static site generator is a tool that generates static sites (🤯 - I know), during build time. Then, once loaded, React takes over, and you have a single-page application!

Some of the other benefits of static sites allowed me to make improvements in speed, SEO, and security - without having to do anything! Allowing me to focus on writing posts, instead of pushing pixels about, or attempting to navigate through the maze that was Wordpress.

🙋‍♂️ What if you don’t know React or GraphQL - can you still use Gatsby?

It certainly helps to know more about these to improve and build upon the starter projects - but I still know almost nothing, i’ve had to tweak a few .js files to add dependencies, and I couldn’t yet even tell you where the GraphQL code is 😅 - most of my contributions have been in markdown, which I’m fairly comfortable with 🤷‍♂️

😎 So what are the real reasons I moved to GatsbyJS?

I’m just a simple, lazy guy - switching to GatsbyJS looked like it would allow me to create a blog that I liked, importantly with no effort required from myself to learn any more of the codes (at least initially). But also, out of the box it gave me;

  1. Dark-themed code snippets 💯
  2. Dark theme toggle on my entire blog - because everyone knows light theme is bad for you.
  3. Ability to write posts in markdown 😌
  4. A nicer-looking site, in my opinion 😍 (but you know what they say about opinions…).
1// Method/Variable names have been changed to prevent plagarism detection
2private boolean isEven(int number) {
3 String numString = String.valueOf(number);
4 String lastChar = numString.substring(numString.length() - 1);
5
6 if (lastChar == '0' || lastChar == '2' || lastChar == '4' || lastChar == '6' || lastChar == '8') {
7 return true;
8 }
9
10 return false;
11}

👨🏻‍🏫 How to create a new GatsbyJS blog

I use npm alongside the gatsby-cli to manage my dependencies and build my site for testing etc, therefore you will need to ensure you have both installed and running.

Getting started with Gatsby Starter Novella

The theme I use for my blog is built on top of the Novella theme, who helpfully provide a starter repo - this can be installed like so;

1gatsby new my-site-name https://github.com/narative/gatsby-starter-novela

That’s almost everything(!). Now, the final step is to run a local developement server to allow you to make changes to your site;

1gatsby develop

This will start your site locally and it can be accessed in the browser by navigating to http://localhost:8000/.

From here, all that’s left to do is add yourself as an Author, add a post, and update some of the site metadata - which the contributors have documented at the links provided.

Hosting your site on Gatsby Cloud

I chose to host my new site on Gatsby’s own hosting solution - Gatsby Cloud, mainly because of their pricing tiers (free for small projects!) but also because they provide a Real-time Preview, Content Management System (CMS) integration, and automated Lighthouse reporting on each deployed version of my site. On top of all this, for me to add new blog posts - I just push to my GitHub repo which is pre-authenticated with Gatsby Cloud and the commit hooks deploy a new version of my site automatically!

f

💅 Conclusion

Moving to GatsbyJS, for me, was relatively pain free - I was up and running with a clone of the Novella theme in minutes, and I only had 5 posts within Wordpress to move over - so a simple copy and paste job worked for me! With this change, I now have a blog I prefer the look of and more importantly, one that I find easier and faster to contribute to. At times, I found Wordpress quite heavyweight to add new content to, whereas now I can add new posts to my blog just by making a few new files in my repository and pushing it to Git!

More articles from Mark Brown

How to introduce a Cartesian Product into your generated queries

When working with an ORM, it is essential that you inspect your generated queries. Often when doing so you will find they are not entirely what you expected. The CriteriaBuilder API can be very useful for building dynamic queries, but you must take great care – especially if you let your UI generate many _wonderful_ queries to fulfil all of its filtering/sorting/etc.

February 24th, 2021 · 1 min read

Activate Hibernate Query Statistics to investigate your performance issues

Often, you’re may find yourself wondering why application performance has degraded – and almost always that issue originates from your persistence layer. You can interrogate your query statistics in SQL Server using some of the built in (Transact SQL) views – which have been invaluable before to me investigating issues in customer environments.

January 31st, 2021 · 1 min read
© 2020–2021 Mark Brown
Link to $https://twitter.com/marktjbrownLink to $https://github.com/mtjbLink to $https://instagram.com/marktjbrownLink to $https://www.linkedin.com/in/mark-brown-9952b4a8/