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:
- Build a game and publish it on Steam
- Travel around more within New Zealand, take photos and create memorable stories
- Plan out and start completing some of the side projects I have on Github
- Get healthier; exercise, bike, walk and eat better
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 😉
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
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.
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... 🤞