A new look and feel - Site Redesign 2018

Because who doesn't love something all new and fresh? (also my first post! 🎉)

At the beginning of 2018 I was over in the USA celebrating my first overseas new year's eve with my partner and her friends & family.

Every new year I've always subscribed to the whole "make some new year's resolutions" sort of thing but the problem I've always had with it is well... I hardly ever ended up doing them... or worse still - remembering what they were.

So this year I decided I'd try something a little different - this year I tried to make some very clear cut goals that I thought were achievable and would have measurable outcomes:

  1. Build a game and publish it on Steam
  2. Rebuild my website using my new Javascript skills
  3. Travel around more within New Zealand, take photos and create memorable stories
  4. Plan out and start completing some of the side projects I have on Github
  5. Get healthier; exercise, bike, walk and eat better

So now that we're over half way through the year, I can happily cross at least one of those off the list - Rebuilding my website using my Javascript skills.

So to celebrate (and also so I can write the first blog post for my new site) I thought I'd do a post about what I used to build it and how it compares to the old setup... hopefully someone will find it either enjoyable or useful to read 😉

Preface

So about November last year my friend @resir014 mentioned a static site generator for React called Gatsby. Essentially, it takes a react app and spits out static html pages that can be hosted, crawled for SEO and loaded super fast (because... well it's just HTML!)

Luckily for me, we had just begun using React to build applications at my previous job so I had enough of an understanding that I could begin to fumble around with it.

Looking back, some of the features that stood out to me with Gatsby were that:

  • it could be developed locally and then built on the spot with minimal effort
  • it could fetch data from remote resources at build time
  • it was easy to add pages and had very little domain knowledge required to get a single page up and running

My previous site (that this new one replaces) was a PHP application built on the Codeigniter framework which was arguably complete overkill... but it served its purpose and don't get me wrong, I like PHP and think it has valid uses and when used correctly it's fine.

However my old site being PHP meant that I had to upload files to the server every time I wanted to see if what I'd just written actually worked (note: I know you can do local environments but between composer and my bad experiences trying to install PHP on my machine and host it via XAMPP... I think it's best to just let that ship sail).

So being able to simply run yarn run dev and visit localhost:8000 was a breath of fresh air.

Under the Hood

As I've already said, this site is built with React + Gatsby but one of my most favourite additions of late has been styled-components.

If you don't already know what styled-components are; to put simply it allows you to write css in your js code.

Why's that cool?

  • it gives you the ability to use your colors and sizes in both your styles AND js code (meaning less duplication of constants)
  • being js, you can add more functionality simply with functions or libraries such as color or polished
  • no more less or scss overheads or additional build tools in the stack 👍

Beyond styled-components and standard React code though, the rest of the website is pretty standard issue if you're familiar (or even if you're not) with regular React applications.

The only other notable things I can think of are that I'm writing this post (and all future ones) in markdown which Gatsby converts to React via a template and that all the other content of the website is mostly stored in .json files so that I can easily adjust, update or change it on a whim.

Summing up

Overall, I'm extremely pleased with how simple this new site is to update, maintain and run - I simply make a change, run one command to test, then build it with another and finally deploy via good ol' ftp. Easy as. This workflow could be improved with some automated deployment from Github to my webserver but I'll probably tackle that at some stage down the road.

I've also just completed building a second production website with Gatsby (which will be going live soon) and the development experience was just as much a breeze the second time through.

Now that I've crossed off one of the goals for this year, let's see how far I get on those other ones... 🤞

I love freelance work, let's talk.
Copyright © 2017 Alex Gabites