Blogging on GitHub Pages with Jekyll

For my first post on the new blog I’m going to provide yet another online look-up for how to get started hosting a Jekyll blog on GitHub Pages.

The Punchline

My regular reader will know that I like to try and give the meat of each post upfront…that way readers can decide if they want to invest thier valuable time in my chosen topic…or just move along. This is a little proof of concept post. I’ve been wanting to move my blog from Wordpress to GitHub pages for a while. I didn’t mind Wordpress but posting technical content there just never really felt comfortable. I’m a big fan of git and GitHub for versioning and code distribution so the fact that they also have the capability to serve up blogs made the decision to switch kind of a no-brainer.

The Process

I’m still getting the hang of this but it’s looking like I have a first post up and running. What I did was about as simple as it gets:

  1. Followed Barry Clark’s instructions here
  2. In order to display math I needed to add MathJax to Jekyll. For this I used the following script:
<script type="text/javascript"
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

which I added to the file aaronmams.github.io/_layouts/default.html. With that script in your site’s dependencies it allows you to write math enclosed with dollar signs that will not be parsed as text.

Advantages

Backing it up a second, this particular blog (like many others on GitHub Pages) is powered by Jekyll. Jekyll is a static site generator. You can go over to Jekyll and follow some really simple instructions there to build a website on your computer that can be deployed on a local host (read: you can open the site in a browser but nobody else can navigate to it). You don’t need git or GitHub to do that.

GitHub Pages makes it really simple to deploy a site built with Jekyll. If you have a GitHub account than you are allocated space for hosting a site. This is the part I thought was super cool….If you have a site built with Jekyll (probably other shit too but I’m just going to comment on my experience) you can:

  1. go to GitHub and create a repository
  2. name that repository your GitHub username.github.io
  3. put your site (collection of .html and .md files created with Jekyll that make up your site) inside of that repository
  4. GitHub will associate those files with your domain (yourGitHubusername.github.io) and serve up your site at that location.

And, since it’s GitHub (an entity dedicated to making code sharing easy), it gets even easier than that. In order to get this minimal page up and running I did exactly 5 things:

  1. Went to Barry Clark’s GitHub page and forked his repository jekyll-now
  2. renamed that repository aaronmams.github.io
  3. opened aaronmams/aaronmams.github.io/_config.yml and changed a few values like “name” and “description”
  4. opened aaronmams/aaronmams.github.io/_layouts/default.html and added the MathJax script described above
  5. opened aaronmams/aaronmams.github.io/_posts/2013-3-3-Hello-World.md and modified it to what you now see before you.

AH-AHHHHH! CAMELOT!

Potential Advantages

Something I’m pretty stoked about concerning this new set up that may or may not end up coming to fruition: I use R Markdown a lot for creating dynamic documents and notebooks that combine code and text to provide examples or walk users though how they should use my code for doing different flavors of estimation. Since I can push content to this new blog with .md markdown files, I have to believe I can push content through .Rmd files.

I think this means that a lot of work I’m already doing inside R Studio can be pushed to blog easily and conveniently…I haven’t validated this suspicion yet but I’ll let you know when I do becuase that would be BOSS!

Misc

The rest of this is just me messing around with the new crib and can safely be ignored without any fear of missing out.

Math

First, some math…there’s a lot of math on my blog and I want to make sure it will render:

$\beta = (X’X)^{-1}X’Y$

Well, that’s cool. Note, this didn’t work the first time….after about an hour or so of poking around I found that adding MathJax (http://gastonsanchez.com/opinion/2014/02/16/Mathjax-with-jekyll/) to the site did the trick. There seems to be some debate about which markdown engine one should be using with MathJax…I stuck with Jekyll’s default: Kramdown.

For the equation above I used MathJax’s inline mode and enclosed the math in single dollar signs. Here I tried the same thing in display mode (enclosing the math in a double dollar sign on each side) but it looks a litle wonky…this might take some getting used to:

$$\beta=(X'X)^-1 X'Y$$

Also, after much weeping and gnashing of teeth I discovered that the MathJax Javascript link provided by Gaston Sanchez:

src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"

was causing problems…the location is probably fine but I wasn’t able to see the math rendered because my browser really needed the path to be:

src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"

…the secure version.

Code

I also like to post a decent amount of code…let’s make sure I know how to do that in this new, sexy, Jekyll-Kramdown-GitHub Pages Ecosystem.

Some R code from a recent post…just to make sure we can do this in the future:

library(dplyr)
library(ggplot)
library(xts)
library(KFAS)
 
x = arima.sim(list(order=c(2,0,0),ar=c(1,-0.9),n=2^8)
ts.plot(x)

What about some python code:

import pandas as pd
from Quandl import Quandle as quandl 
df = quandl.get("ZILL/CO00399_MSP", authtoken="1i2uuiN7DQ-Ltizgjb_q")
print(df.head())
print(df.tail()

Including Images

I also tend to include a lot of data visuals in my blog (usually plots generated by R or Python Code). For now I’m going to test graphics inclusion with a sweet picture of Freddy Mercury.

![A Cool Picture of Freddy Mercury](/images/freddy.jpg)

A Cool Picture of Freddy Mercury

Written on September 23, 2016