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
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.sohttps://www.notion.so/image/'); copy(n)
JavaScript
3.
Go to Butter and click "Write new post" (SeekWell uses a Flask backend, check out how to set up Butter for it here)
4.
Click "Source code"
5.
Paste in Notion HTML
6.
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; }
CSS
That's it! Feel free to drop me a note on Twitter if you get stuck.