Skip links

So Simple, a Jekyll Theme

After having so much fun creating and releasing my first open source Jekyll theme, I figured I’d go at it again. So here be the fruit of that effort — I call it So Simple Theme, a responsive Jekyll theme for words and photos.

Features

  • Responsive layouts. Looks good on mobile, tablets, and desktop devices.
  • Full compatibility with GitHub Pages.
  • Minimal embellishments and subtle animations.
  • Support for large images to call out your favorite posts.
  • Optional Disqus comments.
  • Tags for Open Graph and Twitter Cards for a better social sharing experience.
  • Search script.
  • Support for Pygments and Coderay syntax highlighting to make your code examples look snazzy.
  • Grunt tasks for easier site development.
Screenshot of So Simple Theme

Getting Started

  1. Install Jekyll if you haven’t already.
  2. Fork the So Simple Theme repo
  3. Make it your own and customize, customize, customize.
Download Setup Guide Demo

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. And if you make something cool with this theme feel free to let me know.

License

This theme is free and open source software, distributed under the MIT License. So feel free to modify it however you’d like without linking back to me or including a disclaimer.

L.

L.

Cheers man - I’m working on creating a personal blog with Jekyll and this is an excellent starting point. Appreciate the hard work :)

Rajagopal

Rajagopal

Brilliant theme! Using this for my blog. Thanks for opensourcing it!

Joe

Joe

Thanks for creating this theme. It’s a great starting point.

Jason

Jason

I cannot get to this work. When I run it i see no styles.

Michael Rose

Michael Rose

The URL is probably set wrong in _config.yml

If you’re working locally leave it blank or http://localhost:4000. When you’re ready to deploy to GitHub pages or your own server make sure it’s set to use your domain name.

Marlon Cabrera

Marlon Cabrera

I am working locally. It is working now, thank you so much!

Jesse

Jesse

On the “sample-post” the {: .pull-right} is not working and neither is the table. It actually prints {: .pull-right} and {: rules="groups"}. Do you think that is a redcarpet issue or something else?

Jesse

Jesse

Actually just verified it is. Did a gem install kramdown and switched the _config.yml back to kramdown then regenerated. Works like it’s supposed to. Might consider adding kramdown to the Gemfile since the samples rely on it.

Michael Rose

Michael Rose

I’m not too familiar with RedCarpet but I’m guessing it doesn’t support that shortcut for applying classes. Kramdown does which is what I use for Markdown with the theme.

If you don’t want to switch, adding HTML to your Markdown file is always an option.

Anonymous

Anonymous

I know this sound stupid, but how do I set the button to be centered?

Michael Rose

Michael Rose

If you want buttons to be centered “globally” then you’‘ll need to mess around with the .btn class in the CSS. If you just want a specific instance of the button you could wrap it in a div that has CSS to text-align: center and that should do the trick. If you look at the .pagination wrapper that includes the next and previous post links and that’s how I centered them.

Anonymous

Anonymous

thanks for the response, also keep rocking with themes.

Alessandro Amato del Monte

Alessandro Amato del Monte

Michael sorry if you see this post again. I think I’ve had a problem with my Disqus account and believe my comment didn’t go through – in case it’s awaiting moderation then I’m sorry – delete either one.

So I wanted to thank you for this template which I love.

However I’m not able to do much with CSS etc so I wonder if you could give me an help to enlarge the default column width and associated images because they are all shrunk down to 640px or so while I’d like my photographs BIG (800px wide big).

Michael Rose

Michael Rose

No worries, doesn’t look like you double posted the comment, it only came up once.

If you want to make the main content column wider you can play around max-width on the .entry-content element. Because the theme is responsive that size is in a few locations depending on the width of your browser window (or screen if on mobile), so you’ll need to adjust accordingly.

It’s probably going to be some work getting all the widths to sort out. I optimized the pages for readability and purposely left white space on the left and right so the line widths weren’t too long. If you do beef up the main content column’s width it’ll screw with the left sidebar and things won’t line up right.

