There are plenty of articles out there to create a blog using Jekyll. Here are the high-level steps I took to create mine. The easiest way to get a great looking blog is to use Github Jekyll themes. There are quite a few to choose from here. These themes are easy to customize later.

Please refer to why I chose jekyll post for an intro to Jekyll and why I chose it.

High-level steps

  1. Choose a Github Jekyll theme, I chose https://github.com/bogoli/-folio/
  2. Create a user account on Github if you don’t already have one
  3. Fork the repository
  4. Rename the repository to for example blog
  5. Create a new branch in your blog repository named gh-pages
  6. Remove the master branch, you will be commiting to the gh-pages branch from now on
  7. Get familiar with the theme, the directory structure and how you can customize it. Please see below.
  8. Go to your blog repository settings to find your new blog url. Please note that you have to be the main contributor to see the settings. The url will look like {username}.github.io/blog/
GitHub Pages is a static site hosting service. —Github pages

Running Jekyll locally

  1. Install Jekyll $ gem install jekyll
  2. Go to the Jekyll repository on your local machine $ cd blog/
  3. Run $ jekyll serve (Jekyll provides a variety of options)
  4. http://127.0.0.1:4000/ in browser

File structure

  • _config.yml - important file where the configuration data live
  • _site - this folder is generated, don't commit it and don't change it, because any changes will be overwritten
  • _includes - partials that can be added to your posts for example
  • _layouts - describes how your posts should look
  • _posts - a folder containing your posts in the format YEAR-MONTH-DAY-title.MARKUP

Jekyll will transform any .html, .markdown or .md files.

Front matter

Any file that contains a YAML front matter block will be processed by Jekyll as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines.

---
layout: post
title: blogging like a pro
---

A frew tricky things

  • If your css looks a bit weird in the browser, change the baseurl in the config file.
  • Add your favicon link to the header. If your favicon does not appear, refresh your browser cache.
<link rel="shortcut icon" type="image/x-icon" href="/blog/img/favicon.ico?">

Start blogging!