How To Setup Your Blog

Why blog?

Blogging is way for you to share your ideas on topics that you are interested in. These topics do not need to be technical though in our case it is going to be.
According to Sifus (masters or teachers), the best way to learn is to teach, therefore many people write to learn and teach at the same time. Among other things, blogging will help you refine your writing skills and share your work with a larger technical audience like folks on HackerNews, dev.to and other community sites. You will learn how to effectively communicate your amazing ideas with people of all technical backgrounds. As a blogger, you are also building a track record for yourself which can land you amazing opportunities like talking at conferences and job opportunities. If you do a great job, you will build an audience you can reach out to when you need support.

Why Jekyll?

Jekyll is a blogging framework written in Ruby. It is very simple and easy to setup. You can setup a blog on the web in a less than a day. Yes, you heard me, less than a day. Furthermore, you can easily host your Jekyll blog on Github Pages with a single git push for free. Hakuna Matata(No worries), if you don't know how, I will show you. In Jekyll, you can write your blog post in a textfile or a markdown file and Jekyll will automatically generate your html pages using a markdown builder or textfile builder. This allows you to quickly make updates to your blog and easily include your code snippets, images and videos in your post. Jekyll also comes with some pre-built themes which you can use for styling and laying out your site.

How to use Jekyll?

1. Get Jekyll On Your Computer

• Go to the Jekyll website and download the version of Jekyll that corresponds to your operating system. I will explain the process for Windows OS since I use Windows.

• Go to the Git website and download Git if you do not already have it. Install Git, without changing any of the default configurations.

• Download Ruby using the Ruby installer, on the Jekyll installation page. Then, open the command prompt and run gem install jekyll bundler to install Jekyll and Bundler. Bundler is a library downloader for Ruby.

• Check if Jekyll was installed properly by running the following command in your command prompt:
  jekyll -v. You should see the following result:

• Go to a directory of your choice and type jekyll new username.github.io where username is your Github username like vladimirfomene in my case. This command will create a directory for your blog with some skeleton files and directories in it. Jekyll creates every new blog with its default theme(minima).

• Then move to the username.github.io directory and list the content. You should see the following folder and files:

The 404.html page will appear when someone navigates to a page that was not found in your blog directory. Jekyll generates a .gitignore file which has a listing of all the files and directories Git should ignore when doing version control. This file contains a directory called _site on it first line. This directory will be generated when you will run bundle exec jekyll serve in your command prompt to launch the Jekyll server so as to see your site in a browser. This directory contains the generated version (all your markdown or textfile have been converted to webpages) of the blog that will be served to your browser. The Gemfile in the directory is used by bundler to manage the libraries needed by Jekyll. The folder also contains an about.md and index.md file which are created by Jekyll for you and will be converted to html pages upon serving your blog. Index.md will become index.html(homepage), about.md will become about.html and will represent your about page. The _config.yml file contains configuration for your blog. Like the title of the blog. The url, markdown parser, email and the theme used by your blog. Below is a section of the config.yml of this blog:

title: Code Tiles
email: vladimirfomene@gmail.com
description: >- # this means to ignore newlines until "baseurl:"
  Vladimir Fomene's learnings, repository of ideas, teachings and talks.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: vladimirfomene
github_username:  vladimirfomene

# Build settings
markdown: kramdown
theme: minima
plugins:
  - jekyll-feed

After running bundle exec jekyll serve, you should see the following:

This indicates that your Jekyll server is running and serving your blog at 127.0.0.1:4000. You can now type 127.0.0.1:4000 in a browser to visit your blog. You should see the following:

Writing Your First Post

In your blog directory, create a folder named _posts. All your posts will live in this directory and they should follow the following pattern: YYYY-MM-DD-name-of-post.markdown, where y is for year, M for month and D for day. A typical post should look like the following:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2015-11-17 16:16:01 -0600
categories: jekyll update
---

You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `bundle exec jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

The section at the top of the post, in between the dotted lines gives Jekyll relevant information about the page which will be used during page rendering. In our case, the layout to use, the title of the page, the date and the categories under which the post falls. You can list all your posts in any page using the following syntax:

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

Host on Github Pages

To publish your blog on Github pages, you need to initialize your blog directory as a local Git repository by running git init. Then, stage your directory content with git add . and commit with git commit -m "commit message". Then go to your Github profile and create a repository called username.github.io where username represents your Githubusername.

Then, connect your local repository to your remote repository by entering the following command in the command prompt: git remote add origin remote-repository-name.git. Push your local repository content to your remote repository by running the following commmand: git push -u origin master. You can now access your blog online by visiting username.github.io.

That's it for now. Click to learn more about Jekyll.

Contacts:

Follow me on Twitter

Fork me on Github

Email Me: vladimirfomene@gmail.com