Import your markdown or HTML content into Prismic

12 September 2021 - François

The kramdown-prismic gem allows you to convert markdown or HTML to JSON for Prismic. It is also possible to convert in the other direction.

I’ve recently made some fixes and improvements to this gem and this is an opportunity to show how to migrate Jekyll content to Prismic.

Warning: This type of migration requires the use of document import in Prismic, which requires the Prismic Medium plan (just for a month if you don’t use it).

It is necessary to write your own migration logic depending on what you want to migrate. Indeed kramdown-prismic is not a tool directly usable for importing, it only takes care of the markdown -> prismic conversion.

Creating the content type

The first thing to do is to create the structure in Prismic. For the example, the structure will be very simple, but you can adapt it to add fields corresponding to your metadata for your jekyll posts.

• uid for the slug of your posts

• title for the title field

• date for the publication date

• content for the content itself

The Prismic JSON type that you can copy/paste into the Prismic UI.

{
  "Main": {
    "uid": {
      "type": "UID",
      "config": {
        "label": "slug"
      }
    },
    "title": {
      "type": "StructuredText",
      "config": {
        "single": "heading1, heading2, heading3, heading4, heading5, heading6",
        "label": "title"
      }
    },
    "content": {
      "type": "StructuredText",
      "config": {
        "multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
        "label": "content"
      }
    },
    "date": {
      "type": "Date",
      "config": {
        "label": "date"
      }
    }
  }
}

Creation of json files

The idea is to list the markdown files in the _posts folder, read its content, and create the corresponding json files. To separate the posts metadata from the markdown content (the famous YAML front matter), I use the gem front_matter_parser.

require 'json'
require 'date'
require 'front_matter_parser'
require 'kramdown-prismic'

loader = FrontMatterParser::Loader::Yaml.new(allowlist_classes: [Date, Time])

Dir.glob('_posts/**.md').each do |filepath|
  filename = filepath.split('/').last
  match = filename.match(/^([0-9]{4}-[0-9]{2}-[0-9]{2})-(.+).md$/)
  parsed = FrontMatterParser::Parser.parse_file(filepath, loader: loader)
  uid = match[2]
  title = parsed.front_matter['title']
  date = parsed.front_matter['date'] || match[1]
  kramdown = Kramdown::Document.new(parsed.content, input: :markdown)
  doc = {
    type: "blog",
    uid: uid,
    title: [
      {
        type: "heading1",
        content: {
          text: title,
          spans: []
        }
      }
    ],
    date: date,
    content: kramdown.to_prismic
  }
  p filepath, kramdown.warnings if kramdown.warnings.size > 0
  File.write(File.join('migration', "#{uid}.json"), JSON.generate(doc))
end

Next steps

The next step of the migration is to manage the possible attachments (image or other). For simplicity I did not do it here.

Then you can create a zip archive of the migration folder and upload it to Prismic. You can follow the official procedure for this.

Have a good migration!

Have a comment? Contact me by email.