Jousting with Jekyll


One accountability of the assist workforce right here at Highrise is to take care of our Extras web page.

What’s the Extras page?

It’s a listing of all of the third get together merchandise that combine with Highrise. Virtually all had been constructed by the third get together utilizing the Highrise API.

This web page is necessary for present and future prospects as a result of individuals use multiple product to get their work completed. And these integrations can usually save individuals tons of time.

However it grew to become an absolute ache to handle for us.


There are a whopping 63 totally different listings on the Extras web page proper now. Requests so as to add new listings, replace present listings, and take away outdated listings began so as to add up.

The Highrise advertising website is maintained utilizing the static-site generator Jekyll. It provides our workforce management over our content material, it really works quick, and it’s not a characteristic heavy dynamic CMS like WordPress.

Jekyll is straightforward. And highly effective . . . if you understand how to make use of that energy.

The Extras web page was only a large HTML web page in Jekyll. All listings had been written in HTML, and in case you wanted to replace a list, you needed to edit the repetitive HTML file and discover precisely what line wanted to be up to date.

This led to handbook errors. Typos in HTML. Incorrect hyperlinks. A variety of wasted time to make tiny adjustments.

Enter Jekyll data files.

Knowledge recordsdata give a center finger to repetition. You’ll be able to set customized choices and cargo customized information to make your life a lot simpler.

Here’s a brief video of why we made this alteration with an instance:

Find out how to use information recordsdata in Jekyll

First, create a folder in your repo titled _data and reserve it. That is the place you’re going to retailer your recordsdata.

Recordsdata will be in .yml, .yaml, .csv, .json format. We’re utilizing .yml in our instance.

Now, create a file you wish to retailer within the _data folder. We’ve created the highrises.yml file.

Right here is an instance of one in every of our information recordsdata in /_data/highrises.yml format:

- identify: Highrise iPhone App
picture: extras/img_iphone_app.png
description: Collaborate on contacts, notes, and duties all out of your iPhone.

- identify: Android
picture: extras/img_android_app.png
description: Collaborate on contacts, notes, and duties all out of your Android.

The info can now be accessed utilizingwebsite.information.highrises in our HTML. The filename highrises determines the variable identify.

This info can now be utilized in your templates or HTML recordsdata.

For instance:

Utilizing website.information.highrises in our file, Jekyll will insert the knowledge from the info file.

Knowledge recordsdata have saved us numerous time right here at Highrise. Different examples of the place you would possibly use them:

  • accessing totally different authors’ bios of your weblog
  • posting retailer hours in your brick-and-mortar store
  • ordering any checklist of merchandise you’re promoting

For those who’re involved in studying Jekyll, we advocate trying out the tutorials here and the community here.

Source link