Posted by : at

Category : github   jekyll

Lets create a jekyll blog today from scratch. Why Jekyll ? If you want to build small page or blog and want to rely on a static site generator instead of using a fully fledged CMS, this article is for you.

The Advantages of Going Static ( using Jekyll )

  • Simplicity - Jekyll strips everything down to the bare minimum, eliminating a lot of complexity:
  • No database - Unlike WordPress and other content management systems (CMS), Jekyll doesn’t have a database. All posts and pages are converted to static HTML prior to publication. This is great for loading speed because no database calls are made when a page is loaded.
  • No CMS - Simply write all of your content in Markdown, and Jekyll will run it through templates to generate your static website. GitHub can serve as a CMS if needed because you can edit content on it.
  • Fast - Jekyll is fast because, being stripped down and without a database, you’re just serving up static pages. Minimal. Your Jekyll website will include absolutely no functionality or features that you aren’t using.
  • Design control - Spend less time wrestling with complex templates written by other people, and more time creating your own theme or customizing an uncomplicated base theme.
  • Security - The vast majority of vulnerabilities that affect platforms like WordPress don’t exist because Jekyll has no CMS, database or PHP. So, you don’t have to spend as much time installing security updates.
  • Convenient hosting - Convenient if you already use GitHub, that is. GitHub Pages will build and host your Jekyll website at no charge, while simultaneously handling version control.

Requirements :

  • Visual Studio Code
  • Ubuntu 16.04 LTS
Install Ruby and Jekyll

To work with Jekyll, you need Ruby installed on your computer. I will be using Ubuntu for this tutorial. If you are using any other os , you can get the Ruby installation link here.

For others who are using Debian or Ubuntu we will use the apt package manager. You can use it like this :

$ sudo apt-get install ruby-full

After installation, check the ruby version

$ ruby -v

should show something like this:

ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]

Next, install Jekyll and also the bundler you need :

$ sudo gem install bundler jekyll

Now lets create a new blog :

$ sudo jekyll new jekyll-blog
$ cd jekyll-blog

This will generate a new blog skeleton using the default minima theme. You can change the theme if you want. To check if it works, lets build and execute our blog :

$ bundle exec jekyll serve

Now you can browse the blog at http://localhost:4000

Jekyll Blog

Lets get rid of placeholder texts and default text of the jekyll template.

Lets modify our _config.yml file to make this template ours.

title: Sujay Kundu
email: [email protected]
description: >- # this means to ignore newlines until "baseurl:"
Sujay Kundu is a full stack web developer and ui/ux designer from Bangalore, India.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: sujaykundu777
github_username: sujaykundu777

Now restart the server

$ bundle exec jekyll serve

Adding a new post to our blog

Lets now create our first post, inside the _posts folder create a new markdown file in the following pattern : YEAR-MONTH-DAY-title.md otherwise it will not be generated to your page.

2018–06–28-first-post.md

The content uses liquid templating, so you can change the frontmatter like this to tell the blog on what type of document it is and what templates it should use.

---
layout: post
title: "Hello World"
date: 2018-06-28 15:50:24 +0530
categories: jekyll
---

This is my first post

Adding a new page to the blog

Lets create a new file, eg. Projects.md within the root directory of the page. The important part is to put a special header to the file. This header is called a Front Matter.

Projects.md

---
layout: page
title: Projects
permalink: /projects/
---

This is where you can share about your projects

Layout: Jekyll Themes have layouts which define how a certain page looks like. The default theme which we are using here has three of them: home, page and blog. While we won’t need home (it’s used for the index page) we want to use the other two for pages and blog entries.

Title: You guessed it, whatever you put in here will be displayed as the title of that page. (Warning: This variable could be named different from template to template, since it is a custom variable)

Permalink: This defines how the url to that page looks like.

Should look something like this :

Jekyll Blog Pages

Hosting the blog using Github Pages

Hosting Jekyll using Github Pages)

  1. Create a repo “yourusername.github.io” in Github

  2. Build the local jekyll site using

jekyll build

This will build the static files for your blog, which you can use to host in githun pages, just upload everything in your _site folder to your github repo.

  1. Push to Github Repo
git add .
git commit -m "my first blog"
git push origin master 
  1. Go to settings, and change the setting to use master branch for your project and add custom domain for eg. (https://sujaykundu.com)

Hosting Jekyll using Github Pages)

This will add a CNAME file

Hosting Jekyll using Github Pages)

  1. Now to browse the blog using your custom domain, you might need to manage DNS settings of your domain.

In my case i have bought the domain using Godaddy and got free ssl certificate using Cloudflare.

Connecting with Cloudflare)

So you might need to create two A records in your DNS that points to github repo ip address. For further help follow this link. It might take some time to reflect the DNS changes, so check later after 30 mins, by this time it should work.

  1. Done ! You can visit your website, once everything is set!

I hope this article will help you.

Thanks :)

Happy Blogging !