Convert Bear notes to custom blog posts

Tl;dr export each note as a .textbundle, then parse into HTML + assets/. Check out this package as an example.

Background

Bear is a well-designed markdown editing app that works across the Mac ecosystem. It already has the ability to export posts to Wordpress, but that doesn’t help people who have other types of blogs, like blogs built with Gatsby, Next.js, Jekyll and other site generators.

Luckily, Bear allows users to export notes in the TextBundle format (using “File > Export notes…”), which is the same format uses to export to Wordpress. This format allows for packaging markdown with associated assets, like images and other files.

Mapping TextBundle to HTML

Since TextBundles are basically just a markdown file with an asset folder, mapping to HTML is pretty simple. Here’s an example workflow:

Create an output directory with the name of your posts’s url (e.g. a slug of the post’s title). Let’s call it my-post/.
Map the TextBundle’s text.markdown file to standard HTML.
Insert this HTML into an HTML template for your blog posts, saving it to my-post/index.html.
Copy the TextBundle’s assets/ folder directly into to my-post/assets/.

Now your output directory my-post serves as a standalone blog post. You can push it to your static server’s blog root.

Creating a blog index

You’ll probably want to update your blog’s index to link to the new post, so there will be some custom configuration for your site.

For that, I just keep a directory of all the .textbundle posts in a folder in my local machine. I generate a slug from each of the filenames, then create an index.html at the blog’s root that links to each of the posts’ slugs.

Post metadata

Here are a few extra details I added to my posts:

Dates: read the OS’s “modified date” on the TextBundle file to get the post date.
Tags: Use a library like unified to pull out header #tag elements from the markdown and render separately in the post HTML / blog index.
Custom markdown: unified’s ecosystem also includes lots of packages to render special types of markdown (like markdown tables, for example). For example, I made Entangle to render interactive blocks of text.

Wrap-up

Making this bear-to-blog system work took me about 3 hours at first, but with a little planning, I believe you can get it working in under an hour.

Thanks to the open nature of Bear, integrations like this are fairly easy and I really hope others out there will start using TextBundle format. As of writing this post, it looks like the apps that actually use it are mostly in the Apple ecosystem… hopefully that changes soon.