How to make a blog using Hyde (Jekyll) and host it on Github Pages

This blog was originally published at https://jashmehta3300.github.io/making-your-own-blog

After reading a lot of elusive and poorly documented docs, I finally figured out how to set up the Hyde theme and modify it to suite my needs. This blog site is made using the same theme. I hope this post helps you in setting up your own blog within minutes.

Hyde theme

Before we start, I just want to share a couple of blogs I love reading which make use of the same theme. It is very flexible and easily customizable.

• Anish Athalye’s blog
• Rachel Thomas’s blog

We will use Jekyll. Jekyll is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From the project’s readme:

Jekyll is a simple, blog aware, static site generator. It takes a template directory […] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub.

Without wasting more time, let’s get started!

Step 1 — Install Ruby and the Ruby DevKit

Ruby is the programming language that Jekyll is written in. You’ll need to install Ruby and the corresponding DevKit.

Ruby is pre-installed on Mac and most Linux distributions by default. However, the pre-installed version is a few versions behind so we’ll look into the other ways to install Ruby.
Windows users have a bit more work to do.

• To install the latest version of Ruby on linux, click here
• To install the latest version of Ruby on Mac, click here

Now, for windows, follow this procedure.

Since, using Jekyll on Windows is not officially supported by the Jekyll team, the procedure is a somewhat abstruse but I have tried by best to expound it.

First, click here and download the installer for Ruby v2.6.6–1 that matches your system’s architecture (x86 / x64).

You can download it anywhere on your computer.Due to memory issues in my C drive, I have downloaded it in the D drive.

Execute the installer and go through the steps of the installation. When you get to the screen below, make sure to check the “Add Ruby executables to your PATH” box.

Click Install and Ruby will be installed within seconds.

After the installation is done, you will see this in you command prompt. Select option 3 and hit enter.

Once the downloading is done, it will again ask you to select an option. This time just hit enter without giving an input.

Note: You need to restart your terminal before trying the following steps.

Step 2 — Install Jekyll

Jekyll itself comes in the form of a Ruby Gem, which is an easy-to-install software package. To install Jekyll and all its default dependencies, launch your favorite command line tool and enter the following command.

gem install jekyll

Hit enter, watch, enjoy. This might take a while due to the number of dependencies.

The latest version of Jekyll at the time of writing is v4.1.1, which is compatible with Windows. Most of the previous versions are, too. Do not attempt to install Jekyll v1.4.3, though, which is known to be incompatible with Windows.

Step 3 — Clone the Hyde repository

mkdir my-blog
cd my-blog
git clone https://github.com/poole/hyde.git
cd hyde

Step 4 — Making some changes in the cloned files

Before running, we will make a few changes in your code to avoid errors.

• The permalinks are deprecated in version 3 — we can remove a line relative_permalinks: true from _config.yml and add this in the end of the file:

plugins:
  - jekyll-paginate
  - jekyll-gist
  - redcarpet

• We will now edit the line markdown: redcarpet in _config.yml to markdown: kramdown

After making sure that you are inside the hyde directory, run:

gem install jekyll-paginate jekyll-gist redcarpet jekyll serve

• Now, change the personal details in the _config.yml file. Specially change the url: https://<your-username>.github.io and baseurl: /
• Go to the head.html file inside the _includes folder. Remove lines 17 to 25 (ie. the 4 link tags under CSS and 2 link tags under Icons) and instead, copy paste this:

<!-- CSS -->
  <link rel="stylesheet" href="/public/css/poole.css">
  <link rel="stylesheet" href="/public/css/syntax.css">
  <link rel="stylesheet" href="/public/css/hyde.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
  <!-- Icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/public/favicon.ico">

Open http://localhost:4000 to see your blog site.

Step 5 — Hosting the blog on gh-pages for free

We will now host your blog on the internet with the help of Github.

• Make a repository on Github with the name: <your-username>.github.io
• Push your code on this repository using the following commands:

git add .
git commit -m "initial commit"
git remote add origin https://github.com/<your-username>/<your-username>.github.io.git
git push -u origin master

• Go to Settings on Github and you’ll see that your website is hosted !!!

DONE! Now you can make changes according to your requirements.

Thankyou for reading!