I decided it was time to wrap up one of my Tumblrs and export it out as static site to archive. This is how I exported it as a static site via a local install of WordPress.
Tumblr used to provide a standalone archive app to export. My other choices were WGET or Jekyll, but the command line factor put me off. I have no experience with either so I went with what was most familiar to me and decided to try and use WordPress to pull down and export all my posts.
I spun up a new database, got WordPress started locally and checked out the suggested Tumblr Importer option. The steps seemed slightly convoluted at first.
Follow the full steps on the plugin site or during the import process, this is just an overview.
- First step is to create a Tumblr app to get at the Tumblr API to suck up your posts.
- Disable your custom domain beforehand. I forgot but it simply required me to toggle the plugin on and off and repeat the steps.
- Give the plugin your generated ‘open key’ and ‘secret key’ and allow your new app access to Tumblr.
The good news, is the plugin works smoothly.
My Tumblr didn’t have any chat or audio posts so I can’t comment on how they import.
- Imported all my Tumblr posts and to my surprise drafts (they import as draft posts in the WP admin panel).
- Posts are of the same type like-for-like: status, quote, gallery etc all correct as they were.
- Media for my posts too which I wasn’t 100% sure about, based on some of the plugins reviews.
Not So Good
- Posts have no titles
- Reblogs don’t import with any metadata, however the links have a
.tumblr_blogclass, so some scripting is possible to get those back.
- Video post embeds are gone with no metadata available to get a video source out from.
- Pages did not import either.
- Image posts imported as galleries of a single image.
There are a few things to amend before putting the site live via WordPress or exporting a static copy.
You need to re-add your Tumblr description in the tagline customisation area and presumably your Tumblr Icon if your theme supports a user logo.
Remember to set the permalinks via settings. Dateless permalinks work well. I haven‘t tried with dates, I assume they work and use the Tumblr original post date.
You may have some stray Tumblr redirect wrapped links in your posts. I had some which were pasted over from my pages when I recreated them. This Gist, t-um-block.user.js script does a great job of removing those.
The imported images are not ideally sized, the default WordPress sizes just land either side of Tumblrs 500px standard image size. Adding a new image size requires you to regenerate all the thumbnails again. So if you are setting out importing I would set up the image sizes you want to use before importing.
To emulate Tumblrs photo collection grid arrangement, I used flexbox. Make the first image 100% width and let flexbox handle the other gallery images.
To emulate the Tumblr Photo Light Box effect, the Gallery Carousel Without JetPack is a good substitute, opening the photos in a lightbox overlay.
I built my Tumblrs theme and can build WordPress themes. If you are following this process you will need to find a theme you like and either use a Child Theme to add CSS to style the theme – or as of WordPress v4.7 directly via customisation screen – to your preference.
Depending on your WordPress theme, you may need to enable theme support for post formats and HTML5.
With a quick function written to remove WordPress parent themes liberal use of jQuery and accompanying unnecessary plugins, I was ready to export as a static site!
Static Site Export
To export my site I used the plugin, Simply Static.
It took some time of watching a spinner and a total increment to an unknown number as the plugin spiders through generating static HTML pages for tag pages, pagination, permalinks etc. The export worked well.
URLs were broken to begin with, I did not include a URL to the plugin, the site was local (a plugin update now provides this as an option). Some skilful find and replace meant that, with the
<base> tag set and relative links, the site is browsable locally.
Success. A static site out of Tumblr via WordPress!
Paul Foster is a web designer / front-end developer. Read more about his other work on www.paulfosterdesign.co.uk.