How to build a blog with Notion and Super! (Comprehensive guide and template)

TL;DR

Use two linked Notion databases—essays and categories—connected by a relation property so category pages automatically list the right posts.

Briefing Cornell Notes

Briefing

A Notion blog can be turned into a fully navigable website by pairing a structured Notion template with Super, which renders the Notion pages as a public front end and lets creators restyle everything with themes, page settings, and CSS/HTML. The core move is to keep Notion responsible for content and layout blocks (sidebars, footers, synced elements, database-driven pages) while Super handles the website experience—URLs, navigation, SEO toggles, and visual customization.

The workflow starts with the “blog starter” template inside Notion. It uses two linked databases: one for essays (blog posts) and one for categories. Each essay page includes properties such as a published date, a category relation, a status select (to track whether a post is in draft/published stages), a summary, a featured checkbox, and a cover image, plus the main body content. Categories are separate entries with a title and icon, and each category links back to the essays database through a linked database view that can be filtered—such as showing only essays where the category relation matches “technology” and the status is “published.”

Templates inside those databases act as blueprints for consistent page structure. A category template includes a linked essays view filtered by the category title and published status, while the essay template provides a writing area plus the same sidebar and footer layout. This is reinforced with synced blocks: the sidebar and footer are created as synced blocks so the same design stays consistent across the original template pages and every generated page that copies that synced block. When content is edited in one synced instance, all linked instances update.

Before switching to Super, the Notion side is configured for public access. The front page is shared to the web so that all pages under it become public; if access needs to be restricted later, Super and Notion sharing controls can be adjusted (including turning web sharing off and using restricted access). On the Super side, the copied Notion link becomes a new site, where pages can be edited individually, SEO can be set per page, and password restrictions can be applied.

Super then provides website-level controls: generating pretty URLs via “sync URLs,” selecting themes (including dark/neutral/blackout options), and building a top navigation bar that links to internal pages or external URLs. Creators can customize colors, navbar behavior (like scroll visibility and shadow), and database rendering by enabling visible properties for database collections.

Finally, Super’s code injection enables deeper styling. Global CSS can change site-wide colors using Notion’s style variables (for example, overriding root background/text defaults and highlight colors). Page-specific CSS can refine components like callouts, collection headers, gallery borders, quote block styling, and spacing. Even Notion toggles can be hidden on the website by targeting a specific block ID with a CSS selector pattern (using “#” block IDs and “.notion-toggle-summary” rules). The result is a repeatable system: structured Notion databases generate the content and navigation logic, while Super’s rendering and CSS turn it into a polished website.

Cornell Notes

The template-to-website approach relies on two Notion databases—essays and categories—linked through a relation property, with filters that show only published content. Database templates provide consistent page structure, while synced blocks keep sidebars and footers identical across all generated pages. After sharing the Notion front page to the web, Super imports it as a site, where pages get pretty URLs, per-page SEO controls, and optional password restriction. Super’s theme settings and code injection (CSS/HTML) let creators restyle the site globally and per component, including callouts, collection headers, quote blocks, and even hiding specific Notion toggles by block ID.

How do the essay and category databases work together to drive navigation and filtering?

The essay database (labeled “essay index”) includes a relation property named “category” that points to the categories database (labeled “category index”). Categories then include a linked database view back to essays, filtered so only essays whose category relation matches the current category and whose status is “published” appear. This means clicking a category effectively shows the correct subset of posts without manually curating lists.

What’s the practical difference between using a select property vs a relation property for tagging?

Tagging can be done either with a select property (a simple dropdown like a status pipeline stage) or with a relation property (a link to another database entry). In the template, categories are handled via relation because categories are separate records with their own title/icon and linked essay lists. Status uses a select property to track workflow stages such as “published,” which then becomes part of the filtering logic.

Why do synced blocks matter for building a website from Notion?

Synced blocks keep shared layout elements consistent across multiple pages. The sidebar and footer are placed inside synced blocks, so when the synced block content is updated in one location (for example, the “original” synced block), every page that includes that synced block updates automatically. That consistency is especially important for website navigation and repeating UI like sidebars/footers.

How does Super turn Notion pages into a real site with URLs and navigation?

After signing up, Super creates a site using the shared Notion link. It offers “sync URLs” to generate pretty URLs for each page. Super also provides a page list where each page can be edited for SEO and password restriction. A custom navbar can be added by linking to existing pages inside the site or to external URLs, such as Twitter or YouTube.

What kinds of styling changes can be made using Super’s CSS/HTML code injection?

Super supports global CSS (affecting the entire site) and page/component-level tweaks. Examples include changing global background and text colors via root variables, adjusting highlight colors, removing collection headers (e.g., hiding “collection header” and borders), restyling callouts (padding, margins, hiding icons), centering and enlarging quote blocks, and controlling typography via HTML font-size. Styling can also be targeted to specific Notion components using CSS selectors.

How can a Notion toggle be hidden from the website without removing it from Notion?

The workflow is to copy the block link from Notion, extract the block ID after the “#”, then use a CSS selector in Super like “#<blockID> .notion-toggle-summary” to hide the toggle summary on the rendered site. This removes the toggle’s visible UI for viewers while keeping the content accessible in Notion.

Review Questions

How do relation properties and database templates combine to ensure only “published” essays appear under each category?
What role do synced blocks play in keeping a sidebar and footer consistent across all generated pages?
Which Super features handle pretty URLs, and which features handle visual styling (themes vs CSS injection)?

Key Points

1
Use two linked Notion databases—essays and categories—connected by a relation property so category pages automatically list the right posts.
2
Rely on database templates inside Notion to standardize page layout for categories and essays, reducing manual formatting work.
3
Place shared UI elements like sidebars and footers inside synced blocks so updates propagate across all pages.
4
Share the Notion front page to the web before importing into Super, then use Super page-level controls for SEO and optional password restriction.
5
Build a top navigation bar in Super by linking to internal pages (generated from Notion) or external URLs.
6
Use Super’s theme settings for quick styling, then switch to CSS injection for precise control over callouts, collection headers, quote blocks, spacing, and colors.
7
Hide specific Notion toggles on the website by targeting the toggle’s block ID with CSS selectors in Super.

Highlights

Category navigation is driven by a relation between databases plus filters that require both matching category and a “published” status.

Synced blocks are the mechanism that keeps sidebars and footers consistent across every generated page derived from the template.

Super’s “sync URLs” turns Notion pages into clean, navigable website URLs without manual URL building.

CSS injection can hide Notion UI elements (like a specific toggle) on the website while leaving the content intact in Notion.

Topics

Notion Blog Template
Super Website Builder
Synced Blocks
Database Relations
CSS Customization