Musings, interviews, product stories & more to boost your digital marketing.
Brought to you by the people behind Brightpod.
Brightpod

Moving Our Blog From Medium to Webflow (Subdomain to Subfolder)

March 22, 2018
The Brightpod Blog was in a sub-folder between the arrows.

Discoverability and tapping into a ready audience were the two main reasons why we moved the Brightpod Blog to Medium in July of 2017. The ease of use of the migration and the simplicity of composing a blog post made the decision a no-brainer.  

But, after 6 months there was no change in traffic or anything else. We were back where we started.

Note: We analysed our organic traffic data over the last four years and noticed a drop in traffic from the time we had moved the blog from a subfolder to a subdomain (August 2016 on WPEngine). We decided to switch back to having our blog as a subfolder.

Collectively, we decided it was time to move again (and probably the last time we would do this)!

Our software's website is hosted on Webflow - an excellent online web design tool, CMS and hosting platform. So, instead of moving our site out to another server and hosting WordPress on a sub-folder (personally, will never go back to managing a WP installation on a server), we decided to give the Webflow CMS a go. It took me a week or so to get familiar with Webflow CMS - their videos, forums and support are excellent!

Next, we checked with Medium's support team to see what options we had if we decided to move from Medium and whether Medium would provide 301 redirects once we are not on their platform or if they allow us to continue hosting images on their site. Both of those were a "no".

We then requested Medium support to export all our Medium stories in the .html format so we can import them to Webflow. We had 458 articles that we had to move from Medium to Webflow. Webflow did not have an import feature from Medium. One of our developers helped us convert these Medium .html files to CSV files (since Webflow would only allow us to import articles as a .csv file) in 18 batches of about 25 posts each. This was achieved by importing Medium posts to WordPress and then exporting them to .csv files. We used Cloudinary to host images (since we did not want to manually download and upload images to Webflow). Details of the move are below.

Simultaneously, I worked on the design of the new blog on Webflow and testing the look and design of our the blog using the Webflow CMS.

Once we had finalised the design (with some dummy data), we decided to move ahead with the import. It took us roughly 15 days to finish uploading all 18 batches. Importing each batch to Webflow took about 2 hours as it also involved cleaning up the formatting of the articles, images, creating and assigning authors, categories, etc. So while one person would convert the .html files into the desired .csv format, the other would upload the .csv files to webflow and sanitize each of them using a checklist that we created in-house (more details below).

Once the upload to Webflow CMS was complete, and we tested everything out on the staging server, we redirected all the traffic from https://blog.brightpod.com to https://www.brightpod.com/boost (we decided to call the folder 'boost' - which is also the name of our new blog)

Since Medium wouldn't host the redirects, we created a separate server for blog.brightpod.com and created an htaccess file which had redirects from https://blog.brightpod.com/[article] to https://www.brightpod.com/boost/[article].

Details of the Move

1. Export from Medium (we got HTML files). Webflow requires CSV format. So we decided to use Wordpress as a bridge to get the CSV file. Our process would be:

Export in HTML from Medium -> Import to Wordpress.com -> Export from Wordpress.com -> Import to Localhost-WP -> Export in CSV from Localhost-WP -> Import to Webflow in CSV. Here, "Localhost-WP" is the localhost installation of WordPress.

