Web Strategy & Beyond.

Jekyll + Netlify CMS with SparrowX

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 Netlify-CMS ready.

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.

Netlify deploy settings for Jekyll

/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:

Netlify CMS dashboard

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

1 Comment

Add Yours →

Leave a Reply