Skip to content
Griffin Chure edited this page Nov 20, 2019 · 1 revision

Describing your project: Setting up the home page

Unless you give a specific address, navigating to your website will automatically direct you to the home page, index.html. In this repository, this file is defined by the page00_about.md file which is written in a more tenable markdown syntax than html. In this section, we will examine the structure of this page and the data file which contains the page content.

Adding your details: Editing about.yaml

To keep things as simple as possible, all information that will be displayed on your webpage is stored in a yaml data structure in the _data/ folder of the root directory. The structure of this file is as follows:

title: > 
    Your Paper Title Goes Here
authors: > 
    Author 1, Author 2, ... Author N
Custom Fields: >
. 
. 
. 

The first two fields, title and authors are both necessary. These two fields are recognized programmatically and given special styling on the homepage. The remainder of the fields can be entirely customized to fit your needs. For example, say you wanted to have a field entitled "Significance Statment". This could be easily implemented by adding the following to your about.yaml file:

Significance Statement: >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
    enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. 

The above entry will appear on the website as:

Significance Statment

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

You can have whatever capitalization and/or spacing that you want in your custom field, but it must end with a colon, :.

page00_about.md

All of the data you provide to the about.yaml file will be populated in the page00_about.md file using the Liquid templating language, though you do not have to know this language syntax to build the website.

The top of the page00_about.md file looks as follows:

---
layout: page
permalink: index.html
title: About
description: Two words about the page
img: header_image.jpg
caption: Caption to be displayed on the image
sidebar: true
---

This is yet another yaml block, but in the frontmatter of the homepage. The first two entries, layout: and permalink: define the page formatting and the permanent address of the page, which in this case is index.html

The remainder of the fields are mutable and can be configured as you see fit, however, you cannot add new fields. If you do add a new field to the frontmatter, nothing will happen except you will have wasted some time that you will never get back. The fields are as follows:

  • title: | Title of the page, not your project. The default value is set to "About".
  • description: | The description of the page that will show up in the browser tab. This should be short -- a word or two.
  • img: | The header image to be displayed on the website. This should just be the file name of the image. **For the image to display, it must be stored in the assets/img/ folder.
  • caption: | The caption of the image that will show in the upper right-hand size of the header. If this isn't desired, it can be left blank or deleted entirely.
  • sidebar: | A boolean entry for whether or not the page should be shown in the sidebar of the website. If left blank or marked to false, a link to the page will not be made visible.

The rest of the file uses Liquid templating to automatically populate the home page. This shouldn't be modified unless you find it necessary. If you want to add specific sections to the homepage, I suggest you do so by editing the about.yaml file.