Easiest way to address that would be to make the sidebar 1 column that spans the entire width (see what I did on small screen sizes for ideas). You might have to increase the max-width on .entry-wrapper as well to get everything to fit.

Hope this helps!

Michael Rose

Michael Rose

Kramdown to my knowledge is a Jekyll dependency. It should install along with it, at least it does when I’ve tried a clean install or update.

Alessandro Amato del Monte

Alessandro Amato del Monte

That was very quick! Thank you so much for the reply. I will try and follow your indications and will let you know of my (in)success!

lcallot

lcallot

Thanks for the theme, it’s very neat! I’m using it as a base for my site but I’d like to limit the size of the page.image.feature element to some arbitrary limit, say 800px, and keep it centered. By tinkering with the CSS I can do the former (max-width: 800px) but the image pushed to the left and I can’t figure how to center it. I’ve tried to set margins to auto, and enclose the image in a wrapper, but none of that work. Any chance you could help?

Michael Rose

Michael Rose

Sure no problem, this is a fairly easy one to fix.

If you add a display: block declaration to .entry-feature-image along with a max-width you should be all set.

I did a quick test in Google’s Developer Tools on the theme demo site and it appeared to resize and center the image just fine.

lcallot

lcallot

Thanks a lot for the fast reply, it works perfectly. I just had to remember setting the margin to margin: 20px auto; instead of the current margin 20px 0 0;

cehter

cehter

First of all, thanks for the lovely theme. I have a question about the use of Disqus. I have an account and I added the shortname to my _config.yml. Before I used Jeykll on my server I tested it local and I could add an comment. Now on my server I can’t. Do you have an idea why? I checked the shortname and I also set comments: true. thx :)

Michael Rose

Michael Rose

That’s strange. If it worked testing locally then it should work on your live server. Can you verify if Disqus is loading at all? If you’re comfortable with posting a link to your site I can take a quick look at see if something obvious jumps out at me.

Michael Rose

Michael Rose

Doesn’t look like it’s loading the Disqus script, which is really odd because if it worked locally and nothing changed I don’t know why it wouldn’t on the live server.

You could try removing the Liquid if statements in scripts.html include and force it to load the script.

Change

{% if site.disqus_shortname and page.comments %}{% include disqus_comments.html %}{% endif %}

to {% include disqus_comments.html %} and see if the script loads.

cehter

cehter

I made the changes and now the script loads. Thanks for the fast help! :) But the problem is strange…

Alessandro Amato del Monte

Alessandro Amato del Monte

Hi again Michael. Maybe you could shed some light here; I’m trying to use GalleryView but it doesn’t work.

So what I did is this – installed GalleryView jekyll plugin, installed GalleryView itself in a subdirectory of my site, added the lines to call the various components of GalleryView (GalleryView JS, jQuery Timers Plugin JS, GalleryView CSS) to _includes/scripts.html (pointing to the correct directories of my site obviously) but the list of photos that is supposed to be taken by the javascript and transformed into this cool looking and modern gallery does not appear… ie, it displays a plain simple unordered list.

So I wonder if there’s something in your theme that prevents these javascripts to work or not (because something like this also happened with another plugin I was testing yesterday, again to display some sort of photo galleries).

Thanks!

Michael Rose

Michael Rose

Just a quick question before I take a closer look at the GalleryView plugin. Are you hosting your site on GitHub pages? I ask because you mentioned you’ve had problems with other plugins. GitHub pages doesn’t currently support any Jekyll plugins, so that would explain why they’re not working for you.

To use them you have to generate your Jekyll site locally first and then deploy the files in _site

Alessandro Amato del Monte

Alessandro Amato del Monte

