Skip to main content

New Year, New Site

Simplifying my stack and picking the right tools for the job

V1 Jumping on the Gatsby+Drupal Train #

The previous version of my site was built around Gatsby and headless Drupal. If you're unfamiliar with the term headless, it's taking the backend of your website (where the data lives) and separating it from the frontend (what the users see). This allows you to create your content APIs using any source and have that data drive the presentation layer that makes the most sense for your team. I'd seen several digital agencies and developers move their sites to Gatsby, so I wanted to see what the hype was about.

I've always loved the flexible content modeling available in Drupal, but headless CMS's are growing in popularity and I wanted to break free from the Drupal theme layer to utilize other tech for the frontend. There were also some exciting performance optimizations added to Gatsby and I was looking forward to spending more time with React and GraphQL.

I started with familiar territory by spinning up a Drupal 8 site, setting up my content types, and firing up JSONAPI. Next, I installed Gatsby using the Quick Start tutorial and added the Gatsby Source Drupal plugin to start pulling content out of Drupal.

Getting up and running didn't take long, but I quickly realized this solution was overkill for my needs. Though fun to put together, I didn't need a CMS, a headless solution, or the maintenance overhead. What I really needed was something lightweight where I could write ideas on my laptop, or iOS device, and quickly publish them. Brian Lovin touches on this in his post Reasons You Aren't Updating Your Personal Site. Updating, deploying and maintenance was taking too long. I wanted a solution that felt closer to working with static HTML.

Enter 11ty #

I've seen a few post from developers mentioning 11ty. From reading their experiences, it sounded like it could be the no frills solution I needed to publish content quickly without moving to a fully static implementation.

Setup was a breeze, and I didn’t find anything missing from the documentation to get up and running. It's not as simple as writing pure HTML, but creating posts as Markdown files, committing to GitHub, and auto-building to Netlify is a really simple workflow. Progress!

Finding Momentum with TaildwindCSS #

Another goal of this project was to get this site out quickly while making it easy to make changes and add sections in the future. I want this to be a playground where I can think of an idea in the morning and push to production the same day. While I’m a fan of Sketch and Figma, designing (and I use that term loosely) in the browser was all I needed.

I know there are strong options on Tailwinds and even if CSS frameworks are needed at all with the death of Internet Explorer and all the capabilities supported in modern browsers. I don't disagree, but wanted to see what all the hype was about firsthand. I was able to get most of the styling done in an afternoon and move on. Again, no frills.

Welcome to V2 #

So, here we are with the next iteration. I can commit markdown files (written mostly on my phone using iA Writer) to GitHub, and a build command runs that updates 11ty and republishes to Netlify. No security updates outside of node packages and I was able to simplify my publishing workflow. Mission accomplished.

I have lots of ideas and enhancements planned, but I’m a fan of launching quickly and refining along the way. The beauty working in digital is we can always make tweaks. And that’s my desire for the space — to always be in a state of refinement.