How to create a free blog on GitHub with Jekyll.

Just in case you haven’t heard about GitHub, which i doubt, GitHub is a global company that provides hosting for software development version control using Git. Git is a distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. Its goals include speed, data integrity, and support for distributed, non-linear workflows.

What is Jekyll

Jekyll is a simple, blog-aware, static site generator for personal, project, or organization sites. With Jekyll, you don’t need any databases, no heavy downloads and it has a comment moderation ability. All you need do is just write a markdown, liquid, HTML and CSS — Then, a static site comes out ready for deployment. Permalinks, categories, pages, posts, custom layouts are all optimized.

Now, Lets begin…

1. Create a GitHub account, but if you already have an account, login to GitHub.

Github and Jekyll. Source - webhostwhat

2. Create a new repository

3. Fill in the informations and click on create. You need to use the format YOUR_USERNAME.github.io to fill in the repository name for it to work. Then click on create at the bottom of the page.

Set up jekyll locally

1. First, you will need to install Ruby. If you don’t have it yet, follow this tutorial.

2. You will also need Bundler so if you don’t have it installed yet, run gem install bundler.

3. Now, let’s install Jekyll. We’re going to use a Gem named gitHub-pages which comes with Jekyll and all the required tools. Let’s install this gem with gem install github-pages.

Now that Jekyll is installed, you can create your new blog with the following command:

After installing, it will generates a folder with the following structure:

File structure of a jekyll project

In this case, the name of my project is bontus. Next we’re going to initialize Git in your directory, so move inside of it with cd bontus.

Run the following commands to start versioning your static website with Git.

Next we’ll create a Gemfile. Why? Well, if you work on your website/blog from other computers, you will need to re-install Jekyll multiple times. The easiest way to do this is simply adding a Gemfile to the project that will contain the dependencies (i.e. github-pages).

Create a file named bontus/Gemfile and put the following inside:

source 'https://rubygems.org' 
gem 'github-pages'

Then run bundle install. Let’s commit the new files (Gemfile and the newly generated Gemfile.lock).

Before we push our new blog to GitHub, let’s try it in local and write an article.

Test run Jekyll locally

It’s pretty easy to run Jekyll in local, just run the following command from your website/blog folder.

bundle exec jekyll serve

Sample project

Congratulations, you now have Jekyll up and running… in local!

Taking it live

We did before so it shouldn’t be too hard. Just run the two following commands and everything should be pushed to Github correctly. Don’t forget to replace YOUR_USERNAME with your actual Github username.

Our blog is now live at YOUR_USERNAME.github.io

Writing our first post

Alright, our static website is ready! Now we just need to add content. There’s already an article but let’s remove it and create a real one. Posts have to be created in the folder _posts/ and need to be formatted as YEAR-MONTH-DAY-title.md.

Let’s create one now, I will call mine 2020-11-13-my-first-post.md.

Next we need to define the meta-data of our post and add a bit of content:

Well that’s it, you’re all set to write some awesome articles for your website or blog!

9. Pushing our article

We got a new article and I’d like everyone to be able to read it. To do this, we need to use Git and push it to the GitHub repository just like we did previously.

git add .
git commit -m 'My First Post'
git push origin master

And we’re done.

Since our blog doesn’t have a database and we still need people to comment on our posts, The solution is disqus!