🛠

Building a website in Notion

Since late-2019, Notion has become my go-to place for everything.

I use Notion for business purposes at Failory and educational purposes at university.

Though there're some things I dislike about the app (such as it's uptime issues and how slow it charges), it has made me much more organized and productive, something I hadn't achieved with other document and task apps.

That's why when, a week ago, I came up with the idea of building a personal site, I couldn't avoid thinking about Notion, which has lately become a commonly-used visual website builder.

Go on reading to learn about the pros and cons of Notion as a website builder, find out the existing hosting alternatives (and why Super is the best one) and get into how I built my own site (as well as a list of other sites for inspiration).

Pros & Cons

Notion hasn't been created as a website builder, but some tools built on top of the app can convert it into one.

As every website builder, Notion has some pros and cons.

Pros of Building a Site in Notion

  1. If you already use Notion, you won't have to pay and use a new tool to build the site. Everything will stay within the same place.
  2. You can quickly build the site. You just have to add some items, like text, images and callouts, and you'll have a nice-looking site. It took me 2 hours to build mine, including writing the copy, getting the images and organizing the information on Notion.
  3. You can quickly edit things. If you use Notion, you probably already have the app opened. With a few clicks and no login required, you're already on your website's editor.
  4. You can edit and add pages with your phone. Most website builders don't have an app yet.
  5. Notion looks nice. Even if you're not good as design (like me), you can build something nice-looking using Notion's features and no custom CSS.
  6. You don't have to start from scratch. Notion has many defined styles for each of their items which, once again, makes the process of building the site faster.
  7. If you're not really creative, you can duplicate other people's websites and just change the information (as you can do with templates on other website builders). Here, here and here are some Notion website templates.
  8. Pages are static, so they charge super fast. Here's the Google PageSpeed for the homepage of this website:
  9. image
  10. It's great in terms of SEO, as the pages charge super fast and you can customize meta titles and meta descriptions (using Super). This is one of the most common concerns people have when considering building a site in Notion.
  11. It can be free. Super costs $12/mo, but you can follow Fruitionsite's tutorial and set up a free hosting. Note that you won't have all Super features.

Cons of Building a Site in Notion

  1. In Super (as for now), you can chose one social sharing image which will be used for all the pages within your site.
  2. URLs look horrible unless you change them, page by page on Super. Every time I publish a new blog post, I need to enter to Super and set up what they call a "Pretty URL".
  3. At some point, you're limited. While this isn't a Notion-only con, Notion is definitely more limited than Webflow and other no-code website builders.
  4. If you want to customize your page a lot and achieve things like this, you'll need to understand HTML and CSS.
  5. It's hard to make it look nice in mobile. It different in desktop and mobile, so for each section you add, you should check how it looks in your phone.

How to Host a Notion Website

Before designing your site, you may want to set up the hosting of it.

To do so, you first need to buy a domain or create a subdomain.

Then, you need to decide between the existing Notion hosting apps.

Once done, you'll have to follow the app's tutorial to set some specific DNS records in your domain.

Notion Hosting Alternatives

I've found and tried 4 of them:

  • Fruition: It's a free and open source way of hosting Notion sites. The tutorial is really descriptive and easy to follow, and just takes 10 minutes to get it done. However, you'll lack of some Super features.
  • Hostnotion: It's $5/mo and it doesn't allow neither pretty URLs nor custom CSS.
  • Notion2Site: It's $8/mo and it lacks of the same features Hostnotion does.
  • Super: It's $12/mo but it includes some key features like defining meta titles and descriptions (for SEO purposes), customizing the URLs of the pages within your site and customizing the CSS.

I went with Super because:

  • It has some unique features.
  • The UX is amazing.
  • I wanted to avoid the work of setting up the hosting on my own.
  • It is being constantly updated and improved.
  • There's a great community and support behind.
  • I like the company and the founder's work.

How to Design a Notion Website

I took a lot of inspiration and ideas from other people's websites. Here and here are two great lists of Notion-powered websites.

In my case, I decided to use many emojis and images. Callouts were also really useful to remark some information. I only used one database, but amazing things can be built with them, so I encourage you to include some.

Beware about mobile responsiveness. Your site may look completely different on mobile than what it looks in desktop.

🔥

I think you're now ready to build a Notion-powered site.

Date: February 13