This blogpost explains how I learned to reduce the cost of maintaining a simple brochure or blog site. When using Drupal, you need at least a shared hosting platform (there is no Wordpress.com for Drupal sites). So, migrating to a static site generator, like Jekyll or Gatsby, seemed like a good idea. Gatsby is also a great opportunity to learn React and then get hosting for free using something like GitHub Pages. This post is going to describe how to migrate a simple blog—that has featured images on the posts, comments and tags—from Drupal to Gatsby.
To facilitate exporting the site, the first thing I did was export the database from the mysql database server to an sqlite file that I could use locally. To do this I used the mysql2sqlite project, which, as described on the project page, can be done with two commands like:
The useful commands on an sqlite3 command line to explore are
.tables to see all tables :) and
.schema table_name to see information about a specific table. Oh! and
.help to know more.
Next, you will be creating a new file on your project at
src/scripts/import.js. Initially, what you want is to iterate through all your posts and export basic data like title, created date, body and status (published or draft). All of that data is in two tables, the node table and the field_data_body. Initially, your script will look like this:
To avoid 404 in case you created some url aliases you can query the
url_alias table and create an aliases frontmatter property and later (depending on your hosting platform) use a plugin like gatsby-plugin-meta-redirect to use the gatsby createRedirect function:
For the image, you will retrieve only the URL of the image, so you can download it and store it locally. And you will replace
public:// for the URL path of the images folder on your old site:
This script is now finished and you can execute it in your shell with this command:
To have comments on your site you can use a service like Disqus. Disqus has an import process that uses a custom XML import format based on the WXR (WordPress eXtended RSS) schema. So the process would be the same. Create a script named
src/scripts/export_comments.js to query the database and, in this case, write a single file containing all the comments of your old site:
node src/scripts/export_comments.js ../mysqlite.db > comments.xml and that’s it. This will generate a comments.xml file that you can import into disqus. Just remember to change the yourSite variable in the script, and it will link each comment to the correct post in your new blog using the slug used in the posts import.
You now have all the posts and all comments ready to be used on your Gatsby blog. You can see a working example here: https://github.com/jackbravo/joaquin.axai.mx.