File structure:

Note: To work with jekyll you should have a clear knowledge with jekyll directories and files.

A jekyll site consist of these following directories and files.

Jekyll directories:

  • _data
  • _includes
  • _layouts
  • _posts
  • _sass
  • _site
  • assets

Jekyll files:

  • _config.yml
  • Gemfile
  • Gemfile.lock

Jekyll Directories

_data Well-formatted site data should be placed here. The Jekyll engine will autoload all data files (using either the .yml, .yaml, .json, .csv or .tsv formats and extensions) in this directory, and they will be accessible via If there’s a file do-menu.yml under this directory, then you can access contents of the file through

In order work with this directory you should have a clear knowledge with .yml, .yaml, .json, .csv, .tsv.

These are the partials that can be mixed and matched by your layouts and posts to facilitate reuse. The liquid tag {% include header-1.html %} can be used to include the partial in _includes/header-1.html.

Includes are very useful and it completly removes code redundancy.

With includes one can create a file once and use anywhere without repeating the same blocks of codes.

_layouts These are the templates that wrap posts and pages. Layouts are chosen on a post-by-post and page-by-page basis in the front matter. The liquid tag {{ content }} is used to inject content into the web page.

This theme has used several layouts for different page structures and post individuals structures.

Front Matter Any file that contains a YAML front matter block will be processed by Jekyll as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:

layout: documentation
title: Documentation

_posts Your dynamic content, so to speak. The naming convention of these files is important, and must follow the format: YEAR-MONTH-DAY-title.MARKUP. The permalinks can be customized for each post, but the date and markup language are determined solely by the file name.

Your post can be organized by directories as categories or tags.

These tags, categories and all post values can be provided through post front matter and are displayed with their layouts.

Post can be accesed through ‘site.posts’ variable.

Permalinks Permalinks are the output path for your pages, posts, or collections. They allow you to structure the directories of your source code different from the directories in your output.

_sass These are sass partials that can be imported into your main.scss which will then be processed into a single stylesheet main.css that defines the styles to be used by your site.

All CSS packages can be combined into a single package with this saas directory

main.scss In the main.scss file all the theme sass variables are available under root: tag.

These variables can be edited according to the design of the website as shown below.

