A simple, beautiful Jekyll theme that's mobile first
Latest commit 271eed0 Jan 16, 2017 @johnotander committed on GitHub Merge pull request #311 from publitcity/patch-1
Only show pagination if ...
Failed to load latest commit information.
_includes Only show pagination Jan 15, 2017
_layouts Merge pull request #302 from bartekpl/fix-gtm Nov 14, 2016
_posts medium-style link underlines Nov 25, 2015
_sass Add current page position between navigation buttons for pagination Aug 23, 2016
css remove dup sass import Nov 22, 2015
images Add optional post footer, closes #87. Oct 15, 2014
.gitignore add .jekyll-metadata Mar 22, 2016
404.md Fix the Home link on 404 page Sep 9, 2014
CNAME Create CNAME Jun 18, 2014
Gemfile Add Gemfile Dec 14, 2015
LICENSE.txt Update LICENSE.txt Jul 10, 2015
README.md Remove nitrous reference from readme Jan 13, 2017
Rakefile Flesh out rake -T output Oct 4, 2015
_config.yml fb-pages defaults to false Jul 24, 2016
about.md navigation fix to use actual about and contact page url and title Jan 4, 2016
apple-touch-icon-114x114.png Add a favicon Dec 30, 2014
apple-touch-icon-120x120.png Add a favicon Dec 30, 2014
apple-touch-icon-144x144.png Add a favicon Dec 30, 2014
apple-touch-icon-152x152.png Add a favicon Dec 30, 2014
apple-touch-icon-180x180.png Add a favicon Dec 30, 2014
apple-touch-icon-57x57.png Add a favicon Dec 30, 2014
apple-touch-icon-60x60.png Add a favicon Dec 30, 2014
apple-touch-icon-72x72.png Add a favicon Dec 30, 2014
apple-touch-icon-76x76.png Add a favicon Dec 30, 2014
apple-touch-icon.png Flesh out rake -T output Oct 4, 2015
contact.html Expand only vertically Jul 2, 2016
favicon-160x160.png Add a favicon Dec 30, 2014
favicon-16x16.png Add a favicon Dec 30, 2014
favicon-192x192.png Add a favicon Dec 30, 2014
favicon-32x32.png Add a favicon Dec 30, 2014
favicon-96x96.png Add a favicon Dec 30, 2014
favicon.ico Add a favicon Dec 30, 2014
fb-instant-articles.xml fb instant articles integration Jul 24, 2016
feed.xml Fixed build warning originating from feed.xml Aug 28, 2014
index.html Store text in _config.yml Jan 5, 2016
nitrous.json Add Nitrous.io quickstart button and update README May 9, 2016
thanks.md Update contact page Jan 6, 2016




Pixyll screenshot

Pixyll is a simple, beautiful theme for Jekyll that emphasizes content rather than aesthetic fluff. It's mobile first, fluidly responsive, and delightfully lightweight.

It's pretty minimal, but leverages large type and drastic contrast to make a statement, on all devices.

This Jekyll theme was crafted with <3 by John Otander (@4lpine).

中文版 https://github.com/ee0703/pixyll-zh-cn.

Getting Started

If you're completely new to Jekyll, I recommend checking out the documentation at http://jekyllrb.com or there's a tutorial by Smashing Magazine.

$ git clone git@github.com:johnotander/pixyll.git
$ cd pixyll
$ gem install bundler # If you don't have bundler installed
$ bundle install

Verify your Jekyll version

It's important to also check your version of Jekyll since this project uses Native Sass which is only supported by 2.0+.

Fork, then clone

Fork the repo, and then clone it so you've got the code locally.

Modify the _config.yml

The _config.yml located in the root of the Pixyll directory contains all of the configuration details for the Jekyll site. The defaults are:

# Site settings
title: Pixyll
email: your_email@example.com
author: John Otander
description: "A simple, beautiful theme for Jekyll that emphasizes content rather than aesthetic fluff."
baseurl: ""
url: "http://pixyll.com"

# Build settings
markdown: kramdown
permalink: pretty
paginate: 3

Jekyll Serve

Then, start the Jekyll Server. I always like to give the --watch option so it updates the generated HTML when I make changes.

$ jekyll serve --watch

Now you can navigate to localhost:4000 in your browser to see the site.

Using Github Pages

You can host your Jekyll site for free with Github Pages. Click here for more information.

A configuration tweak if you're using a gh-pages sub-folder

In addition to your github-username.github.io repo that maps to the root url, you can serve up sites by using a gh-pages branch for other repos so they're available at github-username.github.io/repo-name.

This will require you to modify the _config.yml like so:

