How to Install Jekyll Plugin in GitHub Pages?

Jekyll is a plugin for the GitHub pages. If we breakdown into easy steps, first, if there is any website and if we do not want to make it from the scratch, this website will provide some static web page Templates which will also be responsive. We can just search jkill.com in Google Chrome and we can find many types of static web pages, and layouts on the JQ website, and if we select one website, we can see all the HTML, CSS, and JavaScript files of the template and we can copy it and host it on the website. So basically, It reduces the work of a developer to build a website from the scratch, and all files will be in a GitHub account. So we just have to Click on the fork button in order to copy it to the web GitHub account, and after copying one could easily use it, in just one click. That is why this plugin is mostly used in GitHub Web pages these days.

Jekyll 

It is a static site generator with built-in support for GitHub Pages and a simplified build process. Jekyll uses HTML files and creates a completely static website based on your choice of layouts.

GitHub Pages

GitHub Pages are public web pages for users on the internet and organizations, these pages are freely hosted on GitHub’s github.io domain or a custom domain name of your choice. GitHub Pages are powered by Jekyll.

Installing Jekyll Plugin in GitHub Pages

Step 1: We should have installed ruby https://rubyinstaller.org/downloads/.

Step 2: After downloading the ruby installer, you should have to install it on your PC.

After Installation, you will Pop up an interface like this,

After that, we will get three options to install we should Install all 3 by clicking 1,2,3 from the keyboard.

After Installing all 3 you should close all applications and open the CMD or Windows Terminal. After that you should have to check by typing ruby-v for ruby’s version and gem -v for the gems version, you can find the version of both of them. If anything is missing or showing an error, then you should have to reinstall the ruby from this scratch.

Installing Jekyll and Bundler

First, you have to install Jekyll in the CMD window Or Windows PowerShell. After Checking the versions of Ruby and gem, you should have to enter gem install Jekyll, and press enter.

After Installing Jekyll you should also Install Bundler by typing gem install bundler to check the version use bundler -v.

Download and Install GitBash on Pc  

We can Download and install GIT from here: https://git-scm.com/downloads.

Pick the Device model Is it 64-bit or 32-bit mine is 64 I will go with it.

Creating New Repository

Create a new repository called Jekyll on your GitHub.

To host your site on GitHub. You must set the impossible tree as PUBLIC. After Creating the Repository you can pick your template and you can fork it to your repository: http://jekyllthemes.org/.

There will be a fork button on the right of the chirpy repository you should click on the form button and all the data or files present in the repository will be cloned to our repository

Cloning New Repo to PC

Open up your CMD and navigate to the root folder where you want to clone the repo to. after opening the CMD type git clone-link.

Installing any Text Editor and Changing Configuration of File

Now, you should have to Install VS Code or any text editor and change the configuration of the theme in the _config.yml file. You should have to change some details like timezone, title, tagline, URL, avatar.

• Time zone: Where you are located. (ex: India/Delhi)
• Title: Website’s Title. (ex. Chiry_GFG)
• Tagline: Tagline for a brand. (ex. for the sake of Geek For Geeks Article)
• URL: This is your GitHub URL (ex. https://github-jakyll.github.io)

As seen, data of the theme’s configuration is changed. Now Commit all these changes to GitHub also. That’s all now. The website is ready to host locally.

Hosting Website Locally 

Now save the file in the VS code and now open the command prompt or Windows Power Shell and type this command 

bundle

This will install some extra dependencies in our system. After this, you have to enter another command

bundle exec jekyll s

This everything command should be run inside the local GitHub repository on the PC.

Now we can See the Website Below,

Now the website will Host automatically on our PC. And now after committing the commands to GitHub, then we can get the data and files are committed to GitHub, and we can keep our host the pages on google using GitHub pages.