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
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
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)
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.
Lets briefly see some common important commands offered by Jekyll
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
By default, whenever you build your website, it will be generated into a folder called _site.
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
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:
Build A Blog With Jekyll And GitHub Pages - Smashing Magazine
I recently migrated my blog from WordPress to Jekyll, a fantastic website generator that's designed for building…
Getting Started with Jekyll (plus a Free Bootstrap 3 Starter Theme)
Jekyll is a simple and blog-aware static site generator built in Ruby. In laymen terms, it's just a tool to let you…
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 !!