Moving from Blogger to GitHub Pages

Migrate your blog from Blogger to GitHub Pages to gain full control on your content.

Aug 27 2014

Web

This is a meta post. Yes, this post traits about its own creation, infact I am moving from Blogger to Github Pages.

I started looking these examples:

See here more sites using Jekyll.

Pros

Can edit locally using my favourite editor (vim, of course :^).
Can edit online using GitHub editor.
Easier web design: editing Blogger template is horrible! Now I can use Bootstrap 3.
Can easily embed a GitHub Gist, see Jekyll documentation about gists.

Cons

Loose out of the box Google Ads integration: it is ok for me, cause I will remove ads.
Loose comments feature: I will implement it with disqus or facebook. By the way I got three type of comments while my blog was on Blogger: spam, that I had to moderate; hints, that I would like to redirect to a collaboration via GitHub, maybe using the site’s repo issues tracker; thanks, that I would like to redirect to donations.

Steps

Basic structure

├── _config.yml
├── index.html
├── _includes/
|   ├── _includes/footer.html
|   └── _includes/header.html
├── _layouts/
|   ├── _layouts/default.html
|   └── _layouts/post.html
└── _posts/
    └── _posts/2014-08-27-moving-from-blogger-to-github-pages.md

Porting a post

I will focus on post How to install DBD::Oracle, that is the most visited of my blog.

See Jekyll docs about how to write a post.

To preserve blogger urls, edit _config.yml and add

permalink: ./:year/:month/:title.html

Note that filename should start with yyyy-mm-dd and post title should be lowercase and separated by dashes, file extension is .md, for instance, I will create a file

_posts/2013-07-02-how-to-install-dbdoracle.md

Don’t forget to insert a YAML frontmatter

---
layout: post
title: Moving from Blogger to GitHub Pages
tags:
  - Blog
---

Extras

Naked domain and SSL

I used Cloudfare to get a naked domain and SSL: it was really easy and took no more than 30 minutes. Now my homepage is https://g14n.info.

Comments

On blogger you have comments and moderation out of the box. To achieve the same feature in a modular way, I chose Disqus.

Basically I added an {% include disqus.html %} to my _layouts/posts.html and created an _include/disqus.html with all the code required.

Read how to embed Disqus code as a reference.

A good tip is to add the disqus_shortname variable into the _config.yml

disqus:
  shortname: g14n

and to use the following Jekyll variables

var disqus_shortname  = '{{ site.disqus.shortname }}';
var disqus_identifier = '{{ page.id }}';
var disqus_title      = '{{ page.title }}';
var disqus_url        = '{{ site.url }}/{{ page.url }}';

to obtain Disqus Javascript configuration variables like this

var disqus_shortname  = 'g14n';
var disqus_identifier = '/2014/08/moving-from-blogger-to-github-pages';
var disqus_title      = 'Moving from Blogger to GitHub Pages';
var disqus_url        = 'https://fibo.github.io//2014/08/moving-from-blogger-to-github-pages/';