Skip to content

Adding a page to the site

Brian Hedberg edited this page Nov 23, 2016 · 3 revisions

Adding a page

Adding a page to the site requires a few steps and will vary depending on what kind of page it is and where you want it to appear in the site navigation.

If it is a standalone page

  1. Add a new markdown or html file to the pages directory/folder. Add the file extensions .md or .html.

Within that new file, add front matter with properties that dictate its display.

___
title: Some title
permalink: /link/where-your-page/lives/
layout: layout-name
___

For a list of potential layout names to use, visit this directory for inspiration.

Once your basic page is set up, you can add it to the proper navigation fields by including it in navigation.yml

Add it to the list of "assigned" links and determine which navigation fields it will appear in.

text: Hire 18F
href: pages/hire.md
permalink: /hire/
in_menu: true
in_drawer: false
in_footer: true

You can also specify if the link has children to add subpaths beyond your file! To do this, specify a children property with an array of yml objects.

If it is within a collection

If it is not a blog post

If the page you are attempting to add is part of a larger subset of pages, there are a few more steps involved.

  1. Identify the collection that your page belongs to. A list of collections can be found in the site config.

  2. You can then add the file to the directory that corresponds with your collection. For instance, if you're page is a project, add a new file to the _projects directory with a .md or .html file extension.

  3. Within that new file, add front matter with properties that dictate its display.

___
title: Some title
permalink: /link/where-your-page/lives/
layout: layout-name
___

A given collection might have different requirements for what kind of properties need to be added to the front matter for the page to display properly. Use another file within that collection directory as a guide for how to provide the necessary formatting for your new page.

If it is a blog post

If your collection is a blog post, your file should be added to the _posts directory and should follow naming conventions as follows.

YYYY-MM-DD-name-of-post.md
2016-11-23-adding-a-page-to-the-site.md

Within the new post, add front matter with properties that dictate its display.

title: Some title
authors:
  - author-name
  - another-other-name
tags:
  - agile
  - procurement
excerpt: A string of text that will show in small previews of your post

Additional, optional fields are as follows:

tumblr_url: url to corresponding tumblr post
layout: |
       By default, posts will use the 'post' layout, but specify a different 
       layout if needed 
date: |
      The date will be auto-generated from the post name `YYYY-MM-DD-name-of-project.md`, 
      but specify if a date if it needs to be more specific using the following format: 
      `YYYY-MM-DDTHH:MM:SS-MM:SS` (e.g. `2014-04-28T11:59:00-04:00`)
image: |
       Specify an image path for an image that will display in the post preview 
       and top of the page within the post's page. 
       For example, `/assets/blog/bechdel/team.jpg` will show the image below 
Image of some of the 18F team