A Step-by-Step Guide: Create a Website using Notion Sites
Notion Sites allow you to turn your Notion pages into a fully functional website with ease. Whether you’re a beginner or an advanced Notion user, this guide will help you build a sleek, professional-looking site using Notion in just a few minutes.
Publishing and customizing your Notion site is a straightforward process that enables you to transform your Notion pages into a professional website with a custom domain.
This guide will walk you through every step, from publishing your Notion page to adding favicons to customizing with headers and dark mode.
Notion Sites vs Notion Website Builders: Quick Comparison
Building websites has always been one of the most overlooked features of Notion. Well, not anymore! Notion launched its new product - Sites in 2024.
Notion has always provided the ability to build websites and web apps from it, thanks to its markdown support and APIs. While these features were never part of the product, they were available through 3rd-party tools.
In his tweet about the launch of Notion Sites, Ivan Zhao, the founder of Notion, says,
“..sometimes you need power & features but sometimes you just need a quick website, we want Notion sites to help you with the latter..”.
And for the former, where you want to build more customized and powerful websites, 3rd-party Notion website builders are a better solution. For example,
NotionApps is a growing web app builder, designed to build responsive apps from Notion without coding.
Super and Bullet are two popular Notion website builders, designed to build landing pages and blogs from Notion without coding
When to use what?
Notion Sites is best suited for use cases like,
Portfolios
Personal Websites
Personal Blogs
Guides/Documentation
Event Websites
Link in Bio
NotionApps is best suited for use cases like,
Client Portals
Directories & Catalogues
Community Hubs
Partner Apps
Internal Tools
Job Portals
Super/Bullet is best suited for use cases like,
Business Websites
Landing Pages
Portfolios
Blogs
Knowledge Base
Help Desk
Notion Sites: Complete Guide
Step 1: Publish your Notion Site
Open the page you want to publish: Navigate to the Notion page you want to make public and ensure it contains all the content you want to share.
Select Share at the top: Click on the "Share" button located at the top right corner of the page to open the sharing options.
Open the Publish tab: Within the sharing options, switch to the "Publish" tab to access the publishing settings for your site.
Select Publish: Click the "Publish" button to make your Notion page live on the web. This action transforms your Notion page into a publicly accessible website.
Select View site: After publishing, click on "View site" to see your Notion Site live on the web. Any changes made to the content of the published Notion page will automatically update on the site.
Step 2: Set a Theme
Open Share at the top of your published Notion page: Click on the "Share" button again to access the publishing and customization options for your live site.
Navigate to Publish > Site customization: In the sharing options, go to the "Publish" section and then select "Site customization" to access the theme settings.
Under Theme, select System, Light, or Dark: Choose your preferred theme from the options available. "System" will follow your device's theme settings, "Light" sets a bright theme, and "Dark" applies a darker aesthetic.
Note that additional theme options may only be available if you are on a Paid plan. As a Free plan user, you might not have access to all theme settings.
Select Publish changes: After choosing your theme, click "Publish changes" at the top of the screen to apply the new theme settings to your site.
Step 3: Customization
Most customization options for Notion Sites are available only on paid plans, including custom share preview, custom domains, personalized headers, favicon, navigation bar, and domain management features such as changing or assigning a homepage.
You can also set custom page titles and descriptions to enhance share previews and SEO. You can also integrate your page with Google Analytics.
3.1 Share Preview
You can control how your Notion Site appears when its URL is shared:
Default Share Preview: It is similar to the preview of your Notion page where your cover image, page title and description are visible.
Edit Share Preview: Hover over the preview and select "Upload image" to use your own image as the share preview.
If you want to use the reset it back default hover on the preview and select “Reset”, to change the preview again, select “Upload image”
Select Publish changes: After customizing the share preview, click "Publish changes" at the top of the screen to apply it.
3.2 Customize Your Favicon
To personalize the small icon displayed in the browser tab:
Default Favicon: The default favicon is the icon of your Notion page, if you have not set a page icon then the default would be the Notion logo
Edit Favicon: Choose between using your page's existing icon or by uploading a new image. The recommended favicon size is 280 x 280.
Check the URL bar: Verify your custom favicon appears correctly, then select "Publish changes" to save it.
3.3 Customize Your Header
You can customize the header of your Notion Site to display important information and navigation options:
Select Header: Within the Site customization options, select "Header" to begin customizing your header.
Toggle options on or off:
Breadcrumbs: Turn this on to show a navigation menu that helps visitors understand their location within your site.
Search: Enable this feature to allow visitors to search your Notion Site for specific content.
Duplicate as a template: Turn this on to let visitors duplicate your Notion Site as a template for their own use.
Notion watermark: Decide whether to display the "Built with Notion" watermark. Note that this can only be turned off if your site uses a custom domain.
Edit Navigation: Under the Navigation section, you can add links to other pages on your site, making it easier for visitors to navigate.
Select Publish changes: After customizing your header, click "Publish changes" at the top of the screen to save your updates.
3.4 Custom Domain
If you already own a custom domain, you can use it with Notion Sites by purchasing this feature as an add-on to your existing paid plan. To do this:
Go to "Settings & members": In your sidebar, navigate to "Settings & members."
Select "Sites": Choose the "Sites" option.
Next to Domains, select "New domain": Click on "New domain."
Select "Custom domain": Choose the "Custom domain" option and click "Continue."
Enter your custom domain: Input your custom domain and click "Continue" again.
Go to your DNS provider: You’ll be prompted to add a CNAME record for the domain you want to connect. Set the CNAME target to external.notion.site.
Add a TXT record: Copy the record name and value provided and add a TXT record for the domain.
Select "Verify": After adding these records, click "Verify."
Domain verification: Once your custom domain is verified, it will appear in your list of domains.
Remove Notion branding: Using a custom domain with Notion Sites also allows you to remove any Notion branding from that domain.
This ultimate guide explains how to embed Google Calendar in Notion using various methods. Improve your organizational skills and manage your tasks seamlessly within Notion.
This comprehensive guide explains how to delete or archive a teamspace in Notion, addressing common challenges and offering best practices for effective workspace management.
