Screaming Code Monkey

Ok. So I decided to rebuild my site in Gatsby and use a WordPress backend. Why? Because I like hurting myself. That’s why.

The why

I’ve had a taste of the JS rendered goodness that is Single Page Apps [SPAs from here on in] and I liked it. I enjoyed writing markup templates like handlebars and jsx.

Going back to writing PHP *and* WordPress PHP templates at that, seemed like a step in the wrong direction. Work had been using timber templates which felt like a nice compromise but honestly that just adds an additional layer of complexity to WordPress theming.

I would like this site to be experimental, and most of my experiments involve front end and JS. So I liked the idea of splitting my code and simplifying my CMS needs.

WordPress

Now I’m not going to just run to the next CMS and jump into bed with it. I’ve been using WordPress for 10 odd years [trust me, it’s been odd] So keeping WordPress as the constant seemed to make sense.

I love the new editing experience, [controversial I know] and want to keep working on WordPress. It’s got a special place in my heart. Though I am looking forward to stripping WordPress back to just the JSON API. I’d like to see if I can make the API more structured going forward.

The front end experience

Now I’ve built this site a couple of ways in the past; and to SEO gurus horrors, thrown away a lot of good traffic by rebuilding it without keeping track of redirects or content! 😱
I’ve built it the old fashioned way: PHP, SCSS, JS with Gulp or Grunt or webpack. My fav of this was webdevs _s but with their webpack branch [stale now].

I also built the site with ember.js. That worked well, however hitting the API for page loads was really slow which really bummed me out. Also as much as I loved the upgrade process with Ember it was pretty time consuming.

Enter Gatsby.js so, static site generator with a WordPress content source. Tied together with GraphQL. All the shiny new things!

So why Gatsby? It’s fast. Super fast. Most of the site is going to be static no forms or e-commerce. So generating it will be fine. So far I’ve had a few gotchas, but overall enjoying it a lot more than the Ember lag.

I’m also really keen to learn more about GraphQL and building up my React knowledge.

The setup

I have a standard WordPress site with a couple of plugins:

• ACF to API
• Advanced Custom Fields Pro
• WP Menu API
• Webhooks Plugin

I have a Netlify account for the site that is hooked up to my Github account.

I have a web hook on Netlify that gets hit up via WordPress when I want to build.

I followed along to levelup tuts Gatsby 2 tutorial. Props to Scott Tolinski he’s kept it up to date and relevant.

Things I really want to get working on the site:

• Comments [Forms / Dynamic Content] Just to try out some Apollo
• Image layout options