:root {
--theme-font-family: 'Open Sans', sans-serif; // Use theme font family here
--theme-font-size: 14px;  // Use theme font size here
--theme-font-weight: normal;  // Use theme font weight here
--theme-font-color: var(--grey-dark); // Use theme font color here

--theme-h1-font-size: 32px; // use h1 font size here
--theme-h1-font-weight:500; // use h1 font weight here
--theme-h1-font-color:var(--black); // use h1 font color here
--theme-h1-font-family: 'Abril Fatface', 'Open Sans', cursive; // use h1 font family here

--theme-h2-font-size: 26px; // use h2 font size here
--theme-h2-font-weight:500; // use h2 font weight here
--theme-h2-font-color:var(--black); // use h2 font color here
--theme-h2-font-family: 'Abril Fatface', 'Open Sans', cursive; // use h2 font family here

--theme-h3-font-size: 22px; // use h3 font size here
--theme-h3-font-weight:500; // use h3 font weight here
--theme-h3-font-color:var(--black); // use h3 font color here
--theme-h3-font-family: 'Abril Fatface', 'Open Sans', cursive; // use h3 font family here

--theme-h4-font-size: 18px; // use h4 font size here
--theme-h4-font-weight:500; // use h4 font weight here
--theme-h4-font-color:var(--black); // use h4 font color here
--theme-h4-font-family: 'Abril Fatface', 'Open Sans', cursive; // use h4 font family here

--theme-h5-font-size: 16px; // use h5 font size here
--theme-h5-font-weight:500; // use h5 font weight here
--theme-h5-font-color:var(--black); // use h5 font color here
--theme-h5-font-family: 'Abril Fatface', 'Open Sans', cursive; // use h5 font family here

--theme-h6-font-size: 14px; // use h6 font size here
--theme-h6-font-weight:500; // use h6 font weight here
--theme-h6-font-color: var(--black); // use h6 font color here
--theme-h6-font-family: 'Abril Fatface', 'Open Sans', cursive; // use h6 font family here

--theme-anchor-color: var( --theme-primary-color ); // Use anchor tag color here
--theme-anchor-hover-color: var( --theme-tertiary-color ); // Use anchor tag hover color here

--theme-primary-color: #0052cc; // Use theme primary color here
--theme-primary-bgcolor: #0052cc; // Use theme primary background color here
--theme-secondary-color: #d9e70c; // Use theme secondary color here
--theme-secondary-bgcolor: #d9e70c; // Use theme secondary background color here
--theme-tertiary-color: #00398F; // Use theme tertiary color here
--theme-tertiary-bgcolor: #00398F; // Use theme tertiary background color here

--theme-box-shadow-primary-color: rgba(107,124,141,0.4); // Use theme primary box shadow color here
--theme-box-shadow-secondary-color: rgba(107,124,141,0.6); // Use theme secondary box shadow color here
--theme-header-box-shadow-color: rgba(0,0,0,0.1);  // Use theme header box shadow color here

---theme-facebook-color: #193e91; // Use theme facebook color here
---theme-twitter-color: #00acee; // Use theme twitter color here
---theme-linkedin-color: #0077b5; // Use theme linkedin color here

// Use other color variables for the theme
--black: #040F0F;
--white: #ffffff;
--blue-lighter: #e6eefa;
--blue-dark: #00398F;
--grey: #5D6970;
--grey-lighter: #eff0f1;
--grey-light: #8E969B;
--grey-dark: #414A4E;
--grey-darker: #131516;


  • Change these variables according to the style of the website and it will automatically reflect on the front end of the site.

_site This is where the generated site will be placed (by default) once Jekyll is done transforming it.

assets Assets directory consist of all the css, js, images and other packages for your site.

Click here for more information.

Jekyll Files:

_config.yml Stores configuration data. Many of these options can be specified from the command line executable but it’s easier to specify them here so you don’t have to remember them.

Jekyll gives you a lot of flexibility to customize how it builds your site. These options can either be specified in a _config.yml or _config.toml file placed in your site’s root directory, or can be specified as flags for the jekyll executable in the terminal.

config.yml has the following settings for the theme.

# Website Basic Information & Settings
title: Darkout Jekyll Theme for Static Site Generators
description: >-  # this means to ignore newlines until "baseurl:"
  A starter theme build on Jekyll and Bootsrap. This Jekyll theme includes various modules and easily configurable setting to build your website on. Download Jekyll Theme as Static Site Generator.
baseurl: ""  # the subpath of your site(optional), e.g. /blog
url: ""  # the base hostname & protocol for your site, e.g.
twitter_username: jekyllrb
github_username:  jekyll
permalink: /:title/
  • Title: Use the title for the site.
  • description: Use the description for the site.
  • baseurl: Use the base url for the site.
  • url: Use the site url for the site.
  • permalink: Use the permalink style for the site.
# Font settings
- font-style-url:  # Use font url here.
- font-style-url:  # Use font url here.
  • Use google font style url here. Add any number of font using this array. It will automatically added to the site.
# Post Settings
# - Individual Post
post-layout: full-width  # Use options left-sidebar, right-sidebar, full-width
post-meta: true  # Use options true or false
social-share: true  # Use options true or false
social-share-type: type-1  # Use options type-1 or type-2
  • post-layout: Use the layout for the post.
    • left-sidebar: sidewidget will be displayed on the left column and content on the right column for the post layout will be used.
    • left-sidebar: sidewidget will be displayed on the right column and content on the left column for the post layout will be used.
    • full width: Only content for the post will be displayed in a full width layout.
# Pagination Settings
  enabled: true  # Use options true or false
  per_page: 6  # Use number of post per page
  permalink: '/page/:num/'  # Use pagination permalink here
  title: ' - page :num'  # Use pagination title  here
  limit: 0  # Use pagination limit here
  sort_field: 'date'  # Use  sort_field options here
  sort_reverse: true  # Use options true or false
  • Pagination should be enabled here in order to use on the site.
  • Set enabled option to true to use pagination. Set enabled option to false. So that pagination will not be used for the site.
  • per_page option is used for number of post to be displayed per paginated page.
  • permalink option is used for url of the paginated page.
  • title option is used for the title of the paginated page.
  • sort_field is used for sorting the post using this field.
#Archive settings
    - categories
  layout: archive
    category: '/category/:name/'
  • enabled jekyll archives for categories. jekyll archives can also be used for tags.
  • layout option will use the layout for the archive page.
  • permalinks options will use the url for the category. Tag archive page url can also be used here.

Gemfile A Gem is a bundle of code which can be include in Ruby projects. This allows us to take someone else’s code and drop it into our own project.

Jekyll itself is a Gem as well many Jekyll plugins including jekyll-feed, jekyll-pagination, jekyll-seo-tag and jekyll-archives.

A Gemfile is Ruby’s dependency management system or in other words, a list of Gems a Ruby project needs to run. We use Gemfiles on Jekyll sites when we have Jekyll plugins.

A Gemfile requires at least one source which tells us where to download the Gems. Unless we have an advanced use case will be fine.

Next specify the Gems we’re using. We can include a version number if want a specific version. It’s important to always include Jekyll in our Gemfile.

Usually we’d have to also specify our plugin Gems in _config.yml so Jekyll knows about them. We can avoid this by putting our plugin Gems in a “jekyll_plugins” group which Jekyll includes automatically.

  • Gemfile.lock
    • When we create or change a Gemfile, we need to run bundle install which performs two tasks:
      • Creates a Gemfile.lock file if it doesn’t exist. This file is auto-generated and includes all the Gems in Gemfile with the addition of a version number even if it wasn’t specified. This ensures that other people we share the source code to will have the same version of the gems.
      • Downloads the gems in Gemfile.lock.
    • Usually when we run jekyll we’d do something like this:
    • jekyll serve
    • When we’re using a Gemfile we need to run Jekyll slightly differently. We might have multiple versions of the jekyll-feed plugin on our machine and if we run jekyll serve, it might use the wrong version. We can solve this using bundle exec which makes only the Gems in the Gemfile available. For example if we want to run jekyll serve we’d run:
    • bundle exec jekyll serve
    • Click here for more details.

Darkout Modules list:


  • After downloading the package open the terminal with your theme directory and run ‘jekyll serve’ on the terminal to run jekyll server.
  • If you found any errors or bugs run ‘bundle install’ to update missing gems for jekyll.
  • After doing ‘bundle install’ it will install all the dependency for the jekyll.
  • Try ‘jekyll serve’ to run the jekyll server. If any error occurs in dependency files try ‘bundle exec jekyll serve’.
  • It will fix the dependencies and run the server.