Jekyll + Netlify CMS Boilerplate Template

SparrowX is a clean, minimal, SEO-friendly Jekyll theme you can download right now. It is 100% Netlify compatible. Updated demo link – https://sparrowx.netlify.com

The SparrowX

So, I’ve been testing Netlify last week and came across Netlify CMS. The CMS is pretty easy to set up, and it’d be a wise choice for people who don’t want to spend money on hosting.

But SEO… yeah that’s a problem when it comes to Jekyll themes. Sure, you can optimize Jekyll a lot, but it’s hard for people with no development knowledge to setup Jekyll + Netlify CMS manually.

My search for a clean, minimal Jekyll theme ended when I found sparrow on GitHub. Developed by lingxz, it’s a solid theme that can be used as a boilerplate.

So I took the base theme, improved loading speed, added many features for SEO and made it to a Jekyll + Netlify-CMS boilterplate.

SparrowX Jekyll Theme for Netlify CMS — Home page screenshot.

Legacy Features

Fully compatible with Github Pages
Configurable and responsive multi layer menu, adapted from slimmenu
Disqus integration
Font Awesome icons included
Google analytics
Social sharing using rrssb
404 page included
Typographic optimization for Chinese fonts
Atom feed generated with jekyll-feed
Pagination enabled for blog using jekyll-paginate
Basic SEO with Facebook Open Graph tags and Twitter cards

New Features

Fully compatible with Netlify CMS (one-click setup).
Added new custom variables like updated, headerimage, feature-img, sitemap and tag.
The theme renders system font-stack.
Compressed JS.
Improved load time and reduced file requests.
_redirects feature

Website Speed Test

How To Use This Theme

Visit this page to read the SparrowX documentation for Netlify CMS.

Install

Just fork this repo and replace the posts with your own. Also, rename the sample poetry collection to replace it with your own collection, or just delete it if you don’t need to use collections. The example is poetry, but you can easily revamp this into essays, short stories, portfolio, or whatever your creative work is.

General configuration

Customize these values in the _config.yml file:

title                    : "SparrowX"
description              : "A clean minimal Jekyll theme for SEO-focused writers."
favicon                  : "/assets/images/image.png" # You can use base64 encoded images.
url                      : "https://sparrowx.mighil.com" # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
baseurl                  : "" # the subpath of your site, e.g. "/blog" leave blank if no subpath

# Site Author
author:
  name                   : "Mighil" # appears in the footer and atom feed

Disqus

To activate Disqus, fill in your disqus shortname:

comments                 : true # set it to false to disable comments
disqus:
  shortname              : your_shortname

Google analytics

Enable google analytics by filling in your tracking ID:

analytics:
  google:
    tracking_id          : # add your google tracking id here

Collections

If you are using collections, be sure to replace this with your collection name:

collections:
  poetry:
    output: true
    permalink: /:collection/:title/

Pagination

Currently, pagination is set to a the blog page. Unfortunately Jekyll does not yet support pagination on multiple pages.

If you want to paginate on a different page, simply change the paginate_path value in the config file and create the relevant page.

paginate: 5 # amount of posts to show
paginate_path: "/blog/page:num/"
timezone: # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones

Navigation

You can change the navigation links in _data/navigation.yml.

Front matter defaults

At the bottom of the config file, you can also set front matter defaults so that you don’t have to repeat the same front matter for every post. This is an example:

# Front matter defaults
defaults:
  # _pages
  - scope:
      path: ""
      type: pages
    values:
      layout: page
      comments: false
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: post
      comments: true
      share: true
  # _poetry
  - scope:
      path: ""
      type: poetry
    values:
      layout: post
      share: false

How tags work

You should create specific .md files within /tag/ before using the variable.

Other Stuff

To enhance SEO, you can add your twitter username to _config.yml.

You can also add an image path for the og_image value in the config file, for a default open graph sharing image. This value can be overridden in individual posts by using headerimage variable.

Your default image Netlify CMS uploads will go to /images/.

For the various config options see the sample config file for the demo site

The color schemes and fonts can also be customized through scss, by editing the relevant variable in _variables.scss.

Getting Started on Netlify CMS

Visit this page to read the SparrowX documentation for Netlify CMS.

Create a Netlify account if you don’t have one.
Fork SparrowX. (No need enable GitHub pages since we’ll be using Netlify CMS to fetch, build the repo and point the domain.)
Visit https://app.netlify.com/ and click “New site from Git”

Netlify deploy settings for SparrowX

Select master branch to deploy. Use jekyll build build command and set the Publish directory as _site.

/admin/ directory explained

The /admin/ directory contains the index.html and config.yml for Netlify CMS.

Here’s how the config.yml looks for now.

backend:
name: git-gateway
branch: master

publish_mode: editorial_workflow

media_folder: "images" # Media files will be stored in the repo under images
public_folder: "/images" # The src attribute for uploaded media will begin with /images

collections:
- name: "post"
label: "Post"
folder: "_posts"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- {label: "Type", name: "type", widget: "hidden", default: "post"}
- {label: "Title", name: "title", widget: "string"}
- {label: "SEO Title", name: "seotitle", widget: "string"}
- {label: "Author", name: "author", widget: "string"}
- {label: "Description", name: "description", widget: "string", required: false}
- {label: "OG Image", name: "headerimage", widget: "string", required: false}
- {label: "Updated Date", name: "updated", widget: "string", required: false}
- {label: "Body", name: "body", widget: "markdown", required: false}
- {label: "Tags", name: "tags", widget: "string"}
- {label: "URL", name: "url", widget: "string"}

- name: "page"
label: "Page"
folder: "_pages"
create: true
slug: ".md"
fields:
- {label: "Type", name: "type", widget: "hidden", default: "page"}
- {label: "Title", name: "title", widget: "string"}
- {label: "SEO Title", name: "seotitle", widget: "string"}
- {label: "Description", name: "description", widget: "string", required: false}
- {label: "URL", name: "url", widget: "string"}
- {label: "Body", name: "body", widget: "markdown", required: false}

You may edit this according to your preference.

The Netlify CMS Dashboard

The dashboard looks the way as configured on config.yml inside /admin.

Here are the basics:

Go ahead and test SparrowX if you’ve time. Thanks for reading.

Table of Contents