How to Make a Website on Notion [2024 Tutorial]
Notion is an awesome tool that’s great for managing projects, tasks, notes, teams, and personal life. However, did you know that you can also use it to create a website?
Several website builders have been developed on top of Notion, such as Super, Fruition, or Feather. However, the simplest way to create a Notion website is by publicly sharing a Notion page. Then, if you wish to add a custom domain or apply customized CSS, third-party tools can assist you.
The purpose of this post is to:
- Guide you through the process of building an attractive and polished Notion website, step by step.
- Provide three free templates that you can use to avoid starting from scratch.
But first...
Why Choose Notion for Your Personal Website?
Notion is the ideal choice for anyone looking to quickly and easily create a personal website. Here are a few reasons why:
- If you already use Notion, there's no need to learn a new tool (i.e. skip the learning curve)
- Activating the "Share to web" option allows you to publish your website in seconds. Changes are automatically updated, making it superfast.
- Notion's sleek interface ensures that your Notion website will also look sleek.
- If you have existing content in Notion, you don't need to migrate all your data. This is particularly helpful for blogs.
- No coding or code knowledge is required.
- You can get started quickly with a free template.
Notion also provides its own guide on how to build and ship a website. You can find it here.
Notion to Website
Define your sections
I recommend creating a list of all the elements you want to include on your website. Once you're done, group them into 2-3 categories at most. For example:
Things I write
- Blog
- Newsletter
Things I make
- Music
- Pictures
- Drawings
Things I like
- Podcasts
- Documentaries
- Music playlists
For each of these sections, define if they’d better belong to a database or to a page. For “lists” of things, we tend to privilege databases, but feel free to get creative.
Below are a few examples of layouts you can use for your own sections:
1/ Blog (database)
2/ Photos (database)
Pro tip: hide the title property in the Gallery view to make it look beautiful
3/ Podcasts recommendations (page)
4/ Music playlists (page)
Pro tip: feel free to embed Spotify playlists, they look gorgeous ✨
Design your Notion page
Now, let's get creative! Notion is not a "real" web builder per se, so you'll face some design limitations. Your goal is to create a beautiful display while ensuring that all elements are easily accessible and visible.
The cool thing about Notion is that it's super easy to try different arrangements — all you need to do is drag and drop blocks. This enables you to quickly test different ideas.
Some design principles to consider
- Use many different blocks: To give your website a more human vibe, get creative with different blocks! You can use a databases, play with highlights to add some color and divide sections, use toggle lists to save some space, and spice your pages with dividers, callouts, quote, code blocks, etc.
- Coherence: When it comes to icons or images, try to stay uniform. Use icons from the same library and try to use images with the same grain or vibe. Same goes for colors.
- Originality: Add your own personal touch by using external widgets or embeds. You can embed almost everything, from Google Sheets to charts, forms, or weather widgets. Play around and try third-party apps!
- Minimalism: If you're worried about your design skills or prefer keeping things clear and simple, try minimalism. Despite its thousands of options, Notion can easily look and feel minimalistic due to its black and white theme. So for most people, it will be easier to start with minimalism to avoid design discrepancies.
How to make a Notion page wider: click on the three dots at the top-right of your page, and enable “Full width”
Publish: Notion Public Page
Publishing a website has never been easier. All you have to do is go to your website's home page (the parent page that contains all the others), click the "Share" button at the top-right of the page, click Publish, and "Publish to web".
Your website now lives on the link that is shown to you.
In the options below, the "Allow duplicate as template" button is activated by default. You may want to disable it to avoid people copying your website or content. If it's enabled on your home page, it will be enabled for all children's pages by default.
If you have a paid Notion plan, you can consider activating the "Search Engine Indexing" button. This will make your website and content searchable on Google. It's necessary if you’re planning on SEO to increase traffic to your Notion site.
⚠️ If you have linked databases in your Notion pages, they won't appear on your website unless the original database is also on your website.
You can then review each page and make sure everything is as you expected.
Notion Web Builders
Notion websites are great. However, there are several website builders available that can make your website look even better and add functionality such as a search bar, SEO optimization, a navigation bar, and more. Here are a few examples:
Super
Super is a Notion web builder that allows you to create a personal website, blog or landing page in minutes. With a wide range of templates and customization options, you can create a professional-looking website without any coding knowledge. This is the most widely used web builder, and it has a beautiful and user-friendly interface.
Pricing: starts at $16/mo
Feather
Feather is a Notion website builder that focuses particularly on blogs and other types of content websites. I personally have never tried using it, but I have heard only good things about it. If SEO is your main source of traffic, it seems to be the best option.
Pricing: starts at $39/mo
Fruition (FREE)
This Notion website builder is free and open-source, and it doesn't require coding. You can host your website on a custom domain and use pretty URLs. Styling options include dark mode, Google Fonts, and JavaScript code injection. If you want to add more features, I recommend some paid alternatives, such as Super or Feather.
Pricing: 100% free
There are a bunch of other website builders such as Potion, Simple.ink, Popsy, etc.
Whether you're a beginner or an experienced web developer, these Notion website builders make it easy to create a website that looks and works great. So why not give them a try and see just how easy it can be to create your own website with Notion?
Notion Website Templates
If you don’t want to start with a blank page, I get it! That’s why we (Notion creators) build Notion templates: to allow you to save time & energy.
Below, I listed 3 of my own templates. Feel free to use them as you wish to build your stunning website.
Notion Portfolio Template
This template is a single-page website that allows you to showcase your skills and projects. Upload a headshot (or logo), write a brief description, and add links to all your projects, skills, and contact information. Then, put your portfolio website in your Twitter, LinkedIn, Instagram, and TikTok bio.
Download for free
Notion Blog Template
If you host a blog, this is the best template to get you started. You'll get access to a database for all your articles, but also pages for things you make, write, and like. It's never too late to get a personal website!
Download for free
Notion Resume Template
Online resumes are the new resumes. Stand out from other applicants and land your dream job with this minimalist, Notion-powered, online resume.
Download for free
Conclusion
Notion is not only a powerful tool for managing projects and personal tasks but also a versatile platform for creating stunning websites. With the ability to publicly share Notion pages, you can easily showcase your portfolio, write a blog, or create a personal website without the need for coding knowledge.
Whether you're a beginner or an experienced web developer, creating a website on Notion opens up new possibilities for showcasing your work, sharing your thoughts, and connecting with your audience. So don't wait any longer - unleash your creativity and start building your own Notion website today!
Remember, the sky's the limit when it comes to designing and customizing your Notion website. Experiment with different layouts, blocks, and widgets to create a website that truly reflects your personality and meets your specific needs.
Happy website building with Notion!
Start now & create your Notion account 🙃
(#NotionPartner)
Notion provides an easy way to quickly build personal websites without the need to learn a new tool or to know how to code. If you're already using Notion, you can use it to make your website without skipping any learning curve. Your Notion website will have a clean and beautiful interface and the 'Share to web' option allows you to publish your website in seconds. Changes are also automatically updated, making it superfast. You don't need to migrate all your existing content in Notion, which is particularly helpful for blogs. Moreover, you can get started quickly with a free template.
To create a website using Notion, start by defining the elements you want to include on your website and group them into 2-3 categories at most. Then, for each of these sections, define if they would better belong to a database or a page. Then, design your Notion page, and get creative. You can use a variety of blocks to give your website a more human vibe. Once you're done with the design, all you have to do is to go to your website's home page, click the 'Share' button at the top-right of the page, click Publish, and then 'Publish to web'. Your website will now be live on the link that is shown to you.
Notion has several website builders that can enhance the look of your website and add more functionality like a search bar, SEO optimization, a navigation bar, and more. Some of these website builders include Super, a Notion web builder that allows you to create a personal website, blog or landing page; Feather, which focuses particularly on blogs and other content websites; and Fruition, a free and open-source Notion website builder. Other website builders are Potion, Simple.ink, and Popsy among others.