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)
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:
Go to the Notion page in Chrome using incognito, e.g. this one)
Open dev console (F12 or right click → inspect) and run the code below
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'); copy(n)
Go to Butter and click "Write new post" (SeekWell uses a Flask backend, check out how to set up Butter for it here)
Click "Source code"
Paste in Notion HTML
Add the following CSS to your blog template
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; }
That's it! Feel free to drop me a note on Twitter if you get stuck.