How To Setup Your Blog
Tags: jekyllblogging
Published: 2018-05-15 19:54:03

---
title: "How To Setup Your Blog"
published: true
description: Learn how to setup your blog with Jekyll.
tags: jekyll blogging
---

## 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](https://news.ycombinator.com/), [dev.to](https://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](https://jekyllrb.com/) 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](https://pages.github.com/) 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](https://pages.github.com/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](https://git-scm.com/download/win) 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](https://jekyllrb.com/docs/windows/). 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:

![Jekyll Version](https://vladimirfomene.github.io/assets/img/jekyll-version.JPG)
* 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](https://jekyll.github.io/minima/)).

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

![Jekyll Directory Structure](https://vladimirfomene.github.io/assets/img/directory-structure.JPG)

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:

![Jekyll Server Running](https://vladimirfomene.github.io/assets/img/jekyll-serve.JPG)

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:

![Jekyll Server Running](https://vladimirfomene.github.io/assets/img/minima-site.JPG)

## 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](https://pages.github.com/)

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*.

![Jekyll Server Running](https://vladimirfomene.github.io/assets/img/github-repo.JPG)

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](https://jekyllrb.com/docs/home/). 

## Contacts:
[Follow me on Twitter](https://twitter.com/VladimirFomene)

[Fork me on Github](https://github.com/vladimirfomene)

[Email Me: vladimirfomene@gmail.com]()