I thought it fitting to kick-off by walking through the steps of setting this up. Below you can find a step by step guide on how to setup a similar blog page for yourself.

Requirements

  • Ruby version 2.4.0 or higher, including all development headers (check your Ruby version using ruby -v)
  • RubyGems (check your Gems version using gem -v)
  • GCC and Make (check if installed using gcc -v,g++ -v, and make -v)
  • GitHub account

Guide

The following instructions assume a macOS workstation. You can find detailed instructions for your operating system by navigating to the relevant links seen below.

  1. Follow instruction here to install Jekyll

  2. Fork https://github.com/mmistakes/mm-github-pages-starter (You can use this link), name it as follows:
    <github-username>.github.io (more info here).

  3. Under your repository name, click Settings. In the left sidebar, click Pages.

  4. Click your site’s URL to see your published page.

  5. Clone the repo and make changes locally (most of the basic configuration is in _config.yml), each time you push to master your page will update.

  6. You can develop and test locally, run bundle exec jekyll serve and navigate to http://127.0.0.1:4000 on your browser.

Bonus Steps

To add some flavour to your new blog page, the minimial mistakes theme allows for easy customisation. I have done the following:

  1. Change your theme, I’ve gone for a dark theme which is easy on the eyes. Add the following line in your _config.yml:
    minimal_mistakes_skin: dark
    
  2. Add a profile picture or avatar. First move the avatar file into the repository folder (you’ll have to commit it to git). For best results make the image square. Under author in _config.yml, add a path to your image:
    author:
      name   : "Bart Parka"
      avatar : "/assets/profile-square.jpg"
    
  3. To include an overlay image at the top of your post, add the following to the top of your post markdown file:
    header:
      overlay_image: /assets/welcome-post.jpg
      overlay_filter: 0.3 # This is for opacity
      caption: "Photo credit: [**Stefan Miron**](https://www.flickr.com/photos/barrycandlemaker)"
    

Jekyll
Minimal Mistakes
GitHub Pages