Build websites using Jekyll and Github Pages.

20 Oct 2019

Today, I will guide you on how to build a website or blog using Jekyll and Github Pages for free!

We will use the following tools:

Jekyll: Jekyll is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes.
Github Pages: Github Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub and publishes a website.
A Markdown Editor: StackEdit is an online markdown editor. Or you may choose any other tool as per your preferences.

Setup Jekyll:

Choose a free Jekyll theme from https://jekyllthemes.io/free or any other theme store.
Download theme files on your local computer.
Install ruby and Jekyll.
Run jekyll serve --watch

Create a new repository on your Github account and put your theme on Github(check this out).
Go to Settings tab of your theme repository and navigate to Github Pages section.
Select master from the source drop-down menu and page will be re-loaded automatically.
Navigate to Github Pages section again and check your website URL here.
Your website is up and ready.
Additionally, you can use a custom domain to serve your site. Add your custom domain name(e.g. “ydrall.ml”) in “Custom Domain” input and press “Save” button.

Adding a new post is a very simple 4 step process:

Navigate to _posts folder and add a new file named in format yyyy-mm-dd-title-of-the-post.md, eg. 2019-10-18-build-site-using-jekyll-github-pages.
Add suitable meta-data at the top of file, e.g.

---
layout: post
title: Build websites using Jekyll and Github Pages.
---

Open StackEdit Editor and start writing your content in markdown language.
Once completed, copy content form editor to your file and push changes to Github. That’s it. Your post will be available on your site within a minute.