Did you know that you can navigate the posts by swiping left and right?

Initial setup

25 Jun 2015 . category: tech . Comments

All features of { Personal } are controlled by setting values to variables that are defined in the _config.yml file. Let’s start with the initial variables that you have to set before serving your { Personal } website for the first time.

Essential variables

# NB! Set your site's url, otherwise stuff will break :)

url: "https://panossakkos.github.io"

# If you're hosting your site at a Project repository on GitHub pages
# (https://yourusername.github.io/repository-name)
# and NOT your user repository (https://yourusername.github.io)
# then add in the baseurl here, like this: "/repository-name"
# NB! Without this *nothing* will work, because it's used in every path :)

baseurl: /personal-jekyll-theme

The url and baseurl variables are essential, because they are used everywhere where an anchor is defined!


You can define the colors that you want in your { Personal } website by setting the following variable sin the /_sass/_variables.scss file:

// Main color
$primary-color: #000;

// Anchor color
$secondary-color: #00cdff;

// Font color
$font-color: #fff;


By default { Personal } will enforce https by javascript redirection. HTTPS is important because it encrypts the data sent between the client and the server. If you are hosting on GitHub Pages then it will just work, because your website will be piggybacking GitHub’s certificate. If you are hosting your website in a server that doesn’t have a certificate and you don’t want to issue one, then you can disable this feature by setting the following variable to False:

force-https: True


lang: "en"
author: "John Smith"
title: "{ John Smith }"
description: "Blog and website of John Smith, blogging mainly for tech. Opinions expressed are mine."
keywords: "smith, jones, personal, jekyll, theme"
favicon: "/img/favicon.ico"
404-img: "/img/labtocat.png"

The values that you set, will be placed in the head section of every generated HTML page.

Google Analytics

The Google tracking code will be placed in every generated page. If you don’t want Google analytics tracking your website’s traffic, set the google-tracking-id to an empty string.

google-tracking-id: "UA-35880426-4"

Serving { Personal }

Install the required dependencies:

gem install jekyll jekyll-paginate jemoji html-proofer

Serve the jekyll website:


That’s it!

Visit and you are ready to start hacking around your { Personal } website!

Many thanks to @joariasl for the language support!


Marcus Johnson (mjohnsonengr) is a life-long learner who enjoys coding in JavaScript and TypeScript