This Open NC'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 (html5up.net/license)
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 jekyllrb.com for all the details, or read up on just the basics of front matter, writing posts, and creating pages.
To write a blog post, create a new markdown file in the _posts folder. Use the standard Jekyll dating format for titling the file: YYYY-MM-DD-NameOfPost.md. 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.
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.
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: TheProjectName.md
At the top of each post, add Jekyll front-matter using these categories:
---
layout: project
title: An Open NC 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.
The website site is comprised of 4 main pages:
- the home page: core content is authored in
index.md. - the blog page: core content is authored in
blog.md - the brigades page: core content is authored in
brigades.md - the projects page: core content is authored in
projects.md
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.
If you don't want to go through and manually edit the content on Github or work on local copy using traditional Github pull/add/commit/push mechanism there is an excellent open source WYSIWYG editor called prose.io. The app provides the ability to edit front matter, edit pages and other web publishing fundementals without going through the process editing code. The site is already authorized in the app. All you have to do is sign up.
- Social media links and icons are managed through
_config.yml. **Formspree.io contact form integration ** - just add your email to the(currently turned off)_config.ymland it works!
The _config.yml configuration file runs the 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:
html5up.net | aj@lkn.io | @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 aj@lkn.io | @ajlkn
https://github.com/andrewbanchich/Forty-Jekyll-Theme
https://github.com/CodeForPittsburgh/CodeForPittsburgh.github.io
- Font Awesome (fontawesome.github.com/Font-Awesome)
- jQuery (jquery.com)
- html5shiv.js (@afarkas @jdalton @jon_neal @rem)
- background-size polyfill (github.com/louisremi)
- Misc. Sass functions (@HugoGiraudel)
- Respond.js (j.mp/respondjs)
- Skel (skel.io)