Gatsby Starter Notion is a Gatsby.js starter kit that builds a static blog from content stored in Notion, using a Notion account token for access. It is a project by wonism, hosted on GitHub with 7 stars.
What is Gatsby Starter Notion?
Gatsby Starter Notion is a starter template for Gatsby, the React-based static site generator, that pulls blog content from Notion instead of a traditional CMS or Markdown files. It requires a NOTION_TOKEN environment variable set to the token_v2 value from your Notion session cookie, and it produces a static blog with support for comments, analytics, sitemap, and RSS. The starter is initialized with the Gatsby CLI command gatsby new my-blog https://github.com/wonism/gatsby-starter-notion.
Key Features
- Notion as content source — Uses the
gatsby-source-notion-contentssource plugin to fetch pages from Notion, controlled by the token stored in theNOTION_TOKENenvironment variable. - Disqus integration — The starter includes Disqus as the blog comment hosting service, allowing readers to comment on posts.
- Google Analytics — Google Analytics is pre-installed, so you can track visitor traffic by adding your tracking ID.
- Sitemap generation — An XML sitemap is generated for the site, aiding search engine indexing.
- RSS feeds — RSS feed output is included, letting subscribers follow the blog via feed readers.
- GraphiQL development tool — The dev server at
http://localhost:8000/___graphqlexposes a GraphQL explorer for querying your Notion-sourced data during development.
Who is it for?
- Developers who write content in Notion — They can use this starter to turn a Notion workspace into a static blog without a separate CMS, keeping the publishing workflow inside Notion.
- Gatsby users looking for a CMS-backed starter — This starter demonstrates how to wire a non-Markdown source into Gatsby via a custom source plugin and environment-variable authentication.
- Bloggers wanting a low-maintenance site — The output is a static site with pre-configured SEO features (sitemap, RSS) plus Disqus comments, reducing manual setup.
What can you do with it?
- Create a blog from Notion: Set the
NOTION_TOKENenv var, rungatsby new, and your Notion pages become blog posts served as a static Gatsby site. - Add engagement and measurement: The built-in Disqus comments, Google Analytics, and RSS feeds give the blog standard publishing features immediately after setup.
- Experiment with Gatsby data fetching: Use the GraphiQL endpoint on the dev server to explore how Notion content is transformed into GraphQL nodes.
How does it work?
- Obtain a Notion account and find the
token_v2value from your Notion cookies. - Export it as the environment variable
NOTION_TOKEN. - Initialize a new Gatsby project with
gatsby new my-blog https://github.com/wonism/gatsby-starter-notion. - Run
npm startfor the dev server ornpm run buildto produce the static site.
FAQ
What is token_v2?
token_v2 is a session cookie value from the Notion web app. The gatsby-source-notion-contents plugin uses it to authenticate against Notion's internal API, so you must copy it from your logged-in Notion session and set it as the NOTION_TOKEN environment variable.
Is Gatsby Starter Notion free?
The starter is open source on GitHub, so the template code itself is free to use. The only external services (Disqus, Google Analytics) have their own free tiers, but you need accounts for those if you want to enable them.
What does the starter include out of the box?
It includes Disqus for comments, Google Analytics for traffic, an XML sitemap, and RSS feeds. It also includes the /___graphql GraphiQL interface during development, and a standard Gatsby npm workflow with start and build scripts.
How do I add my own content?
Content comes from Notion. After you set NOTION_TOKEN, the source plugin fetches pages from your Notion workspace, so you edit posts in Notion and rebuild the site to publish. The exact options for the source plugin are documented on the gatsby-source-notion-contents repository page.
Can I host the built site anywhere?
Yes, since the build produces a static site, it can be deployed to any static hosting service, such as Netlify, Vercel, or GitHub Pages, though the README does not specify a preferred host.
