If you're thinking about creating a blog, you're probably wondering which CMS (Content Management System) to use. Notion, a popular all-in-one workspace, can be a great option for bloggers due to its flexibility and ease of use. In this post, we'll explore how to implement a blog with Notion as the CMS and NextJS framework.
TLDR: Check out this wonderful NEXTJS & Notion Starter Pack to get you up and running in no time.
Notion as CMS
Notion is a great tool for creating and managing content. With its drag-and-drop interface, you can easily create pages, databases, and tables. As a CMS, Notion allows you to create pages for each blog post, and databases to store all your content. You can also use Notion's built-in features such as tags and filters to organize your content.
To use Notion as a CMS for your blog, you'll need to create a public page to use as homepage. You can employ a database to hold your articles. Make sure to include all the necessary fields such as title, date, author, and content. You can also add additional fields for images, tags, and categories. Here an example page and DB with the base properties you’ll need.
NextJS as Frontend (and backend) Framework
NextJS is a popular React-based framework that allows you to build server-side rendering (SSR) and static websites. It has many features that make it a great choice for building a blog, such as automatic code splitting, optimised images, and dynamic routing.
NextJS allows you to use static site generation (SSG), to produce optimised static HTML files for each page at build time. This can greatly improve the performance of your blog, as it doesn't require server-side rendering for every request.
export const getStaticProps: GetStaticProps<PageProps, Params> = async ( context ) => { const rawPageId = context.params.pageId as string try { const props = await resolveNotionPage(domain, rawPageId) return { props, revalidate: 10 } } catch (err) { console.error('page error', domain, rawPageId, err) // we don't want to publish the error version of this page, so // let next.js know explicitly that incremental SSG failed throw err } }
Deploying your blog
The default recommendation for hosting NextJS remains to be Vercel. In their website you’ll fine all the guidelines that you need to get it up and running in no time.
If you’re already using AWS for your hosting other projects you can deploy this with Amplify since it has many great features that make it easy to deploy your NextJS and Notion blog. You can use Amplify to create a CI/CD pipeline that automatically builds and deploys your app whenever you make changes to your code or content. Amplify also provides features such as SSL support, custom domains, and CDN caching to ensure your blog is fast and secure.
Conclusion
Creating a blog with Notion as the CMS and NextJS as the frontend framework can be a great choice for bloggers who want a flexible and easy-to-use platform. Notion's drag-and-drop interface makes it easy to create and manage content, while NextJS's features such as SSR and SSG can greatly improve the performance of your blog. By deploying your blog to Vercel or another hosting provider, you can easily share your content with the world.
Future Improvements
No blog is complete without an easy way to carry out a conversation with your community. Some options could be re-blogging your content in Medium and keeping the comments only there. A different approach could use Notion’s comments feature and expose them directly in the blog page.
PD: Thanks to Travis Fischer for his great Next.js Notion Starter Kit that helped to get this blog up and running in no time.