Jekyll Basics

Preview

To view the full tutorial, sign up for a free trial on our Sign Up page.

Sign Up

Summary

Below you will find a collection of tutorials teaching the basics of Jekyll, the static site generator.

Before You Start

These tutorials assume you have a basic understanding of HTML, CSS, Sass, and the terminal.

Tutorials

Note: Tutorial titles in black will be added soon.

Introduction

Why should I use Jekyll?

Learn why you should use Jekyll.

Check ruby version

ruby -v

How to install Jekyll

Learn how to install Jekyll.

How to uninstall Jekyll

Learn how to uninstall Jekyll.

Getting started

Create new Jekyll project with a theme

jekyll new project-name

Create new Jekyll project without a theme

jekyll new project-name --blank

Learn how to create a new Jekyll project with Bundler.

Start server

bundle exec jekyll serve -l

Stop server

To stop the server, press Ctrl+C.

Using Jekyll with Git

Learn how to set up your .gitignore file when working with Jekyll.

Code

Layouts

<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>{{ page.title }} - {{ site.title }}</title>
    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
  </head>
  <body>
    {{ content}}
  </body>
</html>

Front matter

---
layout: default
title: Home
---

Includes

{% include navbar.html %}

Include with parameters

Learn how to create reusable components by passing parameters to includes.

Collections

Learn how to work with collections of Markdown files.

Data files

Learn how to work with CSV and other data files in Jekyll.

Posts

Create a post

To create a post, add a Markdown file to your _posts folder with the following format: YYYY-MM-DD-post-title.md

Create a draft post

To create a draft post, add a Markdown file to your _drafts folder without including a date in the post title, like this:

post-title.md

* work in progress

** coming soon!

Notice any errors? Have other questions or suggestions? Send your comments and questions to contact@simpledev.io.