gatsby-source-medium-backup

Gatsby plugin to import your medium posts from a backup as markdown files.

Installation

We assume you've already created gatsby website using command like this:

gatsby new example https://github.com/gatsbyjs/gatsby-starter-hello-world

Install dependencies

cd example
npm i -s gatsby-source-filesystem gatsby-transformer-remark gatsby-source-medium-backup

Configure your gatsby plugins

Go to gatsby-config.js and configure folder for your processed markdown pages first:

const markdownPages = `${__dirname}/src/markdown-pages`

Then inside the plugins section add gatsby-source-medium-backup first and specify location of your medium backfile inside source:

{
  resolve: 'gatsby-source-medium-backup',
  options: {
    source: `${__dirname}/medium-export.zip`,
    destination: markdownPages,
  },
},

Add markdown generation after above plugin!

// markdown
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: markdownPages,
    name: `markdown-pages`,
    //prefix: 'blog' // optional: prefix all slugs
    h1h2: true, // optional: convert all h3 and h4 to h1 and h2
    // h2h3: true, // optional: convert all h3 and h4 to h2 and h3
  },
},
`gatsby-transformer-remark`,

Download your medium archive

Here's official guide from Medium.

1. On your homepage, click on your profile picture and click Settings.
2. Scroll down to the Download your information section.
3. Click Download . zip and confirm by clicking Export.
4. A link to download your archive will be sent to you by email when it is finished.

Configure your gatsby blog posts generation

This section essentially follows original guideline for adding markdown pages here

1. Create ./src/templates/blogTemplate.js, which will be used as a page template for your blog posts.
2. Configure your ./gatsby-node.js to generate blog posts using markdown files during the build time.

Now run your gatsby

cd example
gatsby develop

Navigate to http://localhost:8000/404 and you'll see your markdown pages generated.

Troubleshooting

1. Make sure to put absolute path for your medium archive.

2. This plugin generate following metadata for each post:

{
  "title": "How to build a react-native plugin in 2021",
  "author": "Eugene Hauptmann",
  "authorLink": "https://medium.com/@eugenehauptmann",
  "canonical": "https://medium.com/@eugenehauptmann/how-to-build-a-react-native-plugin-in-2021-60704edc0c28",
  "timestamp": "2021-04-06T00:58:51.984Z",
  "exportDate": "April 6, 2021"
}

Sponsorship

Thank you to our sponsors:

License

MIT

Copyright (c) 2021 Eugene Hauptmann

Changelog

0.0.10

• Updated parser to comply with new structure on medium
• Added remove functionality to remove third party links

0.0.9

• Removed logging.

0.0.8

• Proper image alt tag generation based on figcaption

0.0.7

• Removed logging.

0.0.6

• Added description for each post.
• Added deafult img tag alt attribute.

0.0.5

• Added code pre tags exception.

0.0.4

• Added h1h2, convert all h3 and h4 to h1 and h2.
• Added h2h3, convert all h3 and h4 to h2 and h3.
• Added image thumbnail, which is a first image in the post.

0.0.3

• Added slug prefix.

0.0.2

• Skipping drafts.
• Improved aligment of the images via CSS and parsing.

0.0.1

Initial release.