How to start your blog using Jekyll

Jekyll is a static site generator that allows you to create a flexible and lightweight blog or website.

Jekyll is a static site generator. Roughly speaking, it simply helps to assemble a set of HTML files from templates and texts that can be placed on any web server.

Unlike blogging engines or CMSs like Wordpress or Ghost, the end result of Jekyll is not executable programs, but static HTML files. Therefore, you don't need PHP, Node, databases and powerful hosting to host your site. Serving static files creates a minimum load on the server, so most often the cheapest hosting is sufficient.

The Jekyll site is free to host on Github Pages, which is what we'll do in this tutorial.

Overview

Let's take a quick look at how Jekyll works and how to publish a site:

• You create templates for your site: Like you have templates in any major blogging CMS, you create templates for posts, categories, headers, footers, etc.
• You write posts in Markdown format (other formats are available as well).
• Jekyll generates final HTML page based on templates and Markdown files.
• You publish HTML on a web server and the site becomes available on the Internet.

GitHub supports Jekyll and you can have a full working blog hosted on Github for free.

How to install Jekyll on a Local Machine

You can install Jekyll on your local directly or can go one step further and use Docker. Using Docker makes the process much easier and faster if you are familiar with Docker.

Installing and running Jekyll directly

Jekyll is a command line program written in the Ruby language. You do not need to know this language to work with Jekyll, but you need to have Ruby installed on your machine.

Depending on your operating system, you may already have Ruby installed.

On Windows, you can use RubyInstaller . You need to work with Jekyll through the command line. Follow the documentation to install Ruby and Jekyll on Windows .

In macOS and Linux OS, Ruby is included. You just need to install Bundler.

Lets install Bundler. This is a package manager, we will use bundler to install Jekyll and other necessary packages.

gem install bundler 

Now install Jekyll:

gem install jekyll 

Lets create our first blog in jekyll

jekyll new myblog
cd myblog
bundle exec jekyll serve

Open http://localhost:4000 in your browser

Installing and running Jekyll via Docker

If you are not familiar with Docker, then watch this tutorial on Youtube.

The official Docker image of Jekyll can be found jekyll / jekyll.

The easiest way to get started is to use our pre-built theme package based on Bootstrap 4 .

# clone repo 
git clone https://github.com/ssiddique-info/jekyll_docker_blog.git

# cd and install jekyll
cd jekyll_docker_blog
sudo gem install jekyll

make serve

Open http://localhost:4000 in your browser

File structure

• _posts: This folder contains all the posts in Markdown format.
• _layouts: This folder contains page templates
• _includes: This folder contains repeating blocks that can be used in templates
• index.html: This is the front page of your blog(also known as main page)

Configuration

_config.yml

Note: url is the address of your root site, and baseurl is the path to your blog.

Theme customization

All the customization can be done through _includes:

• _includes - blocks used in multiple places
  • head.html- the element where styles are connected, meta tags are indicated, and so on
  • header.html - site header
  • footer.html - site footer
  • post_footer.html - shown under the post on the post page (included in the configuration)
  • share_buttons.html- social sharing buttons networks under the post on the post page (enabled and configured in the configuration)
  • social_links.html- links to social. networks, shown in the site header (enabled and configured in the configuration)
• _layouts - basic site templates
  • default.html - main template, used on the main page
  • post.html - post template, used on the post page
• css - styles
  • style.css - the main file of site styles
  • likely.css- styles for social sharing buttons networks
• js - scripts
  • likely.js- script for social sharing buttons networks
• images - Images

Creating your first post

_post folder is used to keep all the posts. In this tutorial, we will use Markdown, but you can use other formats to create post. File name Example: 2021-05-01-features.md. As you can see, the publication date is indicated in the file name. The date is followed by the name used for the URL. This post will be available at site/features

As you can see this file starts with Front Matter

---
layout: post
title: "Features"
cover_url: "/images/tree.jpg"
---

we are using post layout for this new post, that you can locate in _layout.post.html

You can update _layout/post.html to update anything for your current post.

<h1>{{ page.title }}</h1>

Publishing your blog to public

Github supports Jekyll. This means that you can put the entire folder with your Jekyll project in the repository, and Github will generate HTML pages for you.

You can follow the steps to publish your pages on Github.

• Register at https://github.com/ if you haven't already.
• Create a new repository named username.github.io where username is your Github nickname.
• Initialize the repository in the Jekyll directory: git init
• Add remote: git remote add origin git@github.com:YOUR_USERNAME/YOUR_REPO.git
• Make a commit and submit it to github:

 git add --all
 git commit -m "Initial commit"
 git push -u origin master

In a few moments, the page is available to you and can be accessed at address https://YOUR_USERNAME.github.io