Skip to content
Code For Pittsburgh Github pages repository.
JavaScript CSS HTML PHP Hack
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Code for Pittsburgh website

This Code for Pittsburgh's Jekyll-powered GitHub pages website. It's based on a heavily modified version the Forty Jekyll Theme by Andrew Banchich, which is based on the HTML5 UP Forty Jekyll Theme by ajkln. This code is free for personal and commercial use under the CCA 3.0 license (

Authoring Content

This, like all web pages hosted on GitHub, is a Jekyll-powered site, which is a thing that generates the entire site magically from some templates that contain content authored in basic text files. Those basic text files are written in Markdown. This means that you can author content for the site without coding.

For those unfamiliar with how Jekyll works, check out for all the details, or read up on just the basics of front matter, writing posts, and creating pages.

Writing Blog Posts

To write a blog post, create a new markdown file in the _posts folder. Use the standard Jekyll dating format for titling the file: This is an out-of-the-box Jekyll convention. Once published, posts are accessed in a nested month/day/year folder on the site. Lists of posts are automatically generated for various other places on the site.

Post Front-Matter

At the top of each post, you must add Jekyll front-matter using these categories:

layout: post
title: name of your post here
description: a very short subtitle for your post
image: assets/images/aRepresentativeImageForYourPost.jpg
author: Your Name

^You can copy and paste this to get started.

After that, write your post in Markdown as you normally would, and push changes to the repository. It will be added to the blog list automatically. If the date of your post is after the date you've pushed to the repo, the post won't actually publish until the date of your post.

Adding Project Pages

Project pages on the website are succinct portfolio-style pages for our projects, used to showcase some of the work we've done. They are not intended to be the location for GitHub project pages themselves (for those, use actual repo-based GitHub project pages)

Publishing project pages work exactly like posts, except they have slightly different front-matter. Under the hood, they use a different layout template file.

Create new markdown files in the _projects folder. Use a file name without spaces:

Post Front-Matter

At the top of each post, add Jekyll front-matter using these categories:

layout: project
title: A CfP Project
description: a clever subtitle for the project
image: assets/images/aRepresentativeImageOfTheProject.jpg
lead: Name of person who lead the project
url: full url to the project web page (if any)

After that, write in markdown a description of the project. For projects, this can be short. This is not intended to be the location for the project itself, just a landing page! Include the link to the actual location of the project in the front matter url tag.

Push changes to the repository when done. It will be added to the project lists that appear throughout the site automatically.

Home, Blog, and Projects pages

The website site is comprised of 3 main pages:

  • the home page: core content is authored in
  • the blog page: core content is authored in
  • the projects page: core content is authored in

These markdown files live in the root of the directory folder, and they automatically get links on the site's menu.

Editing the corresponding markdown files will control titles and introductory material for each page.

The other content on those pages, such as the tiled project and blog post lists, are controlled by the templates. To make deeper edits to the components that comprise these pages, you'll have to dig into _layouts, _includes, _sass, etc.

Contact Information

  • Social media links and icons are managed through _config.yml.
  • ** contact form integration ** - just add your email to the _config.yml and it works! (currently turned off)

Site Configuration

The _config.yml configuration file runs those show. Basic site information content (e.g., web site title, contact info, social media) and some important configuration settings that make the site work are stored here.


We built this site on top of lots of other great projects:

Forty by HTML5 UP | | @ajlkn

This is Forty, my latest and greatest addition to HTML5 UP and, per its incredibly creative name, my 40th (woohoo)! It's built around a grid of "image tiles" that are set up to smoothly transition to secondary landing pages (for which a separate page template is provided), and includes a number of neat effects (check out the menu!), extra features, and all the usual stuff you'd expect. Hope you dig it! AJ | @ajlkn

Forty Jekyll Theme by Andrew Banchich


  • Font Awesome (


  • jQuery (
  • html5shiv.js (@afarkas @jdalton @jon_neal @rem)
  • background-size polyfill (
  • Misc. Sass functions (@HugoGiraudel)
  • Respond.js (
  • Skel (
You can’t perform that action at this time.