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.
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:
How to use data files in Jekyll
First, create a folder in your repo titled
_data and save it. This is where you’re going to store your files.
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
Here is an example of one of our data files in format:
- name: Highrise iPhone App link: https://highrisehq.com/apps/ios image: extras/img_iphone_app.png description: Collaborate on contacts, notes, and tasks all from your iPhone. - name: Android link: https://highrisehq.com/apps/android image: extras/img_android_app.png description: Collaborate on contacts, notes, and tasks all from your Android.
The data can now be accessed using in our HTML. The filename
highrises.yml determines the
This information can now be used in your templates or HTML files.
Using in our file, Jekyll will insert the information from the data file.
Data files have saved us lots of time here at Highrise. Other examples of where you might use them:
- accessing different authors’ bios of your blog
- posting store hours for your brick-and-mortar shop
- ordering any list of products you’re selling
This post was orginally published on Basecamp’s Signal v Noise.