I’m sorry for being so ignorant but I’m not sure if I’m hosting my site to Github Pages… I mean I only have a single repo in github which is my site, then when I update my site I push all changes to github, and my site is reached at http://aadm.github.io does it mean that my site is hosted on Github “Pages” (I would answer yes if you were asking me whether I host my site on Github; Github “Pages” – not sure what it is). Again sorry for being so naive…

Anyway you can look at the source for my site here

BTW another thing that’s confusing to me is the need to put my site on the gh-pages branch as some tutorial page, section “Manual Creation”) recommend. I have it on my master branch. Not sure whether I need to move it?…

Anyway let’s assume that the reason why the plugin fails is because I’m actually hosting on Github Pages. It should be working locally anyway, right (creating the site with jekyll --serve etc and testing it on http://localhost:4000)? Well it isn’t. I also am not sure I know how to “deploy the files in _site” as you suggest.

Michael Rose

Michael Rose

Looks like you’re using Github Pages then. There are two ways to host your site with Github, on the master branch if you have one repo, or as a project using the gh-page branch. For example I host all of my Jekyll themes on Github using the project method because I have multiple repos. GH recently redid their hosting documentation and this page should clear things up for you

So back to the plugin issue. You won’t be able to use them with your current git workflow but you can build the site yourself and push that. The general idea is instead of committing your source Jekyll files and letting Github generate the site, you need to build it locally yourself and commit all the files in the _site folder instead. Here’s a site that explains it pretty well and also explains how you can automate things with rake.

And yes. The plugins should still work locally. I’ll take a look at your repo when I get a chance to see if something jumps out to me.

Michael Rose

Michael Rose

Re-read your original comment, doesn’t seem like it’s a plugin issue… well not when you work locally. The fact that you are getting an unordered list tells me the Jekyll plugin is working. The problem lies with loading the scripts that does all the styling magic.

Without seeing that code I can’t troubleshoot effectively. But my guess is there is a jQuery or script conflict somewhere in the code. If you open the web inspector on a page that doesn’t load the gallery correctly, do you see any JavaScript errors?

Alessandro Amato del Monte

Alessandro Amato del Monte

Right. So if I open the Javascript console in Chrome here’s the problem:

 Uncaught ReferenceError: $ is not defined test-galleryview.html:165
Uncaught TypeError: Object [object Object] has no method 'fitVids' scripts.min.js:1
Michael Rose

Michael Rose

I know enough Javascript to be dangerous so I might not have a 100% solution for you. But the problem is certainly from the GalleryView scripts not loading properly because of a conflict.

For starters you’re loading 2 versions of jQuery that might be causing the problem. I’m using 1.9.1 with the theme and then you’re loading 1.7.1 after that (only use one version). No idea on how current the GalleryViewscript is so it might not work with 1.9.1. And if you use 1.7.1 instead it might break something with the theme. You’ll have to experiment and adjust the scripts as necessary.

Also I would comment out <script src="{{ site.url }}/assets/js/scripts.min.js"></script> just while you’re troubleshooting. It’s possible the GalleryView scripts are conflicting with something in there, namely FitVids since I noticed a reference to it in your console, but my money is on a jQuery conflict.

Other than these suggestions I don’t have much else to offer about fixing scripts. It’s not really my expertise.

Alessandro Amato del Monte

Alessandro Amato del Monte

Ok so I tried a few things and:

  1. i need to run jquery 1.71. Looks like the rest of your theme is unaffected by this so far.
  2. I had to move the scripts within the head so I changed _layouts/page.html and post.html to have {% include scripts.html %} just after the include.

Now Galleryview works! But the top menubar doesn’t…

Michael Rose

Michael Rose

So close. My guess is using jQuery 1.7.1 broke something with the responsive nav script and it’s not triggering a few CSS classes that hide and show it based on screen size. If you don’t care about that you could strip it out and remove some CSS styling. If you inspect nav element and the lists inside it you should be able to spot the CSS that needs modifying.

There’s probably a few display: nones in there that is hiding the nav that could be taken out.

Or check the Responsive Nav’s site for a possible fix.

Alessandro Amato del Monte

Alessandro Amato del Monte

So I got everything to work now! At least locally, I still need to understand how to push the compiled site up on github.

Anyway, here’s what I did:

1, added the js stuff required by GalleryView inside page.html and post.html in the <head> section, right after {% include head.html %}. I’ve left jquery 1.7.1 which is compatible with all the things in your template, so no need for 1.9.1 which effectively makes GalleryView fail. 2 _includes/scripts.html is same as before now, except for the jquery line which is commented out.

(Little update of the day after)
To push only the compiled source (=content of _site) I wasn’t able to follow the instructions given.

But I’ve found a nice script that makes the magic for me so it may help others

And finally this is an example where you can see GalleryView in action.

Brandon

Brandon

Great theme. I appreciate all the hard work. However, I’m having issues with Open Graph posting the description of pages incorrectly into Facebook. It keeps posting, “A simple and clean responsive Jekyll theme for words and photos,”

All the other OG meta-tags work fine. It is just :

<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">

that is the issue. I have changed the description of the index.html file, and I have double checked the files on Amazon S3, where I am hosting, to make sure no old versions of it exist, but it keeps positing the original description.

Any thoughts? Could this be because the site is too new and I need to wait for crawls to occur, etc?

Michael Rose

Michael Rose

Do you have a link to the page you’re trying to share so I can look at the source to troubleshoot?

Brandon

Brandon

Hi Michael,

Thanks for the response! I think it was a Facebook cache issue. I had originally thought that might be the case, but then when 4.5 hours went by and it still wasn’t working I began to think it wasn’t a cache issue. When I woke up this morning everything was cool. However, when I use Facebook’s developer tool for object debugger I am getting an error: Object at URL of type article is invalid because the given value /index.html for property og:url could not be parsed as type url. Doesn’t appear to be influencing Open Graph behavior, so I think we are all set! Sorry to bug you. Thanks for making such awesome themes!

Max Galkin

Max Galkin

Hi, Michael. Thanks for this great theme! I’m considering to use Octopress for my blog, they have some extra plugins that I’d like to use, is there a version of your theme for Octopress?

Michael Rose

Michael Rose

Currently no.

When I update So Simple to support some new features in Jekyll 2.x I plan on using the new Octopress gem that makes creating new posts/pages much easier.

Once the Octopress Ink gem is released I may investigate making the theme compatible with it. But for now I’m waiting to see how things shakeout and if there’s a demand for it.

aaronchiang

aaronchiang

Hi, Michael, I got a warning on Jekyll 2.3.0. The feed.xml need change the layout from none to null

faiz

faiz

How can I add categorization of blogs by types like: Arts, poems, tech stuff, science, philosophy, etc?

Michael Rose

Michael Rose

You can assign tags to a post in the YAML Front Matter and then sort on those. See the example posts on the demo site to see how I did it.

If you want something more dynamic and automatic you’ll need to build or install a Jekyll plugin.

Shobhit Garg

Shobhit Garg

Hey!

I searched all over the web and decided to go with this theme. It’s just awesome.

I am planning to launch my blog using this theme.Each post of my blog has different tags like java,programming,algorithm etc. So i want that those should be displayed along with post header or something like that and on clicking on one tag user can visit all the post related to that tag.Can you please guide me how can i achieve this?

Thanks in advance!

Michael Rose

Michael Rose

Take a look at the sample posts in the GitHub repo for the theme. You set the tags for each post in their YAML Front Matter.

And then on the tags page it groups them like this. If you want a page for each tag with the related posts listed you’ll have to use a Jekyll plugin to do that.

Shobhit Garg

Shobhit Garg

How can i add google analytics into my blog?

I have the tracking ID. I can see there is an option analytics in _config.yml. Should i put my tracking id there?

Comments are closed. If you have a question concerning the content of this page, please feel free to contact me.