Customize your website theme colors, layout, titles and more. The settings files can be found in src/yml.

Site

The general settings can be found in src/yml/site.yml.

IMPORTANT: Only when cloning the repo. If you’re using the gem, modify those properties in your _config.yml.

name

Type: string

The website name will appear in several places, the most important one is at the header.

Example:

# site.yml
name: Jekflix

title

Type: string

The website title is used for SEO purposes and set the home page title.

Example:

# site.yml
title: Jekflix | A blog theme for Jekyll

description

Type: string

The website description is used for SEO purposes only.

Example:

# site.yml
description: Jekflix is a template for Jekyll inspired by Netflix and made by Thiago Rossener.

tags

Type: list

The website tags are used as keywords for SEO purposes.

Example:

# site.yml
tags:
  - blog
  - template
  - jekyll
  - theme
  - netlify

email

Type: string

The email is used for the Contact page. Leave it blank in case you don’t want a Contact page.

Example:

# site.yml
email: youremail@xyz.com

disqus_username

Type: string

Set your Disqus username to add comments to your posts. Leave it blank if you don’t want enable comments.

Example:

# site.yml
disqus_username: disqus_username

show_hero

Type: boolean

Show/hide hero in the home page. It accepts the values true or false.

Example with hero:

# site.yml
show_hero: true

Home page with hero screenshot

Example without hero:

# site.yml
show_hero: false

Home page without hero screenshot

paginate

Type: integer

Add pagination to the home page.

Set an integer > 0 to the amount of posts to show per page. Leave it blank if you don’t want pagination.

# site.yml
paginate: 12

Social

The social settings can be found in src/yml/social.yml. Social media icons appear in the footer of every page.

IMPORTANT: Only when cloning the repo. If you’re using the gem, modify those properties in your _config.yml.

github_username

Type: string

Set the GitHub username for the website.

# social.yml
github_username: github_username

facebook_username

Type: string

Set the Facebook username for the website.

# social.yml
facebook_username: facebook_username

twitter_username

Type: string

Set the Twitter username for the website.

# social.yml
twitter_username: twitter_username

instagram_username

Type: string

Set the Instagram username for the website.

# social.yml
instagram_username: instagram_username

linkedin_username

Type: string

Set the LinkedIn username for the website.

# social.yml
linkedin_username: linkedin_username

medium_username

Type: string

Set the Medium username for the website.

# social.yml
medium_username: medium_username

Theme

The theme settings are in src/yml/theme.yml. You just need to change this file and run gulp build.

IMPORTANT: Only when cloning the repo. If you’re using the gem, follow these instructions.

GitHub pages

It’s a known issue that you can’t run Gulp when deploying the website into GitHub pages. So, you must change the theme colors and run gulp build locally, then push the changes into your repo, there is no other way.

To see how your website is going to look like when you deploy it, run bundle exec jekyll serve and access http://127.0.0.1:4000/.

themeColor

Type: hexadecimal

Default: #ff0a16 #FF0A16

Color used in links, icons and some custom elements.

# theme.yml
themeColor: "#ff0a16"

primaryDark

Type: hexadecimal

Default: #141414 #141414

Color used in dark backgrounds and some texts.

# theme.yml
primaryDark: "#141414"

accentDark

Type: hexadecimal

Default: #ffffff #FFFFFF

Color used in light backgrounds and as contrast to dark backgrounds.

# theme.yml
accentDark: "#ffffff"

lightGray

Type: hexadecimal

Default: #f2f2f2 #F2F2F2

Color used in borders, contrast to light backgrounds, some links and subtitles.

# theme.yml
lightGray: "#f2f2f2"

texts

Type: hexadecimal

Default: #333333 #333333

Color used in texts overall.

# theme.yml
texts: "#333333"

Posts

The posts settings can be found in src/yml/posts.yml.

IMPORTANT: Only when cloning the repo. If you’re using the gem, modify those properties in your _config.yml.

show_time_bar

Type: boolean

Show/hide the reading progress bar. It accepts the values true or false.

# posts.yml
show_time_bar: true

Reading Progress Bar Screenshot

show_modal_on_exit

Type: boolean

Show/hide recommendation modal when visitor is leaving the page. It accepts the values true or false.

# posts.yml
show_modal_on_exit: false

Modal screenshot

show_modal_on_finish_post

Type: boolean

Show/hide recommendation modal when visitor reaches the end of the post. It accepts the values true or false.

# posts.yml
show_modal_on_finish_post: false

Modal screenshot

two_columns_layout

Type: boolean

Switch posts layout between one and two column. It accepts the values true or false.

Example with two columns:

# posts.yml
two_columns_layout: true

Post with two columns screenshot

Example with one column:

# posts.yml
two_columns_layout: false

Post with one column screenshot

Advanced

The advanced settings can be found in src/yml/advanced.yml.

IMPORTANT: Only when cloning the repo. If you’re using the gem, modify those properties in your _config.yml.

baseurl

Type: string

Set the subpath of your site, e.g. /blog.

# advanced.yml
baseurl: ""

url

Type: string

Set the base hostname and protocol for your site, e.g. https://rossener.com

# advanced.yml
url: ""

google_analytics

Type: string

Set your Google Analytics tracking ID.

# advanced.yml
google_analytics: "UA-XXXXXXXX-X"

language

Type: string

Set your website language. It’s used for SEO purposes (e.g. pt-BR, en, es, fr)

# advanced.yml
language: "en"