What is “notion-site-generator”

My brother has been talking about making a website for a while now. He makes comics and animations — has been for years — and wanted somewhere to actually put them. A place to post his work, write about his process, maybe sell prints eventually. Every time we'd talk about it, I'd start explaining how it works — domains, hosting, CMSes — and I could see him check out within the first two minutes. He didn't want to learn any of it. He just wanted a website.

I looked at the usual options:

• WordPress is powerful but it's a whole thing to manage — plugins, updates, something breaking every few months.
• Squarespace and Wix work, but the moment you want to do anything slightly custom you're fighting the editor.
• Substack and Ghost are fine if you're just blogging, but he wanted a full site — a gallery for his comics, a separate section for animations, a blog where he writes about his work, a contact form.

And with all of these, his content lives on someone else's platform. They can change pricing, change features, or just go away. For someone building a body of creative work over years, that's a real risk.

The thing is, he already uses Notion for everything. Script drafts, panel notes, animation timelines, reference images — it's all in there. So I started thinking about whether I could just make his Notion the backend for a real website.

That's what Notion Site Generator ended up being.

How it works

You clone the template repo, connect it to Netlify, add two environment variables — your Notion API key and your root page ID — and give your Notion integration access to the root page. Netlify picks up the build command, runs the sync and build on deploy, and your site is live. No local setup required if you don't want to. The whole thing can go from zero to a live URL without opening a terminal on your own machine.

Under the hood:

• The sync script pulls everything from Notion via the API — content, properties, images — and saves it locally as JSON and Markdown files.
• Images get downloaded too, so nothing is dependent on Notion's CDN staying alive.
• Next.js builds a fully static site from that local cache — plain HTML, CSS, and JS. No server, no database, nothing dynamic at runtime.

For my brother, the day-to-day looks like this: he opens Notion, adds a new comic to his gallery or writes a blog post, marks it as published, and triggers a redeploy on Netlify. That's it. He hasn't touched a terminal once.

The Notion workspace structure

The workspace is organized into a few top-level sections:

• Home Page — what your visitors see first, made up of sections you arrange directly in Notion.
• Navbar Pages — pages like About or Contact that show up as navigation links.
• Collections — where all your content databases live.
• Settings — everything about your site's configuration, branding, and code injection.
• Authors — a database storing profile information for anyone publishing on the site.

The Settings section is where most of the power lives. Inside it:

• Main Configuration — site title, description, logo, favicon, OpenGraph image, default color theme, and navigation mode.
• General Configuration — feature flags like whether the newsletter is enabled, whether to show the logo in the navbar, which Google Font to use.
• Advanced Configuration — lets you restrict which color themes users can switch between.
• Social — add your profiles one row at a time: GitHub, Twitter, Instagram, YouTube, whatever you use.
• HTML Head Code and CSS Styling — drop code blocks here and they get injected directly into the site's head. Analytics scripts, ad tags, custom styles, anything.
• Collection Page Extra Sections — a sub-page for each collection where you define sections that appear on every single entry in that collection automatically.

Collections — the core of it

Collections are the most powerful part of the tool and worth understanding properly.

A collection is just a Notion database — but when you place it inside the Collections folder and configure it, it becomes a full content section of your site with its own pages, its own URL structure, its own RSS feed, and its own display settings. My brother has three: one for his comics, one for his animations, and one for his writing. Each one is completely independent.

Every item in a collection is a Notion page with a set of properties:

• title — the item name
• slug — URL slug, auto-generated from the title if left blank
• description — short summary shown in list and card views
• thumbnail — cover image
• tags — for categorization and filtering
• link — optional external URL
• button_text — custom label for the CTA button
• order_priority — controls sort order; higher numbers appear first
• author_username — links the item to a row in the Authors database
• video_embed_url — optional video embed for the item page
• status — draft, in review, or published. Only published items appear on the site.

The body of each Notion page becomes the full content of that entry — and it supports everything Notion supports: headings, paragraphs, images, code blocks, callouts, quotes, bullet lists, numbered lists, toggle blocks. My brother writes his process notes inside the comic entries directly in Notion, with images embedded inline, and it all comes through.

What makes collections genuinely powerful is that each one is independently configurable. In Settings > Configure Collections you can:

• Toggle an RSS feed on or off per collection (available at /rss/[collection-name])
• Show or hide a newsletter signup section on collection pages
• Show or hide a contact section on collection pages

And then there's Collection Page Extra Sections — the part that took the most thought to build and ended up being one of the most useful features. For each collection, you define sections that get appended to every single entry page in that collection. My brother has a "More Comics" dynamic section that shows up at the bottom of every comic page, pulling the latest items from his comics collection. He set it up once in Notion and it appears everywhere automatically. You can put any of the ten section types in there — related content, a CTA, a newsletter signup, an ad unit, whatever makes sense for that collection.

Section types

Each page is built from sections — inline databases placed in Notion where you pick a type and fill in the properties. Ten types in total:

• info_section — static content: heading, body text, optional image or video, optional CTA button. Point it at a video file and it renders as a looping silent video. My brother uses one at the top of his homepage with a looping animation clip.
• dynamic_section — pulls from a collection and displays it on the page. You pick the collection, the number of items to show, and the view type.
• html_section — renders arbitrary HTML inside a sandboxed iframe. Ad units, widgets, embed codes, custom interactive elements. You drop your HTML into a code block inside the Notion row.
• iframe_section — embeds an external URL directly: Calendly, Typeform, Google Maps, Figma files, CodePen.
• video_embed_section — YouTube or Vimeo embeds that play inline on the page.
• media_section — full-width image or looping background video.
• mailto_section — a contact form that opens the user's email client with a pre-filled subject and recipient. No backend, no third-party service.
• newsletter_section — links to your signup form.
• gap_section — controlled vertical spacing between sections.

For dynamic sections, there are six view types:

• list_view — full-width list with image, title, description, and date
• card_view — three-column grid with image, title, description, and tags
• grid_view — three-column image grid with title overlay
• minimal_list_view — text only, title, description, and date
• tiny_card_view — five-column grid of small square thumbnails, no text
• big_card_view — two-column grid where the gradient background is automatically extracted from each item's dominant color

His comics use grid view. His animations use big card, which looks great with strong thumbnail images. His writing uses the minimal list. They look like completely different sections of a site without a line of custom CSS.

Search, themes, and navigation

• Search — built-in Cmd+K command palette that searches across all collection items by title, description, tags, and collection name. Fuzzy matching, relevance scoring, index built at compile time. No external search service.
• Themes — eight color themes: light, dark, blue, purple, pink, red, green, and cream. Users can switch from the settings menu and the choice persists in their browser. You can restrict which themes are available from Advanced Configuration if you want to lock it down.
• Navigation — two modes, a top navbar or a left sidebar, toggled from Notion. My brother uses the sidebar because it suits a portfolio layout better and keeps his collection links always visible.