My blogging workflow feat. Bear App

My blogging workflow feat. Bear App 🐻‍❄️

My blogging workflow feat. Bear App 🐻‍❄️

Background

I have been searching for a good workflow to publish tech blogs from a notes editor. I want to keep Notes editor as a single Source of Truth for the content and just some pipeline to publish it to blogging site. Unfortunately, there is no easy single button solution available for this. Main requirements that I was looking for were:


Requirements:

  1. Keeping the Notes Editor as the main place for editing.
  2. Easy way to update the blog for corrections.
  3. Ability to add images and code snippets to the blog.
  4. Customizable theme for the blogging site
  5. Blogging platform with ability to comment

🐻 Why Bear App for Journaling

I have been using Bear App for all the note taking, daily journaling and meeting notes. I likes its minimalist UI and the ability to write in direct markdown. While many of the other editors (like Obsidian / Notion) also provide these features, Bear has all the basic features which I look for in a notes taking app.


While writing this blog, I realized the need to switch between my laptop and phone to make the most of my free time for writing content on the go. Bear App uses iCloud for data persistence and syncs data quite efficiently. While other good editors likely offer similar syncing, I find Bear's pricing to be very competitive.


📜 Chosing a blogging Site

Medium vs SubStack vs Wordpress vs Blogger

To get your content discovered online, you need a blogging site to publish it and recommend related articles to increase traffic.


Medium and Substack

I really like Medium’s clean interface for viewing and sharing content. However, on the writing side, Medium only provides a single UI WYSIWYG editor. They used to offer a programmatic way, but have stopped furnishing access tokens, so the editor-to-blog workflow is no longer possible.


Another limitation is that these platforms don’t offer an HTML editor. Porting articles from the Notes editor to a blogging site becomes difficult. I've tried directly copy-pasting rich text from the editor to Medium/Substack, which sometimes works but isn't a 1:1 mapping. A major downside is that if the article contains both text and images (which is usually the case), the copy operation only copies the rich text, ignoring the image content. You would then need to manually insert the images. This becomes even more cumbersome when re-editing different parts of the blog and syncing it back to the blogging site.


Wordpress and Blogger

These two are the conventional blogging platforms which I first remember trying out 15 years back. While the initial work of setting up a design upto your liking might take a bit of time, the good thing is they are much more flexible in design and allow HTML editing for blogs.


Bear App has a blog (and Wordpress also has one) where they were able to integrate with Wordpress using textbundle format for import / export between the two. Textbundle is a format which can export the text and images together in a zip like format. However, not many blogging platforms support this format. Even with wordpress, the support is not on web but only for ios app versions. Even with ios version, i felt two major challenges with using it.


Limitations of Text Bundle

  1. Images are full-res in text bundle and they cross the blog width boundaries (one needs to manually fix the width later)
  2. Editing the article and export would recreate a new blog on Wordpress rather than updating the older one.

I also tried out ‘Edit HTML’ box within wordpress instead of using textbundle. But Bear App’s HTML doesn’t render very well with the overall wordpress HTML and the result is an empty page.


These limitations led me to think of other alternatives. Then I started experimenting with Blogger platform. And gradually it started hitting all the checkboxes that i required.


Features of Blogger Platform

  1. Blogger’s HTML box integrates well with Bear App’s exported HTML
  2. Redirection from my personal domain to Blogger is free - which is amazing! (Tumblr / Wordpress charge for this).
  3. Code Snippets and Notes boxes (like this one) also rendered correctly
  4. After re-editing, I just needed to export HTML and re-paste it in Blogger’s HTML box and I was done.

⚙️ Workflow Steps


From Bear’s side, when you want to export the article, go for Export HTML and click the ‘inline base64 images’ so that a single html file has all of your content.

Caution

One downside of this is that the images are rendered from HTML rather than from the CDN. This can make the page slow but I haven’t seen much difference as long as the image is within 1MB in size.



One additional task which I had to do was to additionally add a banner to the blog article in the Blogger HTML. This image will be shown / rendered on the blog home page (where it shows the blog snippet) as well as when you share it on social media (this image gets rendered). This is a single line HTML <noscirpt><img/></noscirpt> which needs to be added at the top.


Overall HTML looks like:

<!--This noscript section is to display the banner image for the post on Blog's home page as well as on LinkedIn's posts.-->
<noscript>
<img src="https://raw.githubusercontent.com/prat0318/prat0318.github.io/refs/heads/master/public/images/blogging_workflow_1.JPG" alt="featured image" />
</noscript>

<!--This section below is just copied and paste directly from Bear HTML export-->
<html lang="">
    <head>
        <title>My blogging workflow feat. Bear App 🐻‍❄️</title>
        ...

Another point to note is to use Jump Breaks. These are helpful to show multiple posts on your home page. When I wasn’t using them, Blogger was only showing the featured post and the remaining were collapsed under ‘More Posts’ link. This is more prevalent in our case because of the inline images increasing the size of the HTML. Jump breaks in Blogger can be achieved by adding <!— more —> after the title section and few lines of the first parah. Good thing about Bear editor is that you can put HTML comments and they are also persisted in the HTML export.


This is how I wrote my first paragraph (below). Now if you visit https://blog.prat0318.com, this post will only show text snippet until …available for this (due to the Jump break added). Make sure not to add any inline image before the Jump break as that will make the HTML heavy making the jump break useless.

I have been searching for a good workflow to publish tech blogs from a notes editor. I want to keep Notes editor as a single Source of Truth for the content and just some pipeline to publish it to blogging site. Unfortunately, there is no easy single button solution available for this. <!-- more -->Main requirements that I was looking for were:

I also played a lot with drawing tools which I plan to integrate closely with my blogging workflow. The two which I really like are Apple’s Freeform drawing tool and LucidChart. I also have some thoughts on how I used AI to refine my writing. I plan to write about them may be in a future writeup.

👋 Conclusion

I firmly believe that being good at technical writing is crucial for growing as a Senior Engineer. The only way to improve is to write more. Don't get bogged down waiting for the perfect workflow; start writing now. I wish I had started earlier, but better late than never. I hope to continue writing at a consistent pace as 2025 progresses. Adios.


Footnote:

  • Banner Image drawn with Perplexity AI.

Comments

Post a Comment