kiko-minus

Gem Version

kiko-minus is a minimalistic Jekyll theme based on kiko-plus.

While the design and styles are largely inherited from the original theme, kiko-minus strips away heavy dependencies like Google Analytics and Disqus in favor of lightweight alternatives. It comes with many additional features with an emphasis on privacy and speed, including automatically compressed images, gzip compression, and SEO optimization.

Demo

Screenshot

Features

  • Ready for use with GitLab or GitHub pages
  • Syntax highlighting
  • Fully responsive
  • Automatic sitemap generation
  • Private comments with ISSO
  • Analytics with Fathom
  • Automatic Atom feed
  • No JavaScript, third party requests, or cookies (unless using Fathom or ISSO)
  • Structured data support (TODO)

Installation

You can use kiko-minus on your site after scaffolding with jekyll new:

Add this line to your Jekyll site's Gemfile:

gem "kiko-minus-gh"

Copy this configuration to your site's _config.yml.

And then execute:

$ bundle

Or install it yourself as:

$ gem install kiko-minus-gh

Contents

kiko-minus has an assortment of components to minimize additional needed configuration, so that all you need to do is add your posts to _posts/ and be ready to go.

_layouts/

  • default.html defines the basic structure of every page, including SEO tags, stylesheet imports, and favicons.
  • home.html is used for the index page, and includes a navigation bar and the paginated list of all posts.
  • page.html is used for individual pages i.e. an About or Contact page.
  • post.html is for your blog posts, and can include a comment section if ISSO is enabled.

_includes/

  • footer.html is put at the bottom of every page to show copyright information.
  • post-list.html renders out a list of posts as defined by pagination.
  • isso.html contains the ISSO script tag and is included if comments are enabled. The tag also includes many of the configurable options as defined here.
  • fathom.html contains the tracker code and is included if analytics are enabled. The tag requires the address of your server and the site ID as provided by your Fathom instance.

_sass/

kiko-minus.scss defines the main variables to be used in the rest of the styles, as well as a couple mixins to help make the site responsive. It also imports the rest of the partials.

Inside kiko-minus/:

  • _colors.scss is copied from Open color and defines a broad palette for easy use.
  • _layout.scss defines the overall structure of the site.
  • _normalize.scss is copied from Normalize.css and is used to render the site consistently across all browsers.
  • _syntax-highlighting.scss defines how code is highlighted.
  • _typography.scss defines the look and feel of the elements on the site.

assets/

  • css/ contains a single style.scss file that imports the rest of the base kiko-minus styles. This is also where custom stylesheets can go, as explained below.
  • img/ is where your images will go for use throughout the site. You can add subfolders here as is done in this sample to better organize.

Misc

  • pages/ can be used for individual pages.
  • index.html is the home page for your site.

Usage

Custom Stylesheets

To add your own stylesheet, uncomment the css entry in _config.yml, and add the location of the stylesheet as its src.

ISSO Integration

To enable comments on your posts, set isso.enabled to true in your _config.yml, and add the location of the embed script as hosted by your ISSO server to isso.script_src. The other options can be deleted if you want the defaults as defined on ISSO's website.

Fathom Integration

To enable analytics throughout the site, set fathom.enabled to true in your _config.yml, and add the location of the tracker script (i.e. https://yoursite.tld/analytics/tracker.js) to fathom.script_src and your site ID to fathom.site_id.

If you don't know the location of the script and site ID, you can look at the tracking code provided on your Fathom dashboard:

...
  m.parentNode.insertBefore(o,m)
})(document, window, '//mysite.dev/analytics/tracker.js', 'fathom');
fathom('set', 'siteId', 'ABCDE');
fathom('trackPageview');
...

In this case, the script is hosted at https://mysite.dev/analytics/tracker.js, and its site ID is ABCDE.

Favicons

kiko-minus supports including a 16x16 and 32x32 px favicon for your site. Place them in the assets/img/logos/ directory with the names favicon-16x16.png and favicon-32x32.png, respectively, and they'll automatically be loaded.

SEO Setup

This theme uses jekyll-seo-tag to help provide metadata to improve your SEO scores. You can supply information to the _config.yml as defined here (many of the options are already added to the config you copy over from this theme).

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/ask616/kiko-minus/issues. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Development

To set up your environment to develop this theme, run bundle install.

Your theme is setup just like a normal Jekyll site! To test your theme, run bundle exec jekyll serve and open your browser at http://localhost:4000. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

When your theme is released, only the files in _layouts, _includes, _sass and assets/css tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in kiko-minus.gemspec accordingly.

License

The theme is available as open source under the terms of the MIT License.