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
, andmake -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.
-
Follow instruction here to install Jekyll
-
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). -
Under your repository name, click Settings. In the left sidebar, click Pages.
-
Click your site’s URL to see your published page.
-
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. -
You can develop and test locally, run
bundle exec jekyll serve
and navigate tohttp://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:
- 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
- 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"
- 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)"