How we built our blog with Notion and ButterCMS
✍🏻

How we built our blog with Notion and ButterCMS

At SeekWell, we run on Notion:

  • Knowledge base (including internal development docs)
  • Task management (personal to-do database)
  • Roadmap
  • Content management (i.e. a database of content ideas)

Naturally, when we went to launch our blog, I looked for a way to do it thru Notion. We were already writing the drafts and storing ideas there, we just needed an easy way to publish. Here's what we came up with:

  1. Go to the Notion page in Chrome using incognito, e.g. this one)
  2. Open dev console (F12 or right click → inspect) and run the code below
  3. var n = document.querySelectorAll('.notion-scroller.horizontal')[0]
    var editable_elements = document.querySelectorAll("[contenteditable=true]");
    for(var i=0; i<editable_elements.length; i++)
    editable_elements[i].setAttribute("contenteditable", false);
    n = n.outerHTML.replace(/\/image\//g, 'https://www.notion.so/image/');
    copy(n)

    image

  4. Go to Butter and click "Write new post" (SeekWell uses a Flask backend, check out how to set up Butter for it here)
  5. Click "Source code"
  6. image
  7. Paste in Notion HTML
  8. Add the following CSS to your blog template (you only need to do this once)
  9. <style>
    body {
        line-height: 1.5;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
        -webkit-font-smoothing: auto;
    }
    </style>
    

That's it! Feel free to drop me a note on Twitter if you get stuck.