Adventures With Gatsby

Featured image credit: Simon Abrams on Unsplash

Attention: This is a long post!

If you’ve read any of my recent posts, talked to me in person about web development/attended Homebrew Website Club Baltimore, or follow me on Twitter you’ve seen me proclaim how much I enjoy using Gatsby. I discovered Gatsby in March when reading about Netlify and #JAMstack, and I recently have reflected on how much Gatsby has inspired me and invigorated my interests in web development. I wanted to write a post outlining how I ended up discovering Gatsby and how it has shaped my current pursuits.

The Road to Gatsby

In September 2016, I became involved with the IndieWeb through co-hosting Homebrew Website Club with Marty. During this time, I reinvigorated my interested in web development. I previously (and still do) lots of web related work in my role at Digital Harbor Foundation (DHF), but I hadn’t really invested attention in my own site or development prior to September 2016. However, when we started HWC Baltimore, I finally created my own site and began to devote lots of time to learning as much as possible. I’d had a solid foundation in HTML, CSS, JS, and web content development, but never explored further than the practical skills I needed for work. The “TL:DR” of this is that in September 2016, I created a web presence and embraced static site architecture as the way to do it.

I chose Hugo at the time and loved it. I picked Hugo because I wanted to explore static site generators and try something other than WordPress since I use WordPress at DHF. Hugo was very appealing because of how fast it was, and I saw it as a good way to learn Golang, something new and interesting. I figured that using this as a medium to explore a new language would provide equal parts motivation and excitement. I was correct.

Photo by Aliis Sinisalu on Unsplash

Waxing and Waning…

My initial excitement lasted about a year. If you read any of my posts from June 2017 to September 2017 I debated switching back to WordPress for months. In September 2017, near the one year anniversary of HWC Baltimore, I migrated my site back to WordPress. I stayed with Nginx and my DigitalOcean droplet but shut down my Hugo site and transitioned much of my content into WordPress. In recent months I’ve come to find this somewhat funny as I mostly read posts and articles about people doing exactly the opposite.

Why I Switched Back to WordPress

It’s difficult to succinctly summarize a decision process that spanned several months, but I’ll touch on a few of the key points (again, the TL:DR-ish version):

1. I wanted to leverage my existing WordPress knowledge and experience to streamline my writing process
2. Continuing from point 1, I wanted to become a resource for helping people new to the web, and IndieWeb, get set up on WordPress and begin IndieWeb-ifying their content
3. I thought that using WordPress for personal interests, as well as professional, would level up my existing skillset

Looking back at these points, I wasn’t far off the mark on all of them. Upon switching to WordPress, my writing output remained roughly the same as when I was writing Markdown with Hugo. I thought that WordPress would streamline my workflow and remove obstacles. I was wrong. The obstacles weren’t technical or process-related, but rather motivation related.

Regarding point 2, I could definitely have done more to help the community. I tried to help our HWC attendees but realized that for many people WordPress isn’t the correct answer. My personal productivity and interest seemed to wane as I wasn’t really contributing at the level that I wanted to.

Regarding point 3, I definitely boosted my WordPress skills as I could experiment on my personal site. This greatly increased my confidence and skill professionally, so I’m pleased with that point.

However, around December 2017 – January 2018 my productivity and personal learning began to wane. I wasn’t as interested in building skills because I felt like I hit a wall. My motivation was at a low point and I wasn’t actively learning new skills. I’m driven to learn, so I know that when I lose interest in actively learning something isn’t quite right. Fortunately, it was around this time Marty and I c0-hosted IndieWeb Camp Baltimore. After this event, my interests and excitement were once again sparked and I began to voraciously explore web technology.

#JAMstack

During this period of renewed vigor and inspriation, I became aware of #JAMstack and technology such as  Netlify CMS. I realized that it wasn’t WordPress itself that I loved, but rather how much I enjoyed authoring content in a CMS. I’m no stranger to creating web content, as I’ve written nearly 700 lessons in WordPress for DHF youth and educator courses. However, upon discovering the technology surrounding the JAMstack, my personal productivity level skyrocketed as I began learning and applying skills each night. From February to April, I tracked my progress in my Learning Logs. I felt excited and confident to learn new technology, and at this point, I became intrigued by the #JAMstack. For each new concept or technology that I explored, I made sure to spend time rounding out my core HTML, CSS, and JS skills. I made this decision early on — I deliberately chose to solidify my foundation as I waded through the waters of these new stacks. This decision was one of the best I’ve made as far as my technology education, and a process that I highly recommend.

Discovering Gatsby

JAMstack immediately made sense to me, and through exploring Netlify and their excellent resources and tutorials on the JAMstack, I discovered Gatsby. Gatsby was instantly appealing to me. I felt the same excitement that I did when I first discovered Hugo and static site generators. I also saw this as an excellent opportunity to start learning React. React had been on my radar for about a year, but I never devoted proper attention to learning it. Instead, I spent time leveling up my HTML, CSS, and JS skills without diving into any framework. In hindsight, I’m extremely happy that I made this decision. If you’re interested, you can read more about that in my previous post on the topic: Brief Reflections on Learning Technology.

