Easier Web Hosting on Github

How to Use Whisper as a Jekyll Alternative

Last week I introduced you to Whisper, a tool that lets you power your website with markdown files stored in a Dropbox folder. Website management doesn’t get much easier than that. However, there is one reason why you might want to add a tiny bit of complexity back into this dead-simple approach. That reason is free hosting on Github. Today’s post is a tutorial explaining how to use Whisper to power your free Github website. Should we get started?

How does Whisper work?

Normally, Whisper works like this:

  1. Whisper notices the change and updated your wesbite accordingly
  1. From your computer you trigger a Dropbox sync telling Whisper to rebuild your site locally
  2. You push the updated files to Github

What you need to understand about free Github hosting

One of the great things about Github is that it allows you to host static HTML files, essentially offering a free way to host your website. Github won’t give you any databases or server-side capabilities. The reason the hosting is free is because it just serves up basic, static files. This means you are limited to HTML, javascript, images, and CSS files. It is just the basics.

$ gem install jekyll bundler
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ bundle exec jekyll serve
# => Now browse to http://localhost:4000

Github Basics

If you have used Github before, you can skip this part. For everybody else, here is the absolute minimum you need to know. Github is a collection of public projects that anyone can download and use. The projects are contained in repositories (repos). You can download or “clone” a repo to your computer where you can view, edit, and run the code.

  1. Download the Github app

Creating Your Website

The first thing we need to do is download Whisper. Go to https://github.com/adrian3/whisper. Notice that there is a green button that says “Clone or download” in the upper right. Click this button to download the Whisper repo.

$siteTitle = "Whisper";
$siteUrl = "https://adrian3.github.io/whisper/";

Publishing Your Website

Once you have your local website just the way you want it you are ready to publish it to Github. Here’s how to do it. First, open the config.php file again and find this line:

$siteUrl = "http://localhost:8888";
// $siteUrl = "http://localhost:8888";
$siteUrl = "https://username.github.io/projectname/";

Author of User Zero: Inside the Tool that is Reshaping Dystopia