How to use Notion as a CMS for your custom site and host for FREE cover image
Guide

How to use Notion as a CMS for your custom site and host for FREE

This is a living document, details may be updated as improvements are released. Published: May 07, 2020 Updated: June-12-2020 ➥ More Ways To Build A Blazing Fast Website For Free Video Step By Step Walkthrough (10 Mins)!
Host a GatsbyJS Blog (with Notion as a CMS) for $0 with Netlify
Why?
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.
Pros
Complete control over how you want to present your content
Extend wherever you like with custom code
Detailed Analytics
High SEO
Cons
May require some understanding of code
Most likely a weekend project if you are applying detailed customization
Requirements
Notion.so account FREE
Your own domain ~$10/year
GitHub account FREE
Netlify account FREE
Coding Knowledge: 2/5 (Enough to know where a chunk of code starts and ends)
Disclaimer: I had little to no knowledge of coding in React before I started this project, and I learned a lot while testing things out. Building my entire conradlin.com website took me between 8-10 hours, but only because I was very particular about styling. I truly believe anyone can learn to code - and this is a fun way to get started. Don't be afraid to try!
Getting Started
First, some background about Gatsby. 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.
First Steps
Pick your preferred look and feel for your website. This tutorial will teach you how to pull Notion data using any starter template: https://www.gatsbyjs.org/starters/?v=2
You can find the resources I used by going to https://conradlin.com/info/
Set up your development environment (this is easier than you think): https://www.gatsbyjs.org/tutorial/part-zero/
Important: For now, only Node.js v12.14.1 works with this integration without engaging in additional configuration. If you want to learn more details about ES modules, and why it's more complicated to set up in later Node.js versions, you can check out this resource: https://blog.logrocket.com/es-modules-in-node-today/ If you already installed Node.js, check the version by running node -v in your command prompt. If you have a later version, please uninstall and re-install v12.14.1
1.
Install Node.js v12.14.1
2.
Install code editor: VS Code Recommended
3.
Install Git Mandatory
4.
Install Gatsby CLI Mandatory
5.
Create a new site, referring to one of the starter templates
Note: I used to recommend installing Yarn (package manager) as well, but after extensive testing, it seems like yarn has some compatibility issues with this setup. Whenever you hear or see me refer to yarn commands in my video tutorial, use the default commands instead (gatsby or npm).
Integrating Gatsby with Notion
Building in gatsby is akin to working with building blocks. You can use my gatbsy-notion-demo which to get started quickly (with the integration built-in), but I recommend you follow below so that you understand how to make any gatsby starter into one that is notion powered.
Step 1: Install the following plugin by following the steps in this link: https://github.com/mayneyao/gatsby-source-notion-database
If you are not using yarn as your package manager, run the following code instead for the Install step: npm install gatsby-source-notion-database
Step 2: Add this piece of code into your gatsby-config.js file (You should change the link for table to refer to your own notion table link, however I recommend you stick with my link in the setup stage so you can verify everything is working)
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 starter kit, 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 path, we can determine where we want the newly created pages to resolve
In component, 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/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 run gatsby develop in your terminal and be able to see data populate your pages.
Navigating to http://localhost:8000/blog should showcase a list of all blogs
Clicking any of the entries should lead you into the detailed blog articles
Navigating to http://localhost:8000/subscribe should showcase a list of all newsletters
Clicking any of the entries should lead you into the detailed newsletter entries
Pushing Code to Production
The gatsby official wiki explains this much better than I can, so you can follow the guide here: https://www.gatsbyjs.org/docs/deploying-to-netlify/
Netlify has a fantastic free tier that will be more than enough for your needs as a personal site.
Once your netlify site is deployed, check it out, and link your custom domain to netlify: https://docs.netlify.com/domains-https/custom-domains/
Due to the popularity of this guide, it seems like Notion has rate-limited database lookup requests from Netlify. I recommend bypassing this by building your site locally, and then deploying it to your hosting provider. For now, I'm deploying to a cloudflare worker - but I'm searching for a better workaround and will continue to update.
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!
Set up a netlify deploy widget on your phone with IFTTT to update your website whenever you add a new blog (leveraging buildhooks);
Add a comments section at the end of your blogs;
Add a subscribe form for your mailing list with convertkit.
Known Issues
June 11 2020 After Notion's inline emojis update, emoji support has stopped working
Things I'm Working On
Starter packages for Co-x3 Patrons with custom styling, comments integrations, and more.
Pre-process images from notion by using the Sharp library (typically available for local images only), which automatically process images to be performant, with features like lazy-loading.
If you're a software developer and want to help improve this project, please do write in and let me know! Kindly reach out at lets.talk@conradlin.com

Did this resonate with you?