I'm finally doing it.
After months of thinking about moving my blog off WordPress, I’m finally taking the plunge, and I’m moving over to Gatsby.
Here’s the thing: I need you all to help me do it.
See, the only way I'm going to get this done is by doing it in public. The humiliation of not letting down my fans (of whom I assume there are dozens) will be the fuel to get this blog created.
Did I mention there’s a deadline, too? I’d like to have my site moved over before July 2019 (plenty of time, right? Right?) because that’s when my site has its yearly renewal to WordPress.com.
Avoiding a $96 charge would be great!
What the heck is Gatsby?
Glad you asked, according to the folks at Gatsby it is:
a blazing fast modern site generator for React
That might not clear everything up.
Gatsby is a static site generator like Hugo or Jekyll. Except it allows you to leverage technologies like React instead of writing in a templating language like Pug (not that there’s anything wrong with that).
Gatsby has a little more going on than most static site generators, though.
The same great things about all static sites are true about Gatsby.
They’re fast because they’re just a bunch of static pages.
They’re easy to host because you don’t need access to things like a database. Anywhere you can host static files (GitHub pages, Netlify, Surge.sh, etc.) you can host a static site.
Gatsby is a supercharged static site. As I said, all the good things about static site are true about Gatsby, but it also has a bunch of modern niceties, too. Things like code splitting, link-prefetching, lazy loading of images, and more features I’m sure I’m forgetting.
Beyond all that, Gatsby generates more than just a static site. Every Gatsby site is a React app which means they can be as dynamic as you want them to be. There are examples of Gatsby being used for such things as e-commerce sites and more.
Why move?
Not because I dislike WordPress. No, I actually like WordPress and owe it a lot.
I got my start creating WordPress sites for small businesses. The first "programming" I did was tweaking WordPress templates. The first JavaScript I wrote was jQuery spaghetti code for those same sites.
It also helped me get my site off the ground. One of the things that held me back for a long time from starting my blog was finding the time to build it.
WordPress allowed me to start writing and not have to worry about all the other stuff like maintenance.
But I do have reasons to move on. Here’s a few of them:
1. Cost
My annual renewal for WordPress.com is coming up. It's 100 bucks for the year which is pretty cheap, but there are some things that would be nice to have (Google analytics, for one) that would double the cost.
As far as hosting costs, Gatsby can be close to 0 using GitHub pages and a platform like Netlify.
Free is a pretty good price point.
2. Learning
A big motivation for me is to learn something new.
I see all sorts of avenues for that with Gatsby.
We all know that learning and side projects are important, but if you're like me, it can be hard to find the time. Full time work and a family can do that to you. I'd love to be able to spend time working on side projects, but I have to sleep at some point.
I don’t have the bandwidth to spend a lot of time on a side project without a clear ROI. Building out my own blog is the ROI that I need.
You may ask, why not VuePress, Jekyll, Hugo, or static site generator x?
Honestly, I just want to learn React better.
I know that when I spend time learning new things helps me be better at my job. The biggest boost to my skills as an Angular dev wasn't learning more Angular. It was watching Egghead tutorials by Dan Abramov on Redux back in the day.
It was seeing the functional concepts that were becoming much more common in React than they were in the learning material for Angular at the time.
So, I want to learn, and I've already mapped out numerous things delving into Gatsby I can learn about.
3. Speed
Gatsby is stinking fast, but so is my site now. Of course, I pay for that speed with money.
Speed usually comes at a cost. In my current case, there’s actual monetary cost, and in Gatsby’s case, there’s a time cost for me to build what I need.
The cool part about Gatsby is they have a whole bunch of people sweating over how to make it faster. While my site with WordPress.com is fast I know all too well that if I moved away from it WordPress sites can become slow as molasses.
Gatsby provides a ton of speed for free.
4. Gives me something to write about
One of my goals for 2019 was to write more. I’ve accomplished that so far by writing articles about things that interest me like productivity and habits.
But I also want to write about technical topics. My problem is I have ADHD when it comes to which technical topics. I’ll identify something to write on and begin learning and doing research, but before I’m able to actually start writing I’ll see something else to write on that interests me and hop over to that.
That’s a cycle I’ve been through a few times already this year, and I’ve published no technical posts.
The ideas are easy to come up with, the execution is what’s hard.
So building my blog in Gatsby dovetails well with my goal to write more. It gives me things to write about as I’m actually working on putting into practice the things I’m learning.
And it gives me focus. I want to build my blog, and I think that will be the motivation I need to keep writing.
My hope is that as I’m learning more about this ecosystem the fine folks at home would be able to learn too.
The setup
If you want to follow along as we go the set up is pretty easy.
If you don’t have things like NPM or Node installed you can start with Gatsby’s tutorial on setting up your development environment.
Otherwise, we’ll want to install Gatsby’s CLI:
npm install -g gatsby-cli
Once that fancy stuff gets finished you can use the CLI to create a new site:
gatsby new my-fancy-site https://github.com/gatsbyjs/gatsby-starter-default
Or, alternatively, I’ll be making branches for each step of my project that show how to do whatever specific thing I’m trying to do at the time.
I’m gonna try to do my best to keep things organized so that if I don’t explain something clearly enough in a post you can reference the code.
If you have any suggestions on ways I can make this series more helpful don’t hesitate to let me know!
Next stop
TypeScript! Because I can’t imagine developing anything on the front end without types these days.
—
Look to me to be posting more often about Gatsby as I actually build out my own website.
Until next time!