read

Well it looks like I’m finally pulling the trigger on my old Blogger blog and moving it over to Hexo :D … It’s not you Blogger, it’s me - I just infinitely prefer writing in markdown and git based publishing!

UPDATE: That was possibly one of the easiest transitions I could have hoped for, if anyone is interested I followed these steps:

  1. Followed the simple npm install instructions over hexo.io
  2. Copied and translated my Blogger posts from HTML to Markdown using to-markdown (Admittedly, I didn’t have many posts to convert :) )
  3. Ensured I saved each post with the same slugged abbreviated title that Blogger had used for the permalinks (this was to simplify redirects which you’ll see in Step 5)
  4. Generated and Deployed my blog with hexo generate and hexo deploy to my Github Pages repo
  5. Modified my Blogger template with pseudo-canonical redirects using technique shown in How to Switch from Blogger to WordPress…
    While the Blogger=>Wordpress article is great, the necessity of using JavaScript to redirect in lieue of Blogger offering a 301 service is unfortunate. Also I refer to the links as pseudo-canonical because since we are unable to manipulate strings in the Blogger template, the solution revolves around passing a query string param that the new blog can parse and in turn redirect to the correct post. This is not really canonical, as the true canonical url would be the new blogs permalink - not some transient url with a param. I added some JavaScript to modify the <link rel="canonical"> in the Blogger document head to the correct value, but am unsure whether crawlers will pick this link up pre, or post JS execution. Bearing in mind that Google does execute JS, but I’m not sure at exactly the stage it does this and for what type of scraping.

    Here is my best attempt at bending template to my will… A 301 would be far preferable!

    See the Pen Hacking Blogger template for JS Redirects and canonical links by Stephen James (@stephen-james) on CodePen.

  6. Added a function which I call to catch the blogger=<Blogger Permalink> style redirects and convert them to how I’ve configured my Hexo Permalinks

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function redirectBloggerLinks() {
    var search = window.location.search;
    if (search.startsWith('?blogger=')) {
    var expression = /(?:http:\/\/example.com\/\?blogger=http:\/\/example.blogspot.co.uk)(.*)/g;
    var matches = expression.exec(window.location.href);
    if (matches && matches.length === 2) {
    window.location.href = matches[1].replace(/\.html$/g, '') + '/';
    }
    }
    }

    I call this method in the theme’s index.js file.

  7. The rest was tweaks and experimentation, I have settled on using the Hexium theme, and am just modding it to fit my needs - which so far has proven easy enough. If you’re leaning towards the same theme, check this issue which may still help you out if you get in a pickle with funny boilerplate messages
Blog Logo

Stephen James

JavaScript and Front-End Developer


Published

Proudly published with Hexo
Image

Stephen James' Code Blog

Back to Overview