You’re reading hot dogs and eggs, a blog by Chris Gallo since 2014.

Jousting with Jekyll

This post will take you about 2 minutes to read.

One responsibility of the support team here at Highrise is to maintain our Extras page.

What’s the Extras page?

It’s a list of all the 3rd party products that integrate with Highrise. Almost all were built by the 3rd party using the Highrise API.

This page is important for current and future customers because people use more than one product to get their work done. And these integrations can often save people tons of time.

But it became an absolute pain to manage for us.

Why?

There are a whopping 63 different listings on the Extras page right now. Requests to add new listings, update current listings, and remove old listings started to add up.

The Highrise marketing site is maintained using the static-site generator Jekyll. It gives our team control over our content, it works fast, and it’s not a feature heavy dynamic CMS like Wordpress.

Jekyll is simple. And powerful . . . if you know how to use that power.

The Extras page was just a giant HTML page in Jekyll. All listings were written in HTML, and if you needed to update a listing, you had to edit the repetitive HTML file and find exactly what line needed to be updated.

This led to manual errors. Typos in HTML. Incorrect links. A lot of wasted time to make tiny changes.

Enter Jekyll data files.

Data files give a middle finger to repetition. You can set custom options and load custom data to make your life much easier.

Here is a short video of why we made this change with an example:

Files can be in .yml, .yaml, .json, or .csv format. We’re using .yml in our example.

Now, create a file you want to store in the _data folder. We’ve created the highrises.yml file.

Here is an example of one of our data files in format:

The data can now be accessed using in our HTML. The filename highrises.yml determines the variable name.

This information can now be used in your templates or HTML files.

For example:

Using in our file, Jekyll will insert the information from the data file.

Jekyll Example

Data files have saved us lots of time here at Highrise. Other examples of where you might use them:

If you’re interested in learning Jekyll, we recommend checking out the tutorials here and the community here.

This post was orginally published on Basecamp’s Signal v Noise.