Moving to Jekyll + GitHub Pages from WordPress
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.
Getting started
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.
The basics
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.
- 404.
- 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
SEO
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.
Meta tags
First, I added the tags
, categories
, name
and 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.
<meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines }}{% else %}{{ site.description | strip_html | strip_newlines }}{% endif %}">
<meta name="keywords" content="{{page.tags | join: ' '}}, {{page.categories | join: ' ' }}"/>
<meta name="author" content="{{ site.name }}">
For example, this post has the following values:
---
categories: jekyll
tags: Jekyll, GitHub Pages
description: A guide on moving from WordPress to GitHub Pages and Jekyll, setting up a blog without bootstrapping tools.
---
And the generated tags:
<meta name="description" content="A guide on moving from WordPress to GitHub Pages and Jekyll, setting up a blog without bootstrapping tools, with some tips on SEO and redirects.">
<meta name="keywords" content="GitHub Pages Jekyll SEO Wordpress, Github Pages + Jekyll"/>
<meta name="author" content="Andras Kindler">
Related posts
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.
{% assign bestMatch = 0 %}
{% for post in site.posts %}
{% if page.id != post.id %}
{% assign sameTagCount = 0 %}
{% for tag in post.tags %}
{% if page.tags contains tag %}
{% assign sameTagCount = sameTagCount | plus: 1 %}
{% endif %}
{% endfor %}
{% if sameTagCount > bestMatch %}
{% assign bestMatch = sameTagCount %}
{% assign bestMatchPost = post %}
{% endif %}
{% endif %}
{% endfor %}
{% if bestMatch > 0 %}
<div class="post-related">
Related: <a href="{{ bestMatchPost.url }}">{{ bestMatchPost.title }}</a>
</div>
{% endif %}
URL redirects
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:
gems:
- jekyll-redirect-from
Then add the old links to each page:
redirect_from: "/your/old/url/here"
Outro
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.