So Simple Theme
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.
So Simple Theme is all about:
- Responsive templates. Looking good on mobile, tablet, and desktop.
- Gracefully degrading in older browsers. Compatible with Internet Explorer 9+ and all modern browsers.
- Minimal embellishments and subtle animations.
- Readable typography to make your words shine.
- Support for large images to call out your favorite posts.
- Disqus comments if you choose to enable.
- Simple and clear permalink structure[^1].
- 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.
Basic Setup for new Jekyll site
- Install Jekyll and read through the documentation if you haven't already.
- Fork the So Simple Theme repo
- Clone the repo you just forked.
- 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: Delete the gh-pages
branch after cloning and start fresh by branching off master
. There is a bunch of garbage in gh-pages
used for the theme's demo site that I'm guessing you don't want on your site.
Setup for Existing Jekyll 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: Site Title
description: Site description for the metas.
logo: site-logo.png
disqus_shortname: shortname
search: true
#Comment out url when working locally to resolve base urls correctly
url: http://whatever.com
# Owner/author information
owner:
name: Your Name
avatar: your-photo.jpg
email: [email protected]
# 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
# http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
timezone: America/New_York
pygments: true
markdown: kramdown
# https://github.com/mojombo/jekyll/wiki/Permalinks
permalink: /:categories/:title
Folder Structure
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.md #lists all posts from latest to oldest
├── index.html #homepage. lists 10 latest posts
├── tags.html #lists all posts sorted by tag
└── sitemap.xml #autogenerated sitemap for search engines
Customization
For full customization details and more information on the theme check out the So Simple theme setup guide.
Questions?
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.
License
This theme is free and open source software, distributed under the GNU General Public License version 2 or later. So feel free to use this Jekyll theme on your site without linking back to me or using a disclaimer.
If you'd like to give me credit somewhere on your blog or tweet a shout out to @mmistakes, that would be pretty sweet.