How To Create a Website Using Notion

The no-code way of building a website!

How To Create Website Using Notion

Do you want to create your website using Notion?

Designing a website can be a time-consuming and frustrating process. You need to know HTML and CSS, which takes years to master.

Every business needs a website today, and if you don’t have one, you’re missing out on an opportunity to grow your business.

In this article, we’ll show you how you can create a website with Notion for free in just minutes. You don’t need to be a designer to create beautiful websites anymore.

Let’s get started!

How To Create a Website Using Notion for Free

Notion is a free all-in-one productivity app that anyone can use to create a variety of different types of content. It comes with building blocks that you can drag and drop to create the content you want. 

When it comes to designing websites, there are some dedicated solutions like WordPress or Webflow. However, these are complicated and require technical knowledge to set up.

Notion, on the other hand, is a simple no-code website builder. Even though, it is primarily a note taking app, you can also use it for building your website without any coding.

You have two options: design the website and host it on the Notion domain or use third-party tool like Potion to host it on a custom domain.

1. Create Free Website Using Notion

The best thing about the free way is that it’s hosted on the Notion domain so you don’t have to worry about hosting or domain name. Also, this will mean that you won’t have a full-fledged website, with header and footer.

But there are some workarounds. For example, you can add links to internal pages in one row and arrange them in columns. It can serve as the header, and users can easily navigate to internal pages.

Header in Notion with navigation links

To create a Notion page, you can use blocks such as heading, text, and image as well as third-party widgets such as NotionForms and Comments Notion Widget.

contact form in Notion

After you’ve designed the page, you can click the Share button at the top and toggle the Share to web option. This will give you a link that you can share with your friends. If you’re on a Notion Pro or Team plan, you can submit the page to indexed by Google.

Notion share link to web

If you’re just making a simple website for fun or a personal website, this method is fine. For a professional website, you may want to try out a proper website builder such as Potion.

Let’s look at a step by step process of how to create your website on Notion using Potion.

2. Use Potion To Design Your Website

Potion is a Notion site builder that allows you to create beautiful websites using Notion. You can use it to make a simple blog or a full-fledged business site. It works by turning your Notion app into a CMS (Content management system).

This means you can fill out the content of your website in Notion while it takes care of the rest. It includes a number of features that allow you to easily customize various aspects of the website that would otherwise be impossible to do directly from Notion.

Here are some of the features that make Potion as one of the best Notion website builder:

  • Custom Domain – It lets you host your website on your own custom domain rather than the Notion domain.
  • Live Editor – Customize your website from the Potion dashboard and see the changes you make in real-time. 
  • Pretty URL – Lets you generate human readable URLs that are also SEO friendly.
  • Speed – Potion is optimized to load quickly and offer the best user experience. 
  • Custom CSS – Make changes to the appearance of the website with your own CSS and fonts.
  • Password Protect – You can create members-only pages by restricting access to the Notion page with a password.
  • Custom Font: Choose from a number of custom fonts and customize typography of your website.

There are other Notion website builders that provide similar services but they come with limited features or are not as easy to use.

What Types of Websites Can You Create Using Potion?

You can use Potion to create websites such as:

  • personal blog
  • design portfolio
  • resource website
  • knowledge base
  • landing page
  • resume
Potion website

The best part about Potion is that it comes with website Notion templates so you don’t have to design the website from scratch. You can duplicate the template to turn your Notion page into a website in minutes.

How To Create a Website Using Notion Using Potion

To start designing a website, go to the Potion website and navigate to the Templates section from the header. This is where you can view website demos. Go over all the templates until you find the one you want to use for your website.

Open the template in Notion and duplicate it in your workspace. Replace the template’s content with your own.

Potion duplicate template

Now again visit the Potion website and click on Create your site button in the hero section.

Potion Notion website builder

Deploy Your Site

On the pricing page, select a plan based on the number of websites or custom domains you want to set up. Since I need to set it up on just one domain, I will select the first 1-site plan. You can also select the free plan if you want to give it a test run before committing to a paid plan. The free plan come with some restricted features that you can later decide if you want to upgrade.

potion pricing page

If you’re purchasing a paid plan, fill out your card details, complete the payment and you’ll be taken to the dashboard. Click on Add New Site at the top right to fill out the site information.

Add new site to Potion

Give your site a name and paste the public Notion page URL. Make sure you paste the parent page URL and not the subpage.

At first, the site will be hosted on a Potion subdomain which you can later point to a custom domain. Enter any domain name of your choice and click on Continue.

fill in your notion site details

Congratulations! You’ve created your own website in less than a minute.

Customize Your Site

After you’ve created your site, click the Edit Site button and Potion will load it’s live editor to let you further customize your site.

potion notion site ready

The left sidebar list of all the pages in your website and some options at the top. The sidebar also has the default settings button where you can set defaults and all of the pages of your website will have these settings applied. If you want, you can also override the defaults by setting specific options on a page.

click the gear icon in the Potion customizer

You can click a specific page from the sidebar and then click the Page Settings button on the top right. In the Popup, you can set pretty URL for the page and SEO options for the page. You also get options to set custom font, font size, as well as background and font color for the page. Do this for all the pages of the website one by one to customize them on page level.

potion customizer

Add Header Menu

Header is one of the most important element of a website and Potion lets you easily add that. Click on the second option in the top left to open the nav menu settings and turn the “Use custom menu” toggle to on.

Use custom header menu for Notion site

Start adding pages that are subpages of your website template. If you want, you can change the order of the pages and customize the background and text color. Potion also lets you add a call to action button having a custom link to the header.

Add pages to the header menu

The website is almost ready and there are few settings to configure. Lets check them out.

Configure Site Settings

On the top left, click the gear icon to open the Site Settings menu. Here, you change the site name or the Notion website template that you want to connect to Potion.

click the gear icon in the Potion customizer

You can also find option to configure the custom domain for your website. What this option means is that you can host the website on your own custom branded domain instead of Potion subdomain. We have a dedicated guide on how to configure custom domain using Potion that you might want to check out.

Keep the search engine indexing toggle to On to let your site be shown in the Google search results. You can also mention a custom 404 page URL that’ll show up when a visitor tries to access a dead page on your site.

Next, you can upload your Site Icon in the favicon section and an image that’ll be shown when you share your website link on social media.

Add favicon and site image to potion website

Once you’ve completed all of the options, click the Save button to save the changes.

You’ll need to wait for few minutes before your site is live on the internet. You can check the status from the dashboard or visit the Potion subdomain you had set.

Now, whenever you add content to your Notion page, the same content will be updated on your website instantly. That’s it! Happy website building using no-code.

Wrapping Up: Notion Website Builder

To create a website using Notion, you have two ways.

You can choose the free option, but it will not give your website the professional feel needed.

The other option is to use a Notion website builder tool like Potion to create a professional-looking website in a matter of minutes. It allows you to use your own brand domain and you can customize your website using the live editor.

That’s it for this tutorial. I hope you found this tutorial helpful. If you do, please consider sharing it on social media to help out our blog.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission.

Share your love

Leave the first comment