GatsbyJS:


and my experience with web development.
Edited: 29 January 2019 at 2:18 pm UTC

Thumbnail for this post

So let me paint the scene for you first:

I'm not normally fond of Web development. I'd much prefer write a program in Python or Java or (even C# for that matter) than spend my time mucking around with dozens of different frameworks, conventions, etc. However; I'm not blind, nor am I stupid. I'm very aware that Web development is the way of the future in this industry and I'd like not to be left behind before I've even gotten a job. I've been meaning to build myself a personal blog / portfolio for a few months now - but I didn't know where to start. The most recent web development I'd done was at ThoughtWorks' LevelUp Build program which used a custom built framework using Handlebars, JEST, and NodeJS. I found it really easy to use and was astounded at how simple some things are in web development. Unfortunately, the framework wasn't really designed for creating REAL webpages and more so a cute little webtoy that emulated a not-so-smart smartwatch. (I loved LevelUp though and would totally recommend it to my Developer friends.) Regardless, I felt I was at a loss for where-to-start again. I decided to ask the ThoughtWorkers and my fellow LevelUp-ers for some advice and they said 'Just start from scratch with raw HTML, CSS, and JS.'

So that's what I did:

I wrote a very crude site with a header and a footer but I soon realised that I was copy-pasting code all over the place and it never quite looked the way I wanted it too. I felt really frustrated that I hadn't really progressed since Year 10 IST in terms of Web Development. I could visualise a nice looking website and I could almost get what I wanted but being a perfectionist - I never felt right posting it. If I was going to make it in the software industry - I was going to have to work this out.

'and then the lightbulb went "dink"':

I was at work one day; think it was a Wednesday, and we weren't very busy so I was checking my phone when a LinkedIn notification came up. A mentor from a bit of work experience I did; Ben, had posted about his personal experience moving his blog to something called GatsbyJS. The post went onto explain what he'd done previous, what GatsbyJS was and why he switched. This sounded perfect for my use and planned to look into it when I came back to my Website project.

gatsby-website

So what is GatsbyJS?

GatsbyJS is a Static Site Generator. From my understanding; GatsbyJS lets you write React based elements and populate them with GraphQL; a query language like SQL, and then it compiles them all down into static HTML files. While I don't believe I'm qualified to comment on the benefits and drawbacks of such a setup; click here to read Ben's post if you want read about that, I do feel I can provide a different perspective; as a complete noob at Web Code, my experience with GatsbyJS must've been pleasant enough for me to actually have published my site with it, right?

The one word answer? YES. GatsbyJS; while a little complicated at first, did really simplify what I wanted to be so when I was writing stuff from scratch. Here's a bunch of things I loved and hated about my first experience with GatsbyJS.

Loved:

React based components:

I've never worked with React itself but I've heard about it and now I see why it's so popular. GatsbyJS is based on React and so you can get the functionality of React without the full hassle of setting it up. Definitely scores points for being easy to use.

Deployment Options:

GatsbyJS is great because it literally spits out raw HTML which means you can host it practically anywhere. No need to install it onto a WordPress server (or anything of the sort); which also means not having to pay for one because you can post this to GitHub Pages for free.

PLUGINS!!!:

It has so many plugins and a great community behind it. Things are really simple and easy to install - no harder than a node package. Things just work. I've got a plugin for Sass and a plugin for that above-mentioned GitHub Pages deployment.

Hated:

Documentation:

I really didn't like the documentation for Gatsby (for reference: I'm talking about the Tutorial). I found it really didn't explain the individual lessons enough; instead relying on someone following the tutorial all the way through, which left me confused at times. Now in saying that - I'm not one who likes to read tutorials nor do I learn well from reading them so maybe I'm not the target audience with this one.

Nothing else:

Really, that's it. I really didn't have much to dislike with my experience using Gatsby.

In saying that - there were plenty of frustrating moments not-exclusive to GatsbyJS. CSS has always felt like witchcraft to me and I genuinely don't believe I deserve to have my site look as nice as it does for how little I understand about CSS. However, I've definitely learned more - Flexbox, assigning multiple classes to an element, etc. and I look forward to continue to develop my skills.

So... I've gotta wrap this up somehow because it's 2:17am right now and I have the League Of Legends World Championship Watch Party tonight.

I would definitely recommend GatsbyJS as a solution for someone looking to host a simple blog / picture gallery. I'm genuinely not sure of it's limitations; being that it's a Static Site Generator, but I'm definitely going to discover them as I try to push them. This process wasn't without it's headaches but I'm sure this will all seem relaxing in 6 months as I continue to grow as a software developer and as a person. Thank you for reading and I'll hopefully be read by you another time!