New Year, New Site

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.

Related Posts

2021 Desk Setup

2021 Desk Setup

A closer look at my remote work configuration

Tech Upcycle - Running Ubuntu Linux on a 2007 iMac

Tech Upcycle - Running Ubuntu Linux on a 2007 iMac

Breathing new life into a 15 year old computer

15 Years of Drupal

15 Years of Drupal

A look back at the platform that started it all

Digital transformation or digital adaptation?

Digital transformation or digital adaptation?

The Agile Digital Transformation Podcast