In March, I finally decided to begin learning React in earnest. I started reading up on Gatsby and was pretty amazed by the incredible things that their team included in it! Through Gatsby, I became exposed to lots of modern best practices that I was completely unaware of and started using Gatsby as a way to frame my development and guide my learning.

Gatsby Thus Far

Once I read more about Gatsby and saw that I could “bring my own data source” I immediately saw the potential in switching my site to a headless WordPress — the concepts of a “headless CMS/headless WordPress” and “decoupled CMS” came into my radar as a result of these explorations. I was very intrigued, but was having trouble committing without doing more digging.

When I get excited about something I tend to unpack and learn core pieces involved before diving into the framework itself. With regard to Gatsby, I decided that before completely embracing Gatsby as a solution for my personal site, I wanted to do the following:

1. Learn React so that I could use Gatsby to level up my React skills — It did, by the way. Learning Gatsby helped me improve my React skills, which in turn helped me improve my JavaScript skills.
2. Learn modern CSS best practices, such as Styled Components and CSS in JS (and wow, lots of controversy)
3. Build out my understanding of optimization and modern best practices
4. Understand the importance of Webpack

I began to pursue all of those points while still following and experimenting with Gatsby. I didn’t want to completely embrace it without having a grasp on the core technology first, but this is where I realized something about my learning processes…

Photo by Andrew Bertram on Unsplash

Insights Into My Process, and Flow State

I realized that the way that I learn best is when two seemingly opposite spheres align: 1) when I have a variety of exciting projects that I’m working on, and 2) through very deep, thorough research and analysis. When I’m able to balance these points, I achieve a flow state and quickly absorb concepts and my productivity soars.

However, I’ve also realized that these points are often at odds with each other and I need to take care to ensure a balance. For example, in Spring 2017 after winning the 2017 Abilities Hackathon Leisure Category, I was very driven to create a variety of projects. My inspiration was soaring, but I lacked the ability to contain my scope and vision and became too scattered to actually focus on completing anything. My interest in projects was there, but I didn’t balance it with enough research and analysis.

For an example of the other side of the equation, this March and early April I became entrenched in conducting research to the point of decision fatigue. I was passionately learning about lots of things but got stuck in the eternal (modern) existential question of “React or Vue?!!?” and ended up reading articles and listening to podcasts more than actually writing code and creating. It wasn’t until Marty advised me to pick a project and work through it that I was able to find an adequate balance between both approaches and enter a flow state for learning and productivity.

Gatsby as the Medium, and Inspiration

Since devoting my attention to Gatsby, and therefore React, I’ve now worked on four diverse projects with Gatsby. I created a culture slide deck for DHF, a youth staff handbook prototype for DHF, a handbook and documentation guide for a local college radio station, and another upcoming project for DHF. While these are all hosted on Netlify (my love for Netlify is another long post I intend to soon write), they’re not quite ready for public visibility yet so please forgive the lack of links. I’d like to wrap up this post by discussing the upcoming project for DHF as well as my personal plans with Gatsby.

As part of our Expanding Tech Education initiative, we’re providing Maker Foundations, one of our flagship courses, to three external programs. All of our course content is written in WordPress and is accessible to the youth and educators that we work with through our custom WordPress LMS. However, for this particular initiative, I saw that Gatsby’s blazing speeds and ability to be a Progressive Web App would make a lot of sense for the external sites. I’ve been working to load the Maker Foundations content into a Gatsby frontend using our WordPress content as the data source.

The reason for this choice — instead of merely copying the raw HTML of the course — is that I want to have our existing content be a source of truth. If I update the content on our WordPress site, I want the external site content to also update. I realized that this would be possible by triggering a Gatsby rebuild. I’d get the benefits of everything Gatsby has to offer while still being able to write and manage our content in WordPress.

I’m personally excited about this project because it provided a great solution. I think that Gatsby has lots of potential benefit in this arena — the architecture is so solid and progressive that it can reach people where internet activity isn’t guaranteed. My goal is to leverage all of Gatsby’s excellent features for offline support, as well as the built-in optimization, to deliver course content even if connections are unreliable. Designing for optimization and accessibility benefits everyone, not just those who critically need it.

What’s Next

This answer is two-fold. Personally, I’m already planning on migrating to Gatsby v2 for my personal site (which is still WordPress). However, the big decision I’m making right now is whether to actually stick with WordPress or to use something like Netlify CMS or Contentful instead. One reason I opted to use WordPress was that there is a lot of great community content and resources for IndieWeb on WordPress, including plugins. However, I’m much more confident in my skills now so instead of relying on the tools created by the community I want to create IndieWeb tools for the Gatsby community. My plan, through migrating my site, is to create a Gatsby IndieWeb Starter that incorporates support for IndieWeb best practices while leveraging the excellent architecture that Gatsby provides.

Professionally, I want to continue to build out Gatsby (and #JAMstack) sites for clients and friends while also including it in my work with DHF. I’ve now used Gatsby for three different DHF projects because of its flexibility and as I become more familiar with it, the possibilities keep expanding.

I’m going to wrap this up because this is quite a long post. I just wanted to mainly share my experiences thus far with an amazing technology and remark on how sometimes it’s crucial to have a framework or a tool guide your learning.

Thanks to the Gatsby team for creating an incredible, and inspirational product that really is making modern web development a better experience.