I make websites. I have been a web designer / developer for a number of years and for nearly all of that time I have paid for and maintained a personal website. For years I used it as a marketing and portfolio site to attract freelance work. Lately, I’ve been using it as a blog to [rarely] publish meaningless articles such as this one. However, more than anything it has become a playground for me. A place to keep and deploy prototype work. Somewhere to experiment and learn new technologies. A place to push code to a live web server. All this time I have been renewing annual hosting subscriptions at Godaddy to the tune of $70 per year to mess around with WordPress, a platform built on a development stack I don’t necessarily care to focus on.

Until…

I stumbled across the well designed GitHub Page of fellow UX Designer, Hannah Deering. GitHub pages weren’t anything new to me, I come across them all the time in my day-to-day work. However, this time it struck me different. Hannah is using this as her personal website; a portfolio, a blog, and I would assume a playground. Hey, these are all the things I use my site for. Ding ding ding. I’m guessing it was the past due notices of my domain name & web hosting plan expiring this month that triggered the thought of replacing my Godaddy site with a GitHub page. I mean really, why wouldn’t I use GitHub to host my personal site? Do I really care if people have access to my code? Nope. The more I thought about it, the more it made perfect sense.

It was super easy…

Had I known how simple this was, I would have done this years ago. Literally, all you need to do is create a repository on GitHub with your [username].github.io and that’s it! Granted, your repo does have to have a default document like index.html to become an accessible website at that URL.

Steps to create a GitHub Page
  1. Create a GitHub repository with [username].github.io
  2. Clone the repository on your local machine
  3. Create an index.html file in your project folder
  4. Commit and push to your master branch
  5. Type http://[username].github.io in your web address bar and see the magic

Simple, eh?

After setting up my GitHub page, I spent a couple days getting my project structure setup and designing a simple blog-style website. I played around with AngularJS and pushing content via JSON to my seemingly static website. I took it a step further by using Firebase as the back-end database and created a Zapier zap to publish content from an Evernote notebook to my GitHub page. That was awesome! However, the real fun began when I started to explore the power of Jekyll. I love learning new things, but by no means am I a magpie devloper. In truth, I actually try to resist jumping on the latest bandwagon to some degree. That said, as a front-end developer, GitHub pages + Jekyll is exactly what I have been looking for. I always wanted an excuse to become more familiar using markdown, and static site generation is the perfect opportunity to do so.

Obviously, this platform is great for blogging and publishing a relatively simple website, but it is definitely not for everyone. You’ll need to be familiar with Git, npm, Sass, as well as be comfortable using the command line. That said, if you’ve used terminal to install any ruby gems, node_modules or bower plug-ins, then you got this! Here are some of the steps I followed to get up and running with Jekyll. All the documentation can be found here.

Using Jekyll with Pages
  1. Make sure you’re running Ruby version 2.0.0 or higher
  2. Install the Bundler package manager using gem install bundler
  3. Create a Gemfile in your project folder and add the following lines:
    • source 'https://rubygems.org'
    • gem 'github-pages'
  4. Use the command jekyll new [your-site-name]
  5. Type cd [your-site-name]
  6. Type git init to initialize a Git repository (you don’t need to do this if you’re already using a cloned Git repo)
  7. Use the command bundle exec jekyll serve
  8. Navigate to http://localhost:4000 to see your new site

There are likely a handful of dependencies not mentioned in this article, but assuming you’re already building sites or apps with modern workflows then this should be a breeze and you should be up and running in about 30 min. If after you’ve read this article and have built your own GitHub Page and/or are using Jekyll be sure to shoot me a tweet @eddieebeling with a link to your site. I’d love to check it out.