I finally made the transition from WordPress to GitHub Pages, resulting in a minimal, hand-crafted blog, without using bootstrapping tools. This post contains what I went with, sticking to the bare essentials, plus some tips on SEO, related posts and redirects.
There are a lot of good bootstrapping tools out there, Jekyll Now, Poole, Jekyll Bootstrap, and the likes will get you up and running within minutes. I wanted to go with the vanilla option - this gave me a greater understanding of the platform, thus making me able to make changes quicker, and giving a finer control above the site. Also, building a minimal site requires a small effort, I was able to finish in a few days, what I wanted working only a couple of hours on it every day.
I read through some guides, and ended up following Mike Greiling’s excellent series of posts (part one, two and three), which answered nearly all of my questions. The setup of the site was based on these articles, also serving as guidelines for further customizations.
As far as the extra features go, I tried to keep everything to a minimum, even dropped the about page, with the contact info in the footer. Also, GitHub Pages runs Jekyll in safe mode, meaning plugin support is off (except for the Jekyll Redirect Plugin). No worries though, everything can be achieved with a few lines of code, with a tutorial or a manual available for each and every step.
Here’s the list (more like a collection of links) of what I did besides the initial setup and playing around with the layout, and their respective sources.
- Drafts. Also, I made a symlink to a _drafts folder in my Google Drive (got the idea from Mike Greiling), so drafts are backed up and can be edited on all my devices.
- Pagination. I chose to only display prev and next buttons, no numbers.
- Custom domain.
- Social widgets at the end of each post. I ended up using Twitter, Google Plus and Reddit.
- Comments. Because of the heavy focus on Android, I’m rolling with Google Plus comments.
- Site stats. This is a no-brainer, Google Analytics.
- Sitemap.xml. Generate it using the built-in method.
- Header color from Google’s Material design palette
- Importing posts from WordPress. Since I don’t have many posts, and needed to update all of them, I did this manually. Used this site for Markdown conversion.
- Markdown cheat sheet
- Liquid basics + filters
I did some basic SEO on the site, by generating the proper
meta-tags and related posts for each page. Also, each post automatically fills out the
alt tag of the banner image (if applicable) with the title of the page.
First, I added the
description variables, then generated the tags in head.html with the following. Be sure to fill out a proper description, as it’s the meta tag that matters.
For example, this post has the following values:
And the generated tags:
I got the idea from this SO-thread, and I modified David Jacquel’s solution a bit. My take only gives the newest related link with the most matched tags.
Page redirects. Moving from WordPress I purchased the Site Redirect update, which works exactly as advertised. However, the old link structure (/YYYY/MM/DD/…) conflicted with the new one (/blog/YYYY/…); this is where the Jekyll Redirect Plugin comes handy.
Add these lines to the _config.yml file:
Then add the old links to each page:
Like all sites hosted on GitHub Pages, the source is completely available on GitHub. The code itself is a bit messy (last time I did some web development was a long time ago), this will change in the future.