When I re-did my website, I decided to make some sort of blog to go with it. After some quick searching on the different ways to set one up, I decided to go with Jekyll, a static site generator written in Ruby and that can be installed as a RubyGem.
One of the first things I did before starting my blog was finding a place to host it. I first considered getting a box from DigitalOcean like I have with a couple of my past projects, but I instead went with GitHub Pages.
Each person with a GitHub account gets a free subdomain for each of their projects at
project.github.io, as well
as one account subdomain at account.github.io. This account subdomain makes for a perfect place to host a jekyll blog. Since
GitHub Pages support Jekyll already and setting up a blog is as simple as creating a repository on GitHub and then pushing
to your Jekyll blog repo whenever you want to redeploy.
To setup a Jekyll Blog on GitHub pages, install the
github-pages gem in the folder of the blog repository. To get myself off the ground,
I used this guide as a starting point, since they offered a pretty vanilla
Jekyll setup that I could configure however I wanted.
There are a bunch of Jekyll blog themes out there, although some are incompatible with GitHub Pages, as Pages only supports a subset of all the Jekyll plugins.
As Jekyll describes itself, the engine takes text written in any markup language and sends it through a series of layout files. My vanilla install already had some layout files defined, but I modified them to be a little simpler and to match the look I was going for.
I currently am using three layout files:
In this post, for example, my default layout centers content within a container and adds my header to the page. It then uses the Liquid templating language to inject the content. My body for the default layout looks like this:
post.html file is then rendered in the content section. My
post.html layout is very simple:
First there is a title and a date for the post, and then the content of the post itself is injected within the entry.
Blog entries can be written in a variety of markup languages, for mine I like to use markdown.
I used SASS to style my layouts and posts. I included the Bourbon gem, which provides a collection of mixins that I find useful when styling applications, especially to help with vendor-prefixed styles in a similar way to Compass.
Bourbon breaks its library into general mixins, grid mixins, and scaffolding, each with its respective gem. I used all of them here, since I needed some of the general mixins, as well as a grid and wanted some default styles.
I like Bourbon because it isn’t a front-end framework like Bootstrap or Foundation, which seems like overkill for my small blog, but instead just gives me the few mixins I need to make styling easier.
I did include some scaffolding with the Bourbon Bitters gem, which like the other framework alters the appearance of several components, but it is in comparison very light-weight. Bitters breaks all of its styles into logical files for different components, making it simple to keep and modify only the styles you need, such as my blog’s typography, grid settings, and lists.
Now that my Blog is deployed to GitHub Pages, I want to connect it to my website at
danreynolds.ca. To do that, I setup a
CNAME in my site’s DNS records, which forwards my subdomain
blog to the Pages site.
Finally, I had to add a
CNAME file in the root of the blog repository containing only the name of the custom domain.
My custom domain was
With everything setup, I now have a perfect way to say random things that might sometimes be enjoyable or possibly even useful. Hurray for blogging!