2. Import to Wordpress.com (created a dummy site) using the built-in importer for Medium to Wordpress (we couldn't use this importer on Localhost-WP). We kept the site privacy in settings to "Hidden" to avoid search engines indexing the site.

3. Export from Wordpress.com in the default WordPress eXtended RSS (WXR) format, i.e. XML file

4. Import the XML file to Localhost-WP. Go to Tools > Import > Wordpress format > Run Importer. Make sure to tick "Download and import file attachments". This should download and import all the images to localhost-WordPress.

5. Install the Cloudinary plugin on Localhost-WP. Transferring images manually from Medium/WordPress to Webflow would be painful, so we found Cloudinary as a place to host those images. They had a Wordpress plugin too!

6. Our developer then ran a PHP script which updated all the <img> tags in posts with the correct class name, so Cloudinary plugin works well. The Cloudinary plugin takes the images from the Localhost-WP media library and uploads them to the Cloudinary account and then updates the <img> tag in the blog posts. But this was not working for posts which we had imported via Medium. It did work for a sample post which we created on localhost. On further investigation, we realised the <img> tags in the sample post had a class name like "wp-image-123" (where 123 is the unique id of the image). But the posts imported from Medium did not have this class name in the <img> tags. So the developer wrote a PHP script to pick all images from the Localhost-WP MySQL DB with their unique-ids (primary key), then search all posts and add the string "class='wp-image-<img_id>'" to the <img> tags (where <img-id> is primary key of that image from WordPress DB). This worked and <img> tags would now get updated in all posts when we ran the Cloudinary plugin - all images were uploaded to Cloudinary, and all posts were updated with <img> tags pointing to Cloudinary URLs.

7. Install a WordPress plugin to export posts to CSV so that we could then import these into Webflow.

8. Run a PHP script on the exported CSV file to add new columns (Main Image, Thumbnail Image, Author, Published Date) that would be mapped to the Webflow CMS (during the import process). The columns that we added were:

Author: parse the HTML files we got from medium and picking the author for each post.

Main Image: For guessing which image to take as the main image and thumbnail image in Webflow, we checked the resolution of each image in the CSV row (for that post) using Cloudinary's API. The one with the highest resolution was picked, and the URL was added to the Main Image column.

Thumbnail:  We also used the Cloudinary API to take the main image and created a thumbnail version.

Summary Column: Get a substring of first 100 characters from the post content.

Published Column: Formatted published date of the post to the format required by Webflow.

9. Import CSV to Webflow in batches of 25. The Webflow CMS importer worked flawlessly!

10. Delete all posts and images from the WordPress.com and localhost-WordPress. We repeated this process for next batch of 25 posts.    

Sanitizing Articles Imported to Webflow

After successfully importing each batch of 25 articles into Webflow, we went through each article and performed a sanitization check. Doing this ensured that the articles imported to Webflow have the correct formatting for text, images, links, etc.

1. Delete the article entirely if it’s too old with outdated information, not relevant anymore or talks about project management features that are discontinued.

2. Go through the post body and make sure text is formatted and nothing looks out of the ordinary. Caption code from the images that were imported (as part of the blog post body content) needed to be removed. Bullet points/ numbered lists that are present in the post body needed to be formatted well (it is seen that the import distorts the way these lists appear).

3. Check post summary and format it or change it if required.

4. Select a blog category that best suits the post. If required, add a new category using the ‘+’ and give it colour too. We could always delete a category later if we think it has too few posts or the posts can be put in another category as well.

5. Replace the main image of posts if they aren’t of good quality with a free stock image, preferably from Unsplash.

6. We used the same image for the thumbnail too. When uploading the thumbnail image we ensured the image dimension were no greater than 290x200 pixels.

7. Every post had to have an author. If the person who initially created the article is not there, then the article got attributed to “Brightpod”.

Post Move

We deleted all our articles from Medium (since we had already put 301 redirects) and also cancelled the custom hosting. We added self-referential canonical tags to all our Boost blog pages on Webflow.

Daily we keep an eye out on Webmaster Tools to make sure all the 301 redirects that are set up are working as expected and fix any 404 errors.

Since our move to Webflow we have seen a steady increase in average weekly traffic so hopefully moving back to a sub-folder for all our content pays off.

I am happy to answer any questions regarding the move, Webflow or anything else in the comments below. Thanks for reading.

Managing marketing projects shouldn’t be chaotic —Try Brightpod for free and start focusing on what matters.

Sahil Parikh

Building Brightpod, playing golf 🏌🏽 and traveling the world 🌏

BrightpodCoding as a Founder

I started my career as a software developer in 2002 after graduating in B.S. Mathematical Sciences/ Computer Science from the University of North Carolina at...

BrightpodI Found It! New & Improved Brightpod Search

Unlike forgetting where you put your keys in the morning, not remembering where you left certain tasks or comments in Brightpod won’t cause you a sense of ...

BrightpodAdd one more feature or else…

Any eta on sorting personal tasks, specifically by date? If we can’t have that soon we’ll have to move to another project mgmt platform First thought:

Join Boost

A refreshing weekly newsletter handcrafted for the smart digital marketer.