Looking for a simple, responsive, theme for your Jekyll powered blog? Well look no further. Here be So Simple Theme, the followup to Minimal Mistakes -- by designer slash illustrator Michael Rose.
- Responsive templates. Looking good on mobile, tablet, and desktop.
- Readable typography to make your words shine.
- Gracefully degrading in older browsers. Compatible with Internet Explorer 9+ and all modern browsers.
- Minimal embellishments and subtle animations.
- Support for large images to call out your favorite posts.
- Disqus comments if you choose to enable.
- Tags for Open Graph and Twitter Cards for a better social sharing experience.
- Vanilla [custom 404 page]({{ site.url }}/404.html) to get you started.
- Stylesheets for Pygments and Coderay syntax highlighting to make your code examples look snazzy.
- Simple search that overlays results based on post title.
- Grunt build script for easier theme development.
- Sitemap for search engines
General notes and suggestions for customizing So Simple Theme.
- Install Bundler
gem install bundler
and then install Jekyll and all dependenciesbundle install
. - Fork the So Simple Theme repo.
- Clone the repo you just forked and rename it.
- Edit
_config.yml
to personalize your site. - Check out the sample posts in
_posts
to see examples for pulling in large feature images, assigning categories and tags, and other YAML data. - Read the documentation below for further customization pointers and documentation.
Pro-tip: Remove the sample posts in _posts
and the gh-pages
branch after cloning. There is a bunch of garbage in the gh-pages
branch used for the theme's demo site.
- Clone the following folders:
_includes
,_layouts
,assets
, andimages
. - Clone the following files and personalize content as need:
about.md
,articles.html
,index.html
,tags.html
,feed.xml
, andsitemap.xml
. - Set the following variables in your
config.yml
file:
title:
description:
logo:
disqus_shortname:
search: true
# Your site's domain goes here. When working locally use localhost server
# PS. If you set this wrong stylesheets and scripts won't load and most links will break.
# PPS. If you leave it blank for local testing home links won't work, they'll be fine for live domains though.
url: http://localhost:4000
# Owner/author information
owner:
name:
avatar:
email:
# Social networking links used in footer. Update and remove as you like.
twitter:
facebook:
github:
linkedin:
instagram:
tumblr:
# For Google Authorship https://plus.google.com/authorship
google_plus: "http://plus.google.com/123123123123132123"
# Analytics and webmaster tools stuff goes here
google_analytics:
google_verify:
# https://ssl.bing.com/webmaster/configure/verify/ownership Option 2 content= goes here
bing_verify:
# Links to include in top navigation
# For external links add external: true
links:
- title: About
url: /about
- title: Articles
url: /articles
- title: Google
url: http://google.com
external: true
highlighter: pygments
markdown: kramdown
gems:
- jekyll-sitemap
# https://github.com/mojombo/jekyll/wiki/Permalinks
permalink: /:categories/:title/
so-simple-theme/
├── _includes/
| ├── browser-upgrade.html #prompt to upgrade browser on < IE8
| ├── footer.html #site footer
| ├── head.html #site head
| ├── navigation.html #site navigation and masthead
| └── scripts.html #jQuery, plugins, GA, etc.
├── _layouts/
| ├── page.html #page layout
| └── post.html #post layout
├── _posts/
├── assets/
| ├── css/ #preprocessed less styles
| ├── fonts/ #icon webfonts
| ├── js/
| | ├── _main.js #main JavaScript file, plugin settings, etc
| | ├── plugins #jQuery plugins
| | └── vendor/ #jQuery and Modernizr
| └── less/
├── images #images for posts and pages
├── _config.yml #Jekyll site options
├── about.md #about page
├── articles.html #lists all posts from latest to oldest
├── index.html #homepage. lists 10 latest posts
└── tags.html #lists all posts sorted by tag
For full customization details and more information on the theme check out the So Simple theme setup guide.
Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter @mmistakes or file a GitHub Issue.
This theme is free and open source software, distributed under the MIT License. So feel free to to modify this theme to suit your needs.
If you'd like to give me credit somewhere on your blog or tweet a shout out to @mmistakes, that would be pretty sweet.