Jekyll admin and frontmatter setup

Recently we thought we’d like an easier way to create articles. We were using markdown files and often having to replicate our frontmatter that remained the same throughout numerous articles. This article explains our current set up to create frontmatter on the fly and the WYSIWYG we use.

We use a combination of Jekyll Admin and frontmatter config.

First of all add Jekyll Admin to your Gemfile (gem 'jekyll-admin') and bundle. You will immediately be able to use Jekyll Admin. To access the WYSIWYG, start a server (jekyll server) and navigate to localhost:4000/admin in your web browser. You can then click on Posts >> New post to start creating a new article, you will notice though when you scroll down to the bottom of your page that there is the option to add a new metadata field - this is the frontmatter of your post. Let’s get Jekyll to worry about adding that!

We will need to add some config to our Jekyll config file. In the root of your directory navigate to _config.yml. In here you will need to add some more data to your defaults. For our set up we just want to be able to add frontmatter to our posts, if you use drafts of another page type you will need to set these up seperately. This is our current set up required for our posts:

  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      description: ""
      author: elaine_osbourn
      item_image: ""
      categories: []
      tags: []
      seo_title: ""

This will prepopulate the frontmatter fields with any information added. Any fields which are empty strings or arrays will not be published. These fields are now ready for you to edit in Jekyll Admin (restart your server!).

Pros

• Syntax highlighting in editor
• Can write any markdown you would normally including liquid syntax
• Can immediately start writing posts without worrying about frontmatter as it’s pre-populated

Cons

• Jekyll Admin doesn’t use a text input for the input you don’t get the benefit of spell checking underlining
• WYSIWYG toolbar doesn’t float with scroll
• Sometimes you have to hit save a few times (doesn’t bother us too much!)