Publish Bear notes to Github Pages
I have been using Bear app to note down everything for the last year. Naturally, I tried to write my blogs hosted on GitHub Pages using it. I thought it would be pretty easy to publish those blogs because both Bear and Github pages support Markdown.
However, I ran into few problems. The biggest one is about pictures. To insert pictures in a Markdown file. We use syntax like the following:
After exporting my notes into Markdown files from Bear, all the pictures became something like the syntax above. However, the paths of the image files is not useful. They only include the title of the note that picture belongs and the name of the picture file:
The references for the pictures worked inside the bear app but they do not work anymore after exporting. In order to make correct references, we first need to find out where does Bear stores all its files. I did some research online and found this comment on Reddit. Apparently the MAC version of Bear stores everything in the following directory:
~/Library/Group Containers/9K33E3U3T4.net.shinyfrog.bear/Application Data/
In this directory, there is a folder called Note Images and it seems very promising. However, there are folders inside it with names like 05A1C3A3-B1C0-43BA-A92C-6347FC30CCDF-1588-00007C77B4E641F6 as shown below:
This reminds me of the unique identifiers for each note in Bear. Is that means the pictures of each note stored together in a folder named using the note’s identifier? But using one of such identifiers to search returned no results. The names are not the unique identifiers for the notes. What would it be?
I decided to dig deeper by looking at its database file named database.sqlite. Obviously it is a sqlite database. After opening it I found there is a table called ZSFNOTE, checking the attributes I found one called ZTEXT and another one called ZUNIQUEIDENTIFIER. ZTEXT contains all the contents of the notes and they can be identified by the values of ZUNIQUEIDENTIFIER attribute. A ZTEXT value of the same note mentioned earlier containing pictures looks like below:
Turns out each image has its own identifier and use it as the folder name. Now I just need to replace the paths with the format Github Pages recognise. The static website generator behind Github Pages is Jekyll. Jekyll uses Liquid templating language for the paths. I liked the way of using different folder for different pictures and I just need to copy the same folders into my assets folder which is where I store pictures.
Another issue is the metadata for each blog post. Jekyll uses a YAML front matter block like the following:
---
layout: post
title: Blogging Like a Hacker
---
In my situation, I have a layout named post already setup in my _layout directory and I want to set each post’s layout as post. I can do that by using this front matter. Hence, I have to add this on my blogs written by Bear.
It would be helpful if I could automate the process of uploading the Markdown files to Github using Git. And rename the name of file into the Jekyll specific formats.
Fortunately, all the above things could be done by Python. I wrote a Python script here and I used it to upload this blog.