πŸ“ˆ Sleek is a modern Jekyll theme focused on speed performance & SEO best practices
Switch branches/tags
Nothing to show
Clone or download
Latest commit 9c038c3 Oct 12, 2018
Permalink
Failed to load latest commit information.
_img/posts update gulp, remove excess dependencies and restructure gulpfile Oct 12, 2018
_includes Removing sass-breakpoint dependency to fix #10 Jun 22, 2018
_js Added first version of categories May 6, 2018
_layouts missing doctype May 17, 2018
_posts Added first version of categories May 6, 2018
_sass Removing sass-breakpoint dependency to fix #10 Jun 22, 2018
assets Removing sass-breakpoint dependency to fix #10 Jun 22, 2018
script cibuild Dec 3, 2017
.babelrc refactoring gulpfile, adding es6 transpiling, serviceworker and minor… Jan 20, 2018
.eslintignore update gulp, remove excess dependencies and restructure gulpfile Oct 12, 2018
.eslintrc refactoring gulpfile, adding es6 transpiling, serviceworker and minor… Jan 20, 2018
.gitignore Add better instructions on how to generate images #40 Aug 16, 2018
.scss-lint.yml General structure Nov 26, 2017
.travis.yml Addd browserstack to travis Sep 10, 2018
404.md Fixed 404 page to work with local jekyll server Jul 1, 2018
Gemfile Initial commit Nov 19, 2017
LICENSE.txt Initial commit Nov 19, 2017
README.md Improving documentation May 6, 2018
_config.yml links May 6, 2018
about.md General structure Nov 26, 2017
categories.md Making SW optional, since it won't work if theme is installed as a ru… May 6, 2018
contact.md Easier πŸ“§ setup Apr 21, 2018
gulpfile.babel.js convert to arrow functions Oct 12, 2018
index.md Performance optimization: progressive images, inlining critical CSS, … Dec 2, 2017
jekyll-sleek.gemspec πŸ’Ž bump Jun 22, 2018
package-lock.json update gulp, remove excess dependencies and restructure gulpfile Oct 12, 2018
package.json update gulp, remove excess dependencies and restructure gulpfile Oct 12, 2018
sleek.jpg Adding sleek image Jan 13, 2018
sw.js Removing sass-breakpoint dependency to fix #10 Jun 22, 2018

README.md

Sleek

Gem Version Build Status license

A modern Jekyll theme focused on speed performance & SEO best practices.

Sleek Jekyll Theme

Features

Preview Demo

Installation

System Requirements

To use this project, you'll need the following things on your local machine:

Jekyll

gem install jekyll

NodeJS (8 or greater)

Download and open the NodeJS installer

Gulp CLI (optional, but recommended)

npm install --global gulp-cli

Up & Running

  1. Fork the repo
  2. Clone or download the repo into directory of your choice: git clone https://github.com/your-github-username/sleek.git
  3. Inside the directory run bundle install and npm install
  4. If you want to use gulp.js run gulp or npm start
    • if you don't want to use gulp you can run bundle exec jekyll serve instead

Installing to existing jekyll project

Add this line to your Jekyll site's Gemfile:

gem "jekyll-sleek"

And add this line to your Jekyll site's _config.yml:

theme: jekyll-sleek

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-sleek

File Structure Overview

sleek
β”œβ”€β”€ _includes	               # theme includes
β”œβ”€β”€ _js	                       # javascript files (by default jquery will be included with the scripts inside)
β”œβ”€β”€ _layouts                   # theme layouts (see below for details)
β”œβ”€β”€ _pages                     # pages folder (empty by default)
β”œβ”€β”€ _posts                     # blog posts
β”œβ”€β”€ _sass                      # Sass partials
β”œβ”€β”€ assets
|  β”œβ”€β”€ css	               # minified css files
|  β”œβ”€β”€ img                     # images and icons used for the template
|  └── js		               # bundled and minified files from _js folder
β”œβ”€β”€ _config.yml                # sample configuration
β”œβ”€β”€ gulpfile.js                # gulp tasks (tasks autorunner)
β”œβ”€β”€ index.md                   # sample home page (blog page)
└── package.json               # gulp tasks

Usage

You can modify the theme by changing the settings in _config.yml.

Posts

Create a new Markdown file such as 2017-01-13-my-post.md in _post folder. Configure YAML Front Matter (stuff between ---):

---
layout: post # needs to be post
title: Getting Started with Sleek # title of your post
featured-img: sleek #optional - if you want you can include hero image
---

Images

In case you want to add a hero image to the post, apart from changing featured-img in YAML, you also need to add the image file to the project. To do so, just upload an image in .jpg format to _img folder. The name must before the .jpg file extension has to match with featured-img in YAML. Next, run gulp img from command line to generate optimized version of the image and all the thumbnails. You have to restart the jekyll server to see the changes.

Sleek uses Lazy Sizes. Lazy Loader for loading images. Check the link for more info. Lazy Sizes doesnt’t require any configuration and it’s going to be included in your bundled js file.

Pages

The home page is located under index.md file. To change the content or design you have to edit the default.html file in _layouts folder.

In order to add a new page, create a new html or markdown file under root directory or inside _pages folder. To add a link in navigation add it in _config.yml:

# THEME SETTINGS
navigation: # Navigation links
  - {name: 'Home', link: '/'}
  - {name: 'About', link: '/about'}
  - {name: 'Contact', link: '/contact'}

name is the text that will be shown and link, well, it's a link.

Site configuration

Sleek comes with jekyll-seo-tag plugin preinstalled to make sure your website gets the most useful meta tags. See usage to know how to set it up.

Additionally, in _config.yml you can find custom theme settings under # THEME SETTINGS comment. Here's a brief overview of those custom settings:

  • navigation - collection of links that will be shown in the header
  • tagline - text that will be displayed on the homepage under the heading.
  • hero_img - background image of the homepage hero section

Other settings usually enable/disable certain feature, and are discussed with the next sections.

Google Tag Manager

To enable Google Tag Manager, add the uncomment the following line in _config.yml:

google_tag_manager: GTM-XXXXXXX

Replace GTM-XXXXXXX with your Google Tag Manager Container ID.

Note by default GTM tracking snippet will be also included in development environment.

Google Tag Manager was chosen for this project as it's more flexible than Google Analytics, and it can be used to add GA to your site.

Disqus

To enable Disqus comments, add your Disqus shortname to _config.yml:

disqus:
  shortname: my_disqus_shortname

Formspree

To use Formspree with your email address, you need to change the following:

Change your-email@domain.com email in _config.yml

email: your-email@domain.com

You can check if it works by simply submitting the form.

If you have a Formspree Gold Account, you can take advantage of using AJAX to submit form. To do so, uncomment last function in _js/scripts.js and run gulp js. Now the form will be submitted asynchronously, without leaving the page.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/janczizikow/sleek. 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 and npm install.

The theme is setup just like a normal Jekyll site! Check out file structure overview for details. To test the theme, run gulp and open your browser at http://localhost:3000. This starts a Jekyll server using the theme. Add pages, documents, data, etc. like normal to test the theme's contents. As you make modifications to the theme and to the content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.

License

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