Fork me on GitHub

How to create a Jekyll github blog

by Grant McLendon

25 Oct 2013

So you want to put up a jekyll blog on github? It's really straightforward. This tutorial assumes you have Git, Ruby, and Jekyll installed and working.

Create your site

First things, first go make a blank repo on github. Now leave it alone.

Open up your terminal, navigate to wherever you want your new site to live and run the following:

$ jekyll new sitename #makes a new site
$ cd sitename
$ git init #initiates a local git repository
$ git add . #adds all the local files to the repo
$ git commit -a -m "Initialized repo" #commits additions to new repo
$ git branch -m master gh-pages #renames repo to the gh-pages github looksfor to serve a jekyll page
$ git add remote origin https://github.com/[username]/sitename.git
$ git push origin gh-pages

Now you can check to see that your jekyll site exists and works locally by running jekyll serve and navigating to localhost:4000. And you should be able to see a bare bones un-styled page at username.github.io/sitename.

Local should look like this: local jekyll
Github should look like this
github

With Style

Default jekyll is looking in all the wrong places for it's stylesheets. This is pretty easy to change.

Edit _config.yml to look like so:

name: Your New Jekyll Site
markdown: redcarpet
pygments: true
baseurl: /sitename

Now, baseurl is a variable jekyll can see across the whole site by stating {{site.baseurl}} in a page. We need to add this variable to everywhere Jekyll is trying to link somewhere else in the site.

Jekyll uses a series of layout templates to generate its pages. These can be found in the _layouts/ directory. We need to edit default.html. Change the following lines:

        <!-- syntax highlighting CSS -->
        <link rel="stylesheet" href="/css/syntax.css">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="/css/main.css">

becomes

        <!-- syntax highlighting CSS -->
        <link rel="stylesheet" href="{{site.baseurl}}/css/syntax.css">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="{{site.baseurl}}/css/main.css">

and

            <h1 class="title"><a href="/">{{site.name}}</a></h1>
            <a class="extra" href="/">home</a>

becomes

            <h1 class="title"><a href="{{site.baseurl}}/">{{site.name}}</a></h1>
            <a class="extra" href="{{site.baseurl}}/">home</a>

Now run jekyll serve in jekyll directory and go to localhost:4000/sitename/ and you should see your jekyll site with all the pretty styles working.

Now commit your changes and push them to github.

$ git commit -a -m "made everything very pretty"
$ git push origin gh-pages

Your username.github.io/sitename should now have styles enabled and look rather pretty.

Grant's a first year MSIS student. Find Grant McLendon on Twitter, Github, and on the web.
comments powered by Disqus