A simple yet classy theme for your Jekyll website or blog. Customizable to fit your style or brand.
Built with these awesome libraries:
Here's a demo. It also works on GitHub Pages. I also use it for my own website.
Inspired by dirkfabisch's Mediator theme, which I previously used for my own blog, as well as Type Theme.
Cover image by Chris M. Morris (flickr).
This theme comes with a number of features, including:
If you're just getting started with Jekyll, you can use this repository as a starting point for your own site. Just download this project and add all the files to your project. Add your blog posts to the posts/
directory, and create your pages with the proper Jekyll front matter (see posts.html
for an example).
If your site already uses Jekyll, follow these steps:
_includes
, _layouts
, and _sass
directories with those from this project. index.html
with the one from this project, and copy over the posts.html
file as well. _config.yml
from this project in to yours, and update the necessary information. Don't forget to install Jekyll and other dependencies:
# cd into project directory
cd centrarium
# install Bundler if you don't have it already
gem install bundler
# install jekyll, jekyll-archives, and jekyll-sitemap
bundle install
If you want change the CSS of the theme, you'll probably want to check out these files in the _sass/
directory:
base/_variables.scss
: Common values found throughout the project, including base font size, font families, colors, and more.base/_typography.scss
: Base typography values for the site (see typography.html
for a demonstration)_layout.scss
: The primary styles for the layout and design of the theme. Here are the important variables from base/_variables.scss
you can tweak to customize the theme to your liking:
$base-font-family
: The font-family of the body text. Make sure to @import
any new fonts!$heading-font-family
: The font-family of the headers. Make sure to @import
any new fonts!$base-font-size
: The base font-size. Defaults to $em-base from Bourbon (bourbon/settings/_px-to-em.scss
).$base-font-color
: The color for the body text.$action-color
: The color for links in the body text. $highlight-color
: The color for the footer and page headers (when no cover image provided).All configuration options can be found in _config.yml
.
index.html
header, and the footer.index.html
header.Although this theme comes with a combined, categorized archive (see posts.html
), you can enable further archive creation thanks to jekyll-archives. Support for category and tag archive pages is included, but you can also add your own archive pages for years, months, and days.
To change archive settings, see the jekyll-archives section of _config.yml
:
jekyll-archives:
enabled:
- categories
- tags
layout: 'archive'
permalinks:
category: '/category/:name/'
tag: '/tag/:name/'
To fully disable the archive, remove the jekyll-archives section AND remove it from the gems list.
NOTE: the Jekyll Archive gem is NOT included with GitHub pages! Disable the archive feature if you intend to deploy your site to GitHub pages.
A sitemap is also generated using jekyll-sitemap.
You can enable Disqus comments for you site by including one config option:
If you want to disable Disqus for only a specific page, add __disqus_disabled: true__ to the page's front matter.
You can enable basic Google Analytics pageview tracking by including your site's tracking ID:
Your personal social network settings are combined with the social sharing options. In the social seciton of _config.yml
, include an entry for each network you want to include. For example:
social:
- name: Twitter # Name of the service
icon: twitter # Font Awesome icon to use (minus fa- prefix)
username: TheBenCentra # (User) Name to display in the footer link
url: https://twitter.com/TheBenCentra # URL of your profile (leave blank to not display in footer)
desc: Follow me on Twitter # Description to display as link title, etc
share: true # Include in the "Share" section of posts
Using the Open Graph Protocol or Twitter Card metadata, you can automatically set the images and text used when people share your site on Twitter or Facebook. These take a bit of setup, but are well worth it. The relevant fields are at the end of the _config.yml
file.
Also there is another protocol, the Open Source protocol, for saying where your site is hosted if the source is open. This helps develops more easily see your code if they are interested, or if they have issues. For more, see http://osprotocol.com.
You can enhance the posts.html
archive page with descriptions of your post categories. See the descriptions section of _config.yml
:
# Category descriptions (for archive pages)
descriptions:
- cat: jekyll
desc: "Posts describing Jekyll setup techniques."
Want to help make this theme even better? Contributions from the community are welcome!
Please follow these steps:
MIT. See LICENSE.MD.