Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and our Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server.

If you already have a full Ruby development environment with all headers and RubyGems installed, you can create a new Jekyll site by doing the following:

How to install#

		
  # Install Jekyll and Bundler gems through RubyGems
  ~ $ gem install jekyll bundler
  
  # Create a new Jekyll site at ./myblog
  ~ $ jekyll new myblog
  
  # Change into your new directory
  ~ $ cd myblog
  
  # Build the site on the preview server
  ~/myblog $ bundle exec jekyll serve
  
  # Now browse to http://localhost:4000
	  

Next steps#

Building a Jekyll site with the default theme is just the first step. The real magic happens when you start creating blog posts, using the front matter to control templates and layouts, and taking advantage of all the awesome configuration options Jekyll makes available.

Basic usage#

The Jekyll gem makes a jekyll executable available to you in your Terminal window. You can use this command in a number of ways:

Directory structure#

Jekyll is, at its core, a text transformation engine. The concept behind the system is this: you give it text written in your favorite markup language, be that Markdown, Textile, or just plain HTML, and it churns that through a layout or a series of layout files. Throughout that process you can tweak how you want the site URLs to look, what data gets displayed in the layout, and more. This is all done through editing text files; the static web site is the final product.

A basic Jekyll site usually looks something like this:

		
├── _config.yml
├── _data
|   └── members.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.md
|   └── on-simplicity-in-technology.md
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-page--nethack.md
|   └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass
|   ├── _base.scss
|   └── _layout.scss
├── _site
├── .jekyll-metadata
└── index.html			  

		
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
constructor() {
super();
this.state = {
  hello: 'Hello World!'
}
}
render() {
return(
  <div>
  {this.state.hello}
  </div>
);
}
}

ReactDOM.render (<App />, document.getElementById('root'));		  
  

Front matter#

The front matter is where Jekyll starts to get really cool. 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:

Between these triple-dashed lines, you can set predefined variables (see below for a reference) or even create custom ones of your own. These variables will then be available to you to access using Liquid tags both further down in the file and also in any layouts or includes that the page or post in question relies on.

Where additional pages live#

Where you put HTML or Markdown files for pages depends on how you want the pages to work. There are two main ways of creating pages:

• Place named HTML or Markdown files for each page in your site’s root folder.
• Place pages inside folders and subfolders named whatever you want.

Both methods work fine (and can be used in conjunction with each other), with the only real difference being the resulting URLs. By default, pages retain the same folder structure in _site as they do in the source directory.