Power your blog with Notion and host for FREE with Netlify
Host a GatsbyJS Blog (with Notion as a CMS) for $0 with Netlify
This is my preferred option. You may want a lightweight and cheap CMS (and let's be honest, you're probably drafting your content in notion anyway), but with your own personal touch. You're unique and want to express yourself, and having control over the styling is important to you.
Complete control over how you want to present your content
Extend wherever you like with custom code
High SEO (searchability on google)
Requires some understanding of code
Most likely a weekend project if you are applying detailed customization
Your own domain
Coding Knowledge: Enough to know where a chunk of code starts and ends)(
First, some background about . Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. Building in Gatsby means that your website will be running on the latest technologies, and be able to pull data from anywhere. In this article, I'll be demonstrating how to pull data from Notion.
Integrating Gatsby with Notion
Step 3: Add this piece of code into your gatsby-node.js file (This piece of code took me a while to nail down, because in the , the assumption is made that we are only querying one table of data to load into the site. For me, I want to also load in data for previous issues of my newsletter, so this is how you would handle that case.)
Key information to understand about this code:
This code is telling gatsby to create new pages only for posts that are published, and are newsletters or articles.
In, we can determine where we want the newly created pages to resolve
In, we are determining with which template we want the newly generated pages to be handled by (and have the appropriate styling, etc.)
Step 4: Create the following items: (Your starter should have existing pages that are similar, so I will just mention the specific code you need for the notion integration to work. You can beautify the look and feel by borrowing your starter components and styling)
blog.js (in src/pages) - this will be the page where you can see a list of blogs
subscribe.js (in src/pages) - this will be the page where you can see a list of newsletters
blogPost.js (in src/templates) - this is the template which all new blogs/newsletters will be following.
postItem.js (in src/components) - this is the component to determine the look and feel of each new 'row' of blogs items
Optional: Use this code instead if you want to also show the cover image for your blog posts
newsItem.js (in src/components) - this is the component to determine the look and feel of each new 'row' of newsletter items
Recommended: Add this code to your global CSS file, to ensure optimal mobile behaviour
Testing it Out!
You should now be able to runin your terminal and be able to see data populate your pages.
Pushing Code to Production
Cool Things You Can Do
These are some cool integrations I've set up for my site, let me know if you'd like a follow-up guide!
Columns and embeds break responsive design
Things I'm Working On