Jekyll is a simple, blog-aware, static site generator. It will convert text files s in various formats to ready-to-publish static website suitable for serving with your favorite web server. In this tutorial we will see how to create our first jekyll powered site.

Creating Basic site

  • Download and install ruby. On Windows download and install windows-based installer of Ruby. On Linux ruby may be already installed - If it does not follow the instructions of your system package manager to install it.

  • Install bundler gem. The bundler gem will provide a consistent environment for our jekyll project with the exact gems and versions that are needed to build the site.

    Install bundler
    ~/sites# gem install bundler
    
  • Create new directory for our new Jekyll project. Suppose we create a new Jekyll project site called hyde under ~\sites :

    creating project directory
    ~/sites# mkdir hyde
    ~/sites# cd hyde
    
  • Create _jekyll directory

    creating project directory
    ~/sites/hyde# mkdir _jekyll
    
  • Create a new Gemfile under _jekyll directory. You may want to add dependencies and jekyll plugins which are needed to build the site.

    The Gemfile
    source 'https://rubygems.org'
    gem 'jekyll', '~>3.0'
    
  • run the bundle install --binstubs command to install jekyll and other dependencies.

Install jekyll via bundler
~/sites/hyde# cd _jekyll
~/sites/hyde/_jekyll# bundle install --binstubs
Fetching gem metadata from https://rubygems.org/
...
Using jekyll 3.1.6
Bundle complete! 1 Gemfile dependency, 15 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
  • create our new jekyll site

    Creating the new site
    ~/sites/hyde/_jekyll# cd ..
    ~/sites/hyde# ruby _jekyll\bin\jekyll new --force .
    New jekyll site installed in ~/sites/hyde.
    

Serving from you local machine

Congratulations, You have created a skeleton of your Jekyll project. Now, you can serve it from your local machine:

Serve the site
~/sites/hyde# ruby _jekyll\bin\jekyll serve
~/sites/hyde#ruby _jekyll\bin\jekyll serve
Configuration file: ~/sites/hyde_config.yml
          Source: ~/sites/hyde
     Destination: ~/sites/hyde/_site
Incremental build: disabled. Enable with --incremental
    Generating...
                  done in 0.25 seconds.
Auto-regeneration: enabled for '~/sites/hyde'
Configuration file: ~/sites/hyde/_config.yml
  Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.

As we see, You can visit your new site in http://127.0.0.1:4000/

your-first-jekyll-site

Updating your site

Jekyll watch our project directory for changes and will regenerate our site to reflect them.

Let change _posts/xxxx-xx-xx-welcome-to-jekyll.markdown to see this:

jekyll - updating post
---
layout: post
title:  "Hello Jekyll :-)"
date:   2016-07-19 13:22:15 -0700
categories: jekyll update
---
This is my first post in my new Jekyll site.

In our console window, Jekyll notify us that it regenerate our site since a change was detected.

jekyll - Auto Regenerating when updating post
Server address: http://127.0.0.1:4000/
rver running... press ctrl-c to stop.
  Regenerating: 1 file(s) changed at 2016-07-20 23:23:49 ...done in 0.34375 seconds.

When we refresh the page, we will the updated site with the change we make

jekyll will watch your