KIRA WRITES

Migrate Your Blog from Tumblr to Jekyll While Preserving the URL Structure

Couple weeks ago I helped a friend to migrate their blog from Tumblr to Github Pages with Jekyll. While I found migrating posts to be well-documented on Jekyll's website and other blog posts, but these sources often didn't include instructions on how to preserve URL structure of Tumblr posts, which is something my friend explicitly wanted, for good reasons too. If you have a blog post on Tumblr that people have linked to on their blogs, you would want to preserve the traffic by redirecting them to the same blog post on your new site.

So this tutorial will cover:

  • How to download your Tumblr blog posts in markdown format including all your images;
  • How migrate the blog posts into your Github repository running Jekyll;
  • How to set up redirect in Jekyll to preserve your URLs.

Part I: Download your Tumblr Posts in Markdown

When in doubt, always check the offical Jekyll documentation on this topic.

Here is the simplified version: Open your terminal, navigate to the folder containing your Github Page blog powererd by Jekyll. You should see a folder structure similar to this: screenshot of the terminal that shows the Github Page blog folder structure

Delete the folder _posts. We will replace it with the posts we get from Tumblr. Now, we will crawl the Tumblr posts by entering the following command:

`jekyll import tumblr --url=[YOUR TUMBLR URL] --format=md true true`

Remember to replace [YOUR TUMBLR URL] with your actual tumblr URL. No brackets needed.

You should now see a new _posts folder in your repo. This folder will contain another folder named \tumblr and inside this folder, you will see all your tumblr posts neatly listed. The names of the posts are a combination of the date and the name of the blog.

Once you save your changes, you can take a look at your Github page and you should see your blogs show up! WOO-HOO!

Part II: Set up Redirect in Jekyll

Why do we need redirect? Here is the problem: Tumblr manages their posts with a URL structure like this:

https://YOURUSERNAME.tumblr.com/post/NONSENSEPOSTID/YOUR-POST-NAME

For example:

https://kirazhang.tumblr.com/post/123456789/hi-this-is-kira

But in Jekyll, when you migrate your blog posts over, the URL structure becomes:

https://kirazhang.com/2018/11/11/hi-this-is-kira.html

What we need is a redirect. From /post/123456789/hi-this-is-kira to /2018/11/11/hi-this-is-kira.html.

There is a wonderful jekyll redirect gem that you can install that solves just that problem.

In your Github Repo, install the gem using the following command:

gem install jekyll-redirect-from

Then, go to your _config.yml file, add [jekyll-redirect-from] as one of your plugins. Like this:

screenshot of the config.yml file: plugin: [jekyll-redirect-from]

Now we are ready to use the gem. Open up your markdown blog posts, in the front matter, you should see key-value pairs similar to the following:

tumblr_url: https://kirazhang.tumblr.com/post/123456789/hi-this-is-kira

Then, in order for the rediretcion to work, you need to add a line in the front matter like the following:

redirect_from: /post/123456789/hi-this-is-kira

You just need to copy and paste the parts after ...tumblr.com as the value of the key redirect_from in the front matter of your markdown file.