Jekyll Basics Beginners Guide


Jekyll is a static website generator that converts text files into static websites and blogs. Jekyll is simple and does not require databases. You can also use custom layouts, categories, pages and posts.

How Jekyll Works

In every Jekyll website, there are posts, pages and layouts.

Posts and pages are saved as markdown files. Your layouts are saved as html files.

As a static site generator, Jekyll takes your posts and pages and uses the layouts to generate a full website containing html files. The full website is saved in the _site folder.

How does Jekyll know which layout to use? You tell it in your posts and pages or in your _config.yml file.

You will meet two kinds of Jekyll website.

Regular theme Type

The layout and styling of the website are bundled together in the website folder.

Gem Based Theme Type

Gem based themes allow you to easily change how your website looks without too much hassle. Also, you will be able to easily adopt new changes once theme developers makes an update to the theme.

Installing Jekyll

You can easily create a Jekyll website without learning how to code. Netlify and Forestry offers a quick 1-click install solution.

You can use Forestry CMS to update your website or edit the files on you Github account.

If you would like to install your Jekyll website locally, follow the official Jekyll documentation instructions on how to setup your local development environment.

Once you have Jekyll installed, you can proceed and create and run your first Jekyll website.

Creating a Jekyll Website

To create a new Jekyll website, run the command:

jekyll new first-jekyll-website

Where first-jekyll-website is the name of your website folder.

Once you install and create a Jekyll website, your website folder usually looks like this. gem based theme file structure screenshot

Get inside your Jekyll website folder using:

cd first-jekyll-website

Build and run your websiteon your local server.

bundle exec jekyll serve

If you prefer to use the old method, your Jekyll folder might contain includes and layouts folder regular theme file structure screenshot

Changing Jekyll Website Theme

Gem Based Theme Website

You can change the theme by changing the _config.yml file. Replace the old theme’s name with the new theme’s name.

Regular Theme Website

To use a new theme, replace the current _layout and _include folders with those ones on the new theme.

If the new theme uses different names of the layouts, than the ones you are currently using. Change those to match those on your website. That way, you can avoid changing the layout on each individual post.

Jekyll Themes

I have created some Jekyll themes that you can use to create your first Jekyll website.

  1. Arcana Jekyll Theme Demo Github Download
  2. Bold Portfolio Jekyll Theme Demo Github Download
  3. Landed Jekyll Theme Demo Github Download
  4. Phantom Jekyll Theme Demo Github Download

Some other popular Jekyll themes are:

Jekyll Website Hosting

Jekyll Documentation