DEV Community

Jess Lee
Jess Lee Subscriber

Posted on

Exporting posts out of Wordpress and into Gatsby!

My friend Eric has been working on a project called Outreach For Taiwan for the last five years. It's been a serious labor of love where he travels around to different colleges during his (very limited) vacation days, and gives talks on topics ranging from culture and identity to history and politics. Educating people about Taiwan is something that means a lot to me, so I love and support what he's doing. Recently, the project was losing momentum so I offered to be Eric's official sounding board -- a person to bounce ideas off of. Sometimes you just need an ear or someone asking you questions to stay on track. I'm not sure the project itself has benefited much from my presence, but it's been personally fulfilling to be more 'in the loop' on all things Taiwan.

Anyway, to the web development part. I wanted to experiment with Gatsby and the Netlify CMS over my holiday break and decided that creating a mock Outreach For Taiwan website would be a fun project.

I used the gatsby netlify starter and had everything running in no time. I loved Gatsby's documentation, both the quick start guide and tutorial was well-written and easy to follow. Once the starter was up, I decided it was important to import all existing Outreach For Taiwan blog posts. Don't ask me why, I think I just wanted the satisfaction of 'seeing' all the posts and my whole motivation for this was to try something new and have fun. This led to figuring out how to export wordpress posts into markdown and front matter.

And that's when I discovered this helpful tool...

GitHub logo SchumacherFM / wordpress-to-hugo-exporter

Hugo is static site generator written in golang. Wordpress is a tool for remote access to your server ;-) ❗️Contributions welcome!

WordPress to Hugo Exporter

Hugo a static site generator written in GoLang: https://gohugo.io

This repo is based on https://github.com/benbalter/wordpress-to-jekyll-exporter

Hugo Features

One-click WordPress plugin that converts all posts, pages, taxonomies, metadata and settings to Markdown and YAML which can be dropped into Hugo.

Features

  • Converts all posts, pages, and settings from WordPress for use in Hugo
  • Export what your users see, not what the database stores (runs post content through the_content filter prior to export, allowing third-party plugins to modify the output)
  • Converts all post_content to Markdown Extra (using Markdownify)
  • Converts all post_meta and fields within the wp_posts table to YAML front matter for parsing by Hugo.
  • Exports optionally comments as part of their posts. This features needs to be enabled manually by editing the PHP source code. See file hugo-export.php at line ~40.
  • Export private posts and drafts. They are marked as drafts as well and won't get published…

Per the readme, I needed a local instance of wordpress on my machine to install the plugin. Since I've never setup wordpress before, I decided to go the docker route.

GitHub logo wodby / docker4wordpress

Docker-based WordPress stack

Docker-based WordPress Stack

Build Status

Introduction

Docker4WordPress is a set of docker images optimized for WordPress. Use docker-compose.yml file from this repository to spin up a local environment for WordPress on Linux, macOS and Windows.

Stack

The WordPress stack consist of the following containers:

Container Versions Service name Image Default
Nginx 1.17, 1.16 nginx wodby/nginx
Apache 2.4 apache wodby/apache
WordPress 5 php wodby/wordpress
PHP 7.4, 7.3, 7.2 php wodby/wordpress-php
MariaDB 10.4, 10.3, 10.2, 10.1 mariadb wodby/mariadb
PostgreSQL 12, 11, 10, 9.x postgres wodby/postgres
Redis 5, 4 redis wodby/redis
Memcached 1 memcached wodby/memcached
Varnish 6.0, 4.1 varnish wodby/varnish
Node.js 12, 10, 8 node wodby/node
Solr 8, 7, 6, 5 solr wodby/solr
Elasticsearch 7, 6 elasticsearch wodby/elasticsearch
Kibana 7, 6 kibana wodby/kibana
AthenaPDF 2.10.0 athenapdf arachnysdocker/athenapdf-service
Mailhog latest mailhog mailhog/mailhog
OpenSMTPD 6.0 opensmtpd wodby/opensmtpd

It took a little time for me to get the instance set up because I'd never touched docker before but once it was up, exporting the posts to markdown was super straight forward. The trickiest part was realizing that I needed to zip up the files in the repo and upload it as a plugin on wordpress. I should probably submit a PR in the readme to make that crystal clear -- it seems quite obvious in hindsight but figuring that out took much longer than I want to admit.

Holiday time took over the rest of my break so that's all I accomplished. But that's ok! My goal was to get a taste of technologies I don't use on the daily, and this did exactly that. Perhaps on my next break I'll try to get further with this, or try building another mock Outreach For Taiwan site with a totally different set of tools.

Top comments (10)

Collapse
 
phlash profile image
Phil Ashby

Thanks for this Jess, I host a number of Wordpress sites (aka remote access services!) for friends, most of which only have occasional posts added, so I've been looking at ways to go static. This addresses one of the challenges nicely, moving existing content out; the other is getting a good update workflow for the semi-technical site admins who are used to Wordpress.. would be interested to hear more on that from anyone?

Collapse
 
tomekbuszewski profile image
Tomasz Buszewski

Hi Jess,

Gatsby supports WordPress' as a data source (gatsbyjs.org/packages/gatsby-sourc...), so there's no need to really export anything.

Collapse
 
jess profile image
Jess Lee

Oh, awesome! That's good to know. cc @phlashgbg

Collapse
 
jacobherrington profile image
Jacob Herrington (he/him)

Netlify seems like a magic bullet to me. That's probably because I haven't used it enough to find it's warts, but this seems like a great use case for it!

Collapse
 
rhymes profile image
rhymes

Hi Jess, does it mean that hugo's and gatsby's formats are compatible? Nice to know!

Cool that you want to spread awareness of your heritage, that's a great thing :)

Collapse
 
mattbag00 profile image
Matt Bagni

You can feed gatsby md files for sure. Those can be manually written or written by a cms, such as netlify cms

Collapse
 
rhymes profile image
rhymes

Thanks!

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

Awesome post I think there might be more blogs being converted from WordPress into Gatsby in the future due to the cost and maintenance of a blog.

Collapse
 
smitpatadiya profile image
Smit Patadiya

Gatsby is awesome but you can also try frontity.org (WordPress + React)

Check out Twentynineteen porting in frontity at twentynineteen.frontity.org

Collapse
 
rehmanjeff profile image
Habib ur Rehaman

is it now converted and running on gatsby ?