Rebuilding the Blog

Background

About a year ago, Katie and I were just getting ready to embark on a trip out west. On our itinerary was the Grand Canyon, Lake Powell, Bryce Canyon, Zion National Park, and ending in Las Vegas. Knowing this was probably going to be the trip of a lifetime, I pondered ways we could document our adventures.

Being a web developer, I naturally gravitated towards the idea of a custom website. So over the course of a couple weeks I spent time building a photo centric blog using Jekyll.

Jekyll is a popular choice for creating static websites (especially blogs). Its powerful templating framework makes it easy to create webpages using plain old HTML/CSS/Javascript. Each blog is then written in a Markdown file. At build time, Jekyll will take each of your Markdown files and magically generate static html pages using your templates.

You can check out a live version of my decommissioned blog link here! (Github).

With the website complete, Katie and I departed on our vacation out west. I challenged myself to blog each day in an effort to capture each and every moment while it was fresh in our heads. Overall I was extremely happy with how it turned out.

There was just one problem

It was taking much longer to write a blog than I anticipated. The actual writing of the blog was easy. Believe it or not, the most time intensive part was actually getting the images onto the site.

Here is what that process looked like each day:

1. Select images
2. Prefix all the file names in order
3. Optimize images for mobile
4. Optimize images for desktop
5. List in order all the images names
6. Generate the “fade in” image
7. Base64 encode the “fade in” image

approximate time: 30min

I won’t get into the technical details here, but dealing with images on a website can very very tricky business. Unoptimized images is the #1 cause of a slow website. With 30+ images in each of my blogs, I needed to ensure a seamless user experience.

Coming home from that trip, I was successful in my “one blog a day” challenge, but it wasn’t easy. I just knew there had to be a way to streamline the process.

Making it Better

Fast forward about a year, Katie and I have an upcoming trip to Europe this September. With a strong urge to continue documenting our vacations, I just knew the old blog was not going to cut it.

Earlier in the year I learned of a new framework for building websites called GatsbyJS. This React based framework provides a build API that allows you to source data from practically anywhere and access it later using GraphQL. I quickly realized how transformative it could be for my blog writing process. Being a React fanboy, it was practically a match made in heaven.

Gatsby and Jekyll are similar in that they are both static site generators. You make some templates for your blogs, then you write them using Markdown etc. However, where Gatsby truly stood out was in its image processing capabilities.

Given an image, Gatsby will do all of this automagically at build time:

• Detect all image files and store in GraphQL
• Generate 4 different sizes for all screen types
• Optimize them
• Free “blur up” effect
• Generate an html <picture>

Now that my site has been migrated over to using Gatsby, displaying images for each blog is as simple as dragging and dropping them into a folder. Gatsby handles the rest, and I can get back to vacationing.

approximate time: < 2min

I could not be more happy with how the new blog turned out. GatsbyJS is an insanely fun framework to work with, and I look forward to using it for more personal projects

Check out the repo for this website here.