Skip to content

Instantly share code, notes, and snippets.

@adborden
Last active February 21, 2018 19:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adborden/c2e9a9098054f773061a897855e4c2f6 to your computer and use it in GitHub Desktop.
Save adborden/c2e9a9098054f773061a897855e4c2f6 to your computer and use it in GitHub Desktop.
Tips for using Jekyll and Federalist
title date
Markdown for performance.gov
2018-02-21 09:27:49 PST

Markdown for performance.gov

Jekyll is a static site generator. It takes Markdown files, templates, and data files and generates HTML.

Federalist supports Jekyll out of the box. They have several templates that you can take a look at for examples. The example I demoed for you is the Federalist modern team template.

Content vs layout

The power of Jekyll allows you to keep the content and data separate from the HTML markup. So you can put the content in plain-text Markdown without having to mess with HTML. It's also less error prone because you don't have to worry about changing the HTML tags accidentally while you're trying to change content.

You can put common UI components into partials (includes) and re-use them across multiple layouts and pages.

Data

There are two ways to get data into Jekyll, data files and Collections. Data and Collections are available from within your templates. Data files can be YAML, JSON, or CSV. Collections are Markdown documents with YAML front-matter and are rendered into individual pages.

Upgrading it in stages

By default, if you don't specify front-matter in your files, Jekyll won't do any processing and will just copy the pages to the build directory as-is. This allows you to move page-by-page to convert from HTML to Markdown.

Branch previews with Federalist

Federalist will automatically build previews of branches so that you can include a link in your pull request so reviewers can view it live before accepting the pull request.

The url for the preview is:

 https://federalist-proxy.app.cloud.gov/preview/<OWNER>/<REPOSITORY>/<BRANCH>

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment