/so-simple-theme

My Blog forked from [mmistakes/so-simple-theme]

Primary LanguageCSSGNU General Public License v2.0GPL-2.0

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.
  • 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

screenshot of So Simple Theme

General notes and suggestions for customizing So Simple Theme.

Basic Setup for new Jekyll site

  1. Install Bundler gem install bundler and then install Jekyll and all dependencies bundle install.
  2. Fork the So Simple Theme repo.
  3. Clone the repo you just forked and rename it.
  4. Edit _config.yml to personalize your site.
  5. Check out the sample posts in _posts to see examples for pulling in large feature images, assigning categories and tags, and other YAML data.
  6. Read the documentation below for further customization pointers and documentation.

Demo the Theme

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.

Setup for Existing Jekyll site

  1. Clone the following folders: _includes, _layouts, assets, and images.
  2. Clone the following files and personalize content as need: about.md, articles.html, index.html, tags.html, feed.xml, and sitemap.xml.
  3. 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
# Your site's domain goes here. When working locally use localhost server leave blank
# 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:           Your Name
  avatar:         your-photo.jpg
  email:          your@email.com
  # 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.html  #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 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.

Bitdeli Badge