# Site settings
title: Repo Name
email: your_email@example.com
author: John Otander
description: "Repo description"
baseurl: "/repo-name"
url: "http://github-username.github.io"

# Build settings
markdown: kramdown
permalink: pretty
paginate: 3

This will ensure that the the correct relative path is constructed for your assets and posts. Also, in order to run the project locally, you will need to specify the blank string for the baseurl: $ jekyll serve --baseurl ''.

If you don't want the header to link back to the root url

You will also need to tweak the header include /{{ site.baseurl }}:

<header class="site-header px2 px-responsive">
  <div class="mt2 wrap">
    <div class="measure">
      <a href="{{ site.url }}/{{ site.baseurl }}">{{ site.title }}</a>
      <nav class="site-nav right">
        {% include navigation.html %}

A relevant Jekyll Github Issue: https://github.com/jekyll/jekyll/issues/332

Contact Form

The contact form uses http://formspree.io. It will require you to fill the form out and submit it once, before going live, to confirm your email.

More setup instructions and advanced options can be found at http://formspree.io


To configure Disqus, set up a Disqus site with the same name as your site. Then, in _config.yml, edit the disqus_shortname value to enable Disqus.

Customizing the CSS

All variables can be found in the _sass/_variables.scss file, toggle these as you'd like to change the look and feel of Pixyll.

Page Animation

If you would like to add a fade-in-down effect, you can add animated: true to your _config.yml.


AnchorJS: A JavaScript utility for adding deep anchor links to existing page content. AnchorJS is lightweight, accessible, and has no dependencies. You can turn it on by toggling enable_anchorjs. Because it offers many ways for customization, tweaks should be done in _includes/footer.html. Default settings after turning AnchorJS on are:

    anchors.options.visible = 'always';
    anchors.add('article h2, article h3, article h4, article h5, article h6');

See documentation for more options.

Put in a Pixyll Plug

If you want to give credit to the Pixyll theme with a link to http://pixyll.com or my personal website http://johnotander.com somewhere, that'd be awesome. No worries if you don't.

Web analytics and search engines

You can measure visits to your website either by using Google Analytics tracking embed or the more advanced Google Tag Manager container.

  • For Google Analytics set up the value for google_analytics, it should be something like google_analytics: UA-XXXXXXXX-X.
  • For Google Tag Manager set up the value for google_tag_manager, it should be something like: google_tag_manager: GTM-XXXXX.
  • Do not set both of above methods because this will cause conflicts and skew your reporting data.
  • Remember that you need to properly configure the GTM container in its admin panel if you want it to work. More info is available in GTM's docs.

Your website is, by default, set to be allowed for crawling and indexing by search engines. (Unless you made yourself a custom robots.txt file). You can use front matter settings on each page to control how search engines will it. Sometimes you may want to exclude a particular page from indexing or forbid Google to store a copy of your page in its cache. It is up to you. Use the meta_robots frontmatter key and assign values based on this table. Some examples:

# exclude page from index
meta_robots: noindex

# allow indexing, disallow caching
meta_robots: noarchive

# allow indexing, disallow crawling links
meta_robots: nofollow

# disallow indexing, follow links
meta_robots: noindex,follow

In order to get more information about your website's status in search engines, you can register it in Google Search Console and/or Bing Webmaster Tools. Both these tools will ask you to authorize your website with them and there are couple of ways to do that. Pixyll supports verification via meta tags - just fill in values for google_verification and/or bing_verification in _config.yml, the verification strings and meta tags will then be added automatically.

If search engine optimization is your thing, you can also set up meta_description values for each page/post. By default Pixyll uses summary to populate the <meta name="description" content="..."> tag and falls back to description from _config.yml if summary is not present in page/post's front matter. The summary is also used for generating Open Graph tags. Why would you want to use a dedicated variable for meta description? Because character limit to properly display this description in search results (as a snippet) is way smaller than in Open Graph. It is recommended to keep it at 155-160 characters, for more in-depth info read this article.

And lastly - if you happen to write in language other than English be sure to change og_locale in _config.yml to reflect it.


I hope you enjoy using Pixyll. If you encounter any issues, please feel free to let me know by creating an issue. I'd love to help.

Upgrading Pixyll

Pixyll is always being improved by its users, so sometimes one may need to upgrade.

Ensure there's an upstream remote

If git remote -v doesn't have an upstream listed, you can do the following to add it:

git remote add upstream https://github.com/johnotander/pixyll.git

Pull in the latest changes

git pull upstream master

There may be merge conflicts, so be sure to fix the files that git lists if they occur. That's it!

Thanks to the following


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request