Build your own GitHub website using Jekyll and Minimal-mistakes

2 minute read

This site is build using Jekill static blog-aware static website. No programing experience is required

Github pages are a great choice for free hosting. If you create a github repository named username.github.io, it will automatically convert the contents to a webpage at address username.github.io. However to make this work, it takes more than just uploading all the related local files to the repository.

Install prerequisites:

Install jekil and bundle in order to test the website localy.

gem install bundle
gem install jekyll

Copy minmal mistakes:

# create a new folder for this online version website
mkdir GitPage
cd GitPage
# initiate git repository
git init
# add minimal-mistakes repository to your remote
git remote add minimal "https://github.com/mmistakes/minimal-mistakes"
# clone the repository to your folder
git pull minimal master

Configure GitHub website

We need now to edit _config.yml. For more information about what congiuration items does you can read details from Jekyll Configuration page You can take as example my _config.yml file from gavagiuc.gitub.io

You can safely delete folders /docs and /test.

Website pages are specified in file _data/navigation.yml for ex:

    main:
      - title: "About"
        url: /About/
      - title: "Blog"
        url: /Blog/

Each - corresponds to one page tab:

title is the page title url is the link to the file that contains contents of the page

Then you make a new directory /_pages/, create inside markdown files blog.md and about.md containing:

blog.md

---
title:  "Blog"
layout: archive
permalink: /Blog/
author_profile: true
comments: true
---

And include the folowing code:

blogs

about.md

---
layout: single
title: "About"
permalink: /About/
author_profile: true
---
Awsome description about me.

Posts should be kept in _posts folder and named after YEAR-MONTH-DAY-filename.md so that minimal-mistakes can correctly identify them. An example post markdown file: 2018-04-27-my-first-post.markdown

---
layout: single
title:  "My GitHub Blog first post"
date:   2018-04-27 16:25:13 +0300
categories: aws ec2 report python
comments: true
---
My first post

where layout:single specifies this is a single page post; title would appear on top of page; date keeps time of “latest update”, and could be used to sort your post. There are also a bunch of other parameters you can specify: other parameters. More information on working with posts ca be found on mmistakes posts documentation Also Jekyl Editor extension for Chrome is verry usefull

Test GitHub website localy

Type bundle exec jekyll serve --watch inside the GitPage directory, and then a template website will be locally hosted at localhost:4000/. test

Upload the new site to GitHub

Configure git:

# initial git configuration
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

# add your github repository to remote
git remote add origin "ADDRESS.OF.YOUR.GITHUB.REPOSITORY"

# track all files in GitPage folder and stage a commit
git add .
git commit -a -m "first commit"

# push the folder online
git push origin master

If every step goes well, your personal website should be alive at “username.github.io”!

This tutorial was inspirated from Li Zeng’s post

Leave a Comment