SELF SERVICE KNOWLEDGE BASE

How Can We Help?

Getting Started


Installing the theme

Clone the theme repository from GitHub and install the dependencies with Bundler:

bundle install

Run the following to generate your site:

bundle exec jekyll serve

You can find more on Deployment Methods page on Jekyll website.

Updating the theme

Download the latest version form your Envato downloads page https://themeforest.net/downloads and repeat the installation process.

Theme Setup


Site and author details

Add your site and author details in _config.yml:

# Site title and description
title:              Lite
description:        Helpdesk Jekyll Theme

# Site base hostname & protocol, e.g. http://example.com
url:                "https://lite.jekyll.plus"

# Site logo, image or text
brand:
    image:          logo.svg  # e.g. logo.png, upload logo image file to /assets/img/ folder
    text:           Lite      # if the above "logo:" image variable  is not set, this text logo is displayed instead

# Default author settings
author:
    name:           John Smith
    github:         username    # Github username for avatar

Set in the main navigation links in _data/navigation_header.yml:

- title: About
  url: /about/

Edit copyright notice in _config.yml:

footer:
    copyright:

Set in the navigation links in _data/navigation_footer.yml:

- title: About
  url: /about/

Enabling comments (via Disqus)

Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each post. To enable it, add the following lines to your Jekyll site:

disqus:
    shortname: my_disqus_shortname

You can find out more about Disqus’ shortnames here.

Comments are enabled by default and will only appear in production, i.e., JEKYLL_ENV=production. If you don’t want to display comments for a particular post you can disable them by adding comments: false to that post’s YAML Front Matter.

Adding Google analytics

To enable Google Anaytics, add the following lines to your Jekyll site:

google_analytics: UA-NNNNNNNN-N

Google Analytics will only appear in production, i.e., JEKYLL_ENV=production

Adding Content


Creating news posts

To create a new post, you can create a new markdown file inside the _posts directory by following the recommended file naming format:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. For example, the following are examples of valid post filenames:

2011-12-31-new-years-eve-is-awesome.md
2012-09-12-how-to-write-a-blog.md

Post requires front matter, everything in between the first and second — are part of the YAML Front Matter, and everything after the second — will be rendered with Markdown and show up as “Content”. The following is a post file with different configurations you can add as example:

---
layout: post
title: How To Travel On Low Budget
---

You can rebuild the site in many different ways, but the most common way is to run bundle exec jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

To keep things more organized, add post images to /assets/posts/ directory, and add theme images to /assets/img/ directory.

Adding images to posts

To add an image to a post or page use the following codes: Local image from /assets/posts/ directory:

{% include image.html img="girl.jpg" alt="Alt for image" caption="Girl on a rock" %}

External wide image with lightbox:

{% include image.html img="https://source.unsplash.com/TT-ROxWj9nA.jpg" lightbox="true" alt="Alt for image" caption="Image in lightbox" %}

Adding table of contents

Add the following to the front matter of the support post:

toc: true

Responsive videos

Embed local videos:

<video controls playsinline uk-video="automute: true">
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>

Embed YouTube videos:

<iframe src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="600" height="340" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true"></iframe>

To create a draft post, create the post file under the _drafts directory, and you can find more information in Working with Drafts.

Creating home page

To create a home page, just create a index.md file inside the root directory. The following is a YAML Front Matter example for a page:

---
layout: home
hero:
  title: How Can We Help?
  subtitle: SELF SERVICE KNOWLEDGE BASE
cta:
  title: Didn't find an answer to your question?
  button_text: Contact Us   
  button_url: /contact/
filter: true
---

Support Posts

Create new support post entries in _support folder, similar to creating posts, but with following front matter settings:

---
title: Category hosting Setting up new domain and page
icon: heart
---

All available icons can be found here.

Creating changelog page

Create new page with the following front matter:

---
layout: changelog
title: Changelog
permalink: /changelog/
---

Changelog enties are added in _data/changelog.yml:

- title: Version 0.6.0
  date: Aug 15, 2017
  list:
  - Added style support for radio and checkbox in Firefox
  - Removed class from Section component

Addon Includes


Google Map Include

To display Google map on contact page, add the following in your page content, replacing latitude, longitude and zoom values:

{% include map.html latitude="40.6700" longitude="-73.9400" zoom="16" %}

Contact Form Include (via FormSpree)

To display Google map on contact page, add the following in your page content, replacing latitude, longitude and zoom values:

Submit the form and confirm your email address at FormSpree. Then add the following include to a page, replacing the email address:

{% include formspree.html email="[email protected]" redirect="/thanks" %}

Customization


Theme Color Customization

To modify the primary color, open /_sass/theme/variables.scss and replace the color values e.g.:

// Primary color
$tm-primary-color: #0089ff;
// Body background
$tm-body-background: linear-gradient(to top, #0065fd 0%, #0089ff 100%);

Further style customisation can be done in the following files:

/_sass/theme/mixins.scss
/_sass/theme/variables.scss
/assets/css/main.scss

Further Development

Install UIkit font end framework dependency via Npm:

npm install

Enable live browser reload with the following:

bundle exec jekyll s --livereload

Support


Product Support

Feel free to fork or clone the theme. I’ll Appreciate it if you keep the Author & Github link at footer or give it a Star if you like it. If you come across any issues just open an issue.

Credits and Sources

  • Google analytics https://www.google.com/analytics/
  • Google maps https://www.google.com/maps
  • UIkit front end framework https://getuikit.com/
  • Jekyll CML https://jekyllrb.com/

Didn't find an answer to your question?