Ragu Pappu Technical thoughts, mostly

How I Set Up My Website Using GitHub Pages and Jekyll

22 Apr 2015      jekyll github pages website lanyon

I had been thinking of spiffying up my plain-looking WordPress-hosted blog for some time now and a few days back I got to do just that. Actually I did more than that: I ended up building a brand new website! While searching online for the how-tos I discovered GitHub Pages and Jekyll. GitHub Pages allows you to host your website for free and Jekyll lets you build static websites. It costs me ~$50 per year to host my blog on Wordpress so the free hosting on GitHub sounded like a great deal. On top of it the Jekyll website generator would allow the look and feel of the blog — the whole design — to be completely under my control. And so I took on the project. The project required git which was already installed on my desktop PC.

The Lanyon Theme

There are several website themes for building a Jekyll website. I wanted a minimalistic look and started with the Poole theme which provides a basic template for a website. Part way through I switched to the Lanyon theme because it emphasizes content by hiding the navigation in a side drawer. It is minimalist not only in looks but also in features, providing only a template: it does not feature, for example, "extras" such as an Archive page, or a Comments facility, or social media buttons, and so on. But that is easily addressed since adding extras is straightforward, and the web has many resources that show you how to do just that.

Website Build Steps

I built my website using these main steps:

  • Started by setting up a repository using instructions on GitHub Pages
  • Downloaded theme files from the Lanyon repository on GitHub by clicking the Download Zip button on the right-hand side. Extracted files from the downloaded zip file into the username.github.io directory created in the first step. Note: username represents the username of your GitHub account.
  • Changed directory to username.github.io and in a command terminal ran these commands: 
    $ cd username.github.io
username.github.io$ jekyll build
username.github.io$ jekyll serve

Next, I opened up a browser and went to http://localhost:4000 to look at my website. That was it! My website was hosted locally on my computer and ready to be tweaked.

I then made design changes — added pages, changed fonts, tweaked colors, etc — and when I was satisfied, 'pushed' all of the changes on to my repository on GitHub. Once the changes were in GitHub my official website was accessible on the Internet.

Website Design Changes

Over the last few days I have made a number of changes to the Lanyon theme which I list below, and where available, provide the how-to links. The code for this site is available on my GitHub repository.

  • Added About, and Archive pages using Joshua Lande's Poole post
  • Added Disqus (to support comments) and Google Analytics, again using Joshua Lande's Poole post
  • Added a Tags page using Michael Lanyon's post about tags.
  • Changed the landing page to show excerpts of posts instead of full posts
  • Added icon links for Twitter, GitHub, etc. to the sidebar. Used font-awesome CSS file from Michael Lanyon's GitHub repo.
  • Added tags below title of post
  • Added social media 'Share' links (Twitter, Facebook, Google+) to the bottom of each post. Kanishk Kunal explains how to add Share buttons to a Jekyll blog in this post.
  • Converted CSS stylesheets to Sass stylesheets using file structures similar to those in Michael Lanyon's GitHub repo.
  • Designed my favicon (the tiny icon that shows on the tab of your browser) at Favicon and App Icon Generator and replaced the original Lanyon theme favicon with the new one.
  • The Lanyon theme is a fixed-width two-column design. Changed widths for @media CSS statements in main.scss to percentage values (by replacing em values) to convert the website to a liquid layout. This article by Max Design explains how to do liquid layouts.

Tools are available to migrate posts from Wordpress to other sites but since I had only a few blog posts I simply copied them over from Wordpress and saved them into the _posts folder as .md files. I embedded YAML front-matter in each file and changed the name of the files to be in the format required by Jekyll (YEAR-MONTH-DAY-title.md).

After pushing the initial set of website changes on to my GitHub repository, ragupappu.github.io, I linked my personal domain ragupappu.com to it. My domain is hosted by Namecheap and I used David Ensinger's instructions here to link the two.

Quick Links

Other Posts

© 2015. All rights reserved.