💻 Creating a New Website With GitHub Pages and Jekyll

I had been wanting to redo my website for a while now. I also wanted to start writing more in the coming year, so I knew I needed a way to create, edit, and publish blog posts easily. There’s no shortage of resources and platforms to get a personal blog/website up quickly, but I have never really liked the well-known blogging Content Management Systems (WordPress, Tumblr, Ghost, etc.). So I decided to try something I hadn’t used before — I wanted to learn something new. Enter GitHub Pages and Jekyll.

There’s a few options on how to get started, but the easiest starting point, in my opinion, is Jekyll Now from Barry Clark.

Getting started with Jekyll Now:

First, make sure you’re logged in to your GitHub account, then fork the Jekyll Now repository. When it’s finished, rename your new repo in the Settings tab to username.github.io (where “username” is your GitHub username). Now type username.github.io into your browser and you’ll see the default Jekyll Now template. Easy peasy.


fistbump.gif


From here, you can edit files via GitHub if you’re into that. Or, if you’re like me, you can edit your files locally in your editor of choice (I prefer Atom).

For local development:

To edit the files locally, create a folder on your desktop (or wherever you want your local files to be stored). Then, open your terminal and navigate to that folder you just created. Next, install the ‘github-pages’ gem:

$ sudo gem install github-pages

Now, just clone your repo:

$ git clone https://github.com/username/username.github.io.git

Once it’s finished cloning, serve up a local version of your site and watch for changes:

$ jekyll serve

Now you should be able to view a local version of your site here: http://127.0.0.1:4000/. You can now edit your site locally and see the changes on your local server. Whenever you’re ready to commit your changes, just follow normal Git protocol. Add your changes, commit them, and then push them up to your repository via:

$ git push -u origin master

You should then see your changes when you refresh your username.github.io page in the browser.

Pointing an existing domain to your GitHub Pages site:

Make sure you add a custom domain name to your GitHub Pages site. You’ll also want to add your domain to the CNAME file in the root directory of your site. For example, this is the only line of code in my CNAME file:

www.jacobrokaw.com

Save that file and commit your changes/push up to your master.

This next part was a little tricky for me as most posts about this are specific to domain providers. And, unfortunately, this post will be no different as my domain is parked at Hover.com — so the rest of these steps will be specific to Hover.

Log in to your Hover account. Click on the domain you want to be attached to your new GitHub Pages site. In the “Domain Details” tab, make sure the Nameservers are set to Hover’s nameservers:

ns1.hover.com | ns2.hover.com

Now, go to the “DNS” tab. You’ll want to remove any old records that may have been pointing to a different provider. Next, add two “A” record types with the Hostname “@” and IP Addresses of “192.30.252.153” and “192.30.252.154” which points to GitHub.

Then, you’ll want to add two “CNAME” records, one with a Hostname of “www” and one with a Hostname of “*” — the Target Host for both should be “username.github.io” to point to your repository.

And that should do it! Keep in mind, when moving an existing domain name to a different host, it can take a few hours (even upwards of a full day) to see your domain pointing to your new site.

Helpful links:

Smashing Magazine: Build A Blog With Jekyll And GitHub Pages
Michael Deeb: Using a Custom Domain with GitHub Pages
GitHub Help: Troubleshooting custom domains

Written on December 23, 2016