Bryant
A theme for Jekyll created with long-form writings, essays and beautiful photography in mind.
It is based off of one of our latest premium themes for tumblr at Stylehatch. We’re big fans of Jekyll and the open source community, so we are trying something new.
All of the source code for the demo site is available for your reference in the gh-pages branch.
Installation
Setting up this theme is fairly simple, but if you aren’t already familiar with Jekyll take some time to read through their documentation.
- Install Jekyll:
gem install jekyll - Fork this repository
- Clone it:
git clone https://github.com/YOUR-USER/bryant - Run the Jekyll server:
jekyll serve
You should have a server up and running locally at http://localhost:4000.
Customization
Next you’ll want to change a few things. Most of them can be changed directly in _config.yml. That’s where we’ll pull your name, Twitter username, color variables, and things like that.
There’s a few other places that you’ll want to change, too:
- CNAME: If you’re using
this on GitHub Pages with a custom domain name, you’ll want to change this
to be the domain you’re going to use. All that should be in here is a
domain name on the first line and nothing else (like:
example.com). - favicon.ico: This is the Style Hatch logo for displaying in the address bar. You should change it to whatever you’d like.
- apple-touch-icon.png: Again, this is the Style Hatch logo, and it shows up in iOS and various other apps that use this file as an “icon” for your site.
For custom CSS, there is an included blank screen.css file for that purpose.
Adding Posts
There are currently 5 supported post types in this theme. These are defined in the posts YAML front-matter using the variable type:
These types affect how the post is rendered. Some post types have extra post specific front-matter like photo_url or link. You can see how they work in the example posts for each type.
Text
Example YAML front-matter for this post type:
---
layout: post
title: Blog Like a Hacker, In Style
category: posts
type: text
---
Photo
Example YAML front-matter for this post type:
---
layout: post
title: Photos Look Great
category: posts
type: photo
photo_url: http://somesite.com/images/someimage.jpg
camera: Fujifilm Finepix X100
apeture: f/4
exposure: 1/250th
focal_length: 23mm
---
Embed
Example YAML front-matter for this post type:
---
layout: post
title: Magnetic Magic
category: posts
type: embed
embed_code: <iframe src="http://player.vimeo.com/video/63773788?portrait=0&badge=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
---
Quote
Example YAML front-matter for this post type:
---
layout: post
title: There is nothing to writing. All you do is sit down at a typewriter and bleed.
category: posts
type: quote
source: Ernest Hemingway
---
Link
Example YAML front-matter for this post type:
---
layout: post
title: Style Hatch - Fresh Designs to Show Off Your Genius
category: posts
type: link
link: http://stylehatch.co/
---
Shortname
For long post titles, there is an optional shortname: variable that can be added to the YAML front-matter. If included on a post, the archive page will display the shortname instead of the full title. This is especially useful for long quote posts.
These are mostly specifc to the Bryant Jekyll theme. See the Jekyll documentation for more on adding posts.
Creating Pages
All HTML or Markdown files with YAML front-matter will be parsed as individual pages separate from posts. In order to get these to show up in the main navigation they will need the following YAML front-matter.
---
layout: page
title: your title
weight: 3
---
Weight is used to determine the order within the navigation items (1-10).
Deployment
You should deploy with GitHub Pages.
All you should have to do is rename your repository on GitHub to be username.github.io. Content from the master branch of your repository will be used to build and publish the GitHub Pages site, so make sure your Jekyll site is stored there.
If you’re using it for a Project Page, create a new branch named gh-pages. The content of this branch will be rendered using Jekyll, and the output will become available under a subpath of your user pages subdomain, such as username.github.io/project
For more, see the Jekyll’s documentation on deploying to GitHub Pages as well as other deployment methods.
Licensing
Credits
All icons are from Entypo pictograms by Daniel Bruce — www.entypo.com
Thanks
Shout out to @holman for the great example of how to build a nice Jekyll theme like he’s done with Left.