Skip to content
Ankit R. Gadiya edited this page Dec 1, 2018 · 4 revisions

Gem Gem Travis (.org) GitHub issues GitHub stars GitHub last commit GitHub license

Demo: https://st.argp.in/jekyll/

Usage

If you are using Jekyll with Github Pages, you can simply add the following line in your site's _config.yml.

remote_theme: simple-template/jekyll

The template is also available as Ruby Gem. To add the Gem to your jekyll site do the following:

  • Add the Gem in the Gemfile.
    source "https://rubygems.org"
    "jekyll-simple-template"
  • Add the Theme in _config.yml.
    theme: jekyll-simple-template

Alternatively, you can fork the repository and use it as your website.

Plugins

Instead of inventing the wheel, the template uses the following popular plugins for Jekyll, to add features to the template:

  • jekyll-feed: Generates the Atom (RSS like) Feed for Blog Posts
  • jekyll-seo-tag: Adds necesarry SEO information in the head tag
  • jekyll-sitemap: Generates sitemap.org compliant sitemap for the website

Note: For Github Pages users, all the plugins are officially supported by Github and will automatically be enabled on your website. However, the versions may not be up-to-date. Check the versions here. If you want to use the latest versions of the plugins, you can use Travis CI to generate and deploy the website.

Configuration

The template expects following variables in the _config.yml.

lang : Langauge of the Website (for html tag)

title : Title of the Website (for SEO and Header)

author : Author of the Website (for SEO and Footer)

url : Url of the website (for SEO)

baseurl : [Optional] Baseurl of the Website (for relative URL)

logo : [Optional] Logo of the Website (for SEO)

copyright : [Optional] Copyright information for website (for Footer)

mathjax : [Optional] Adds MathJax support
Note: Adds Javascript library

syntax_highlight : [Optional] Adds Syntax highlighting support
Note: Links additional CSS file

Example

Layouts

The template provides following layouts:

  • default
  • blog
  • home
  • page
  • post
  • redirect
  • 404

The default layout implements a basic structure of the page. It is meant to be used by other layouts as the base to build on to.

The blog layout implements a page listing all of the blog post. To make it the front page of website, add the layout in index.md file at the root. If you want Blog to be in a subdirectory like /blog/, you can create a file blog.md in the root and add the following lines. The template will populate the page with all the posts automatically. The content in the file will be added before the posts.

---
layout: blog
permalink: /blog/
---

Example Page

The home layout implements a home page with content and optionally a list of latest blog posts. It is meant to be used as home page of the website. To generate a home page, create a file index.md in the root and add the following lines. The posts option controls if the list will be added or not.

---
layout: home
posts: true
---

Example Page

The page layout implements a generic page with content. It can be used for any page on the website which is not a post. To add a page with page layout, create a file with following lines in metadata. The permalink is recommended for pages although not required.

---
layout: page
---

The post layout implements the blog post page. It supports fields like date and description. It is meant to be used for blog posts in _posts directory. Note that tag support was removed from posts.

---
layout: post
date: DATE_OF_POST
description: "DESCRIPTION FOR THE POST"
---

The redirect layout is sort of a hack to create HTTP redirects. If you move a page or post from one place to another, it's a good idea to create a redirect. But, a lot of static site hosting services do not provide a way to create a redirect response. This layout provides a way to create redirects irrespective of the hosting service. To create a redirect, add the markdown file with following lines. This layout also respects the permalink field.

---
layout: redirect
redirect: "URL"
---

A lot of static site hosting services including Github Pages, Gitlab Pages, Surge and Netlify supports custom 404 pages. The 404 layout can be used for that. To add a custom 404 page, create a file 404.md in the root and add the following lines. Note that permalink field is required for this page. You can add a helpful message for visitors after the following metadata.

---
layout: 404
permalink: 404.html
---

Example Page

All the layouts respect title field. To override any of the built-in layouts, just create the file with same name in _layouts/ directory.

Navigation

For navigation links, the template looks for _data/navigation.yml file. The links should be added to the file in following format.

- title: "Link Name"
  url: "http://example.com"

Where url can be external or relative.

Example

Social Links

For social links in footer, the template looks for _data/social.yml file. Following is the supported social networks and format in which it should be added.

facebook : username
twitter  : username
github   : username
youtube  : channel
instagram: username
linkedin : username

Example

Stylesheets

The template adds a very basic style sheet into the generated HTML page's head to prevent extra HTTP requests. To change the default style, create a file _includes/style.html and add the lines between <style> tags. Jekyll will automatically insert these into HTML.

The optional feature of syntax highlighting, uses external style sheet. To overwrite the style, create a file assets/highlight.css.

Micro.Blog

If you want to link the blog/site with Micro.blog, add following in _config.yml.

micro_blog: username

This will generate a link tag in head (to verify site) and add a link to follow on Blog page.

Pocket

To use Pocker for Publishers with the website, you need to add the Pocket verification code in the HEAD tag of the website. The template uses a variable pocket_verification in the global configuration to insert it into HEAD. To use this, add the following line in _config.yml.

pocket_verification: verification_code

SEO

As mentioned above, the template uses jekyll-seo-tag for SEO information. All the options from that can be used. For more information read its Usage.

Sitemap and Feed

As mentioned above, the template uses jekyll-sitemap and jekyll-feed for sitemap and feed respectively. By default sitemap is available at /sitemap.xml and feed of posts is available at /feed.xml. For more information about the plugins, check out there repositories and read the documentations.

Tests

Google Mobile-Friendly Test Results Google Pagespeed Insight Results Pingdom Webspeed Test Results Gmetrix Website Speed Test Results

Links

License

BSD 3-Clause License.