Jekyll, The Static Site Generator — Intro

Hi, Everyone in this article I am going to share something about an awesome tool Jekyll used for generating static sites. Its designed for building minimal, static blogs and websites which can be hosted on GitHub Pages.

So u may be be curious to know about what is Jekyll and how we use it. So i m going to cover the surface level (basics) on what is Jekyll and how we use it in our projects.

What is Jekyll ?

Jekyll is a static site generator that runs on the Ruby programming language.Its is a modern tool to transform your plain text into static websites and blog. Jekyll takes your content written in Markdown, passes it through your templates and creates a complete static website. GitHub Pages conveniently serves the website directly from your GitHub repository so that you don’t have to deal with any hosting headaches.

What u need to know before getting into Jekyll ?

• Familiar with command lines
• Basic knowledge of HTML/CSS(Preprocessor SASS)
• Well familiar using GitHub
• Comfortable using Git
• Knowledge of how Gulp/Grunt works(Optional)

What is a static site generator?

A static site generator builds a website using plain HTML files. You can treat a static site generator as a very simple sort of CMS (content management system).Instead of having entire header footer inside every pages it allows us to include files and load them into each page.

When a user visits a website created by a static site generator, it is loaded no differently than if you had created a website with plain HTML. By contrast, a dynamic site running on a server side language, such as PHP, must be built every time a user visits the site.

Advantages of using Jekyll

• Simplicity (Has No Database,enough with basic idea of HTML/CSS)
• Minimal (Absolutely no functionality or features we are not using)
• No Database ( All posts and pages are converted to static HTML prior to publication)
• Blog-Aware ( It has all the benefits of a CMS, you just need to know how to use it. It’s completely blog-aware with permalinks, categories, pages, posts, custom layouts, and even custom content types called Collections. On top of this, there’s themes, plugins, and all sorts of extras.)
• Fast (No database no unnecessary HTTP requests results to fast site loading)
• No Hosting Needed (Has Free Hosting with GitHub Pages) — awesome feature

Installation

Jekyll is a command-line executable built with Ruby and has a few commands we need to run from time to time.(This Installation Process is for mac users if youuse Windows or Linux Follow this tutorials: tutorial 1 tutorial 2)

- Install Command Line Tools

Open Terminal. Check to see if you have XCode Command Line Tools installed by typing gcc -v. At this point, it will prompt you to install if you don’t. Or run this code to install:

xcode-select — install

-Install Ruby

Ruby should come pre-installed on all OSX computers. You can check if Ruby is installed by running ruby -v. It should return with Ruby version 2.0.0 or higher.

sudo gem install ruby

- Install Bundler

Bundler is a package manager that will aid you in installing all the Jekyll dependencies.

sudo gem install bundler

- Nodejs Install

sudo install node

- Create Gemfile

sudo bundle install

- Install Jekyll

gem install jekyll

sudo gem install jekyll (if issues occur try)

Now to reconfirm Jekyll is installed correctly we can check it by typing :

jekyll -v (which shows the current Jekyll version if installed correctly)

Getting Started

There are multiple ways to get started with Jekyll, each with its own variations. Here are a few options:

• Install Jekyll locally via the command line, create a new boilerplate website using Jekyll new, build it locally with Jekyll build, and then serve it. (The Jekyll website shows this workflow.)
• Clone a starting point to your local machine, install Jekyll locally via the command line, make updates to your website, build it locally, and then serve it.
• Fork a starting point, make changes, and then serve it.

We are going to do with the Jekyll starter site

So, lets get inside which folder we ant our first jekyll project to be and type this command

cd location/on/your/computer jekyll new my-blog

The new command here will create an install of Jekyll with the default theme.

Commands

Lets briefly see some common important commands offered by Jekyll

Serve

Jekyll serve -w

This particular command is totally awesome , it acts like a gulp -watch command inside gulp.Means, it listens to the changes we make to our site in real time.

to stop the changes running we enter

ctrl + c

Build

By default, whenever you build your website, it will be generated into a folder called _site.

jekyll build

We can also change the destination with:

jekyll build — destination <destination>

Lastly, you can also add a — watch flag to rebuild on changes:

jekyll build — watch

New

jekyll new my-new-static-super-cool-blog-about-aliens-and-humans

Now, I hope you have installed your default theme up to now to add custome pre-made templates inside Jekyll we can visit See Themes or customize the starter to site you want.So, this is just a surfacing level description to Jekyll if you need depth tutorial on Jekyll you can Watch Tutorials on Treehouse.

Useful Articles learning Jekyll are:

Hope, You got a basic idea of what Jekyll is and how cool is is to use in simple websites and blogs.

Thanks for your read.

Happy Coding !!