Make a Personal Website Without Code Using Notion

All the information you need to make a no-code website.

TLDR

Let’s be real, we’re all busy so having this section at the top of the page is always nice. Does this describe you?

  • Looking for a simple, but clean way to consolidate your web presence, showcase cool projects, or organize your portfolio
  • Overwhelmed by the amount of website creation tools available
  • Stressed about learning the ins and outs of a new website building technology
  • Not looking to break the bank, but down to spend a few bucks a month (seriously like $5)

If the above bullets describe you then we are going in the right direction!

Okay, but let’s make sure…

Here’s my personal website — davisancona.io

Take a look and see if this is along the lines of what you are looking to accomplish. Keep in mind there are a TON of ways to design your site. This is just to provide you one concrete, visual example. More examples can be found here.

Home Page


Projects: Mentor Match

Personal: Travel



Overview

This process is an easy mix of 3 simple components that will cost you less than $5 a month to start and maintain.

1.) namecheap.com — You can buy your domain name here. A ‘.com’ domain costs $8.88 per year or $0.74 a month.

2.) notion.so — Notion is where you will actually organize and design your website and its content. It is an AMAZING organizational tool and extremely intuitive. Everything is drag and drop, so no code is required. And, it’s free! 😉

3.) super.so — Super allows you to combine your Notion page and your domain, making it a LEGIT website, for only $4 a month. Plus, they are releasing an enhancement to help with Search Engine Optimization (Google) in the next few weeks!

That’s it! Now, we’ll walk through the set up and combination of these 3 components.

NameCheap

1.) Go to namecheap.com.

2.) Type in your name (or whatever you want your website to be called) into the search bar and hit enter.

3.) Take a look at all the open domains you can purchase. Some are more than $8.88 and some are even less! (context of example)

4.) Pick whichever domain you like and proceed with the checkout process.

5.) Once your purchase is complete you will be able to navigate to your Account (top right of the site) and see your domain. Don’t mess with anything for now, we’ll come back and manage our domain later. Moving on!

Notion

1.) Go to notion.so and set up a free account. Just click the Sign Up link in the top right and follow the prompts.

2.) Once your account is set up you’ll be redirected to the page below. Read through this page and watch the tutorial videos. Don’t worry, it’s only a total of 9 minutes.

3.) Play around! Create a page, add pictures, embed websites, insert text, link links, etc. Browse some of Notion’s templates and try to recreate them. This is the quickest way to learn and it’s also really fun!

4.) Once you feel comfortable, create a new page in the Navigation bar on the left hand side of the screen and make your website. Here are some examples (same as above) you can check out to inspire your designs.

5.) Once you feel confident in your design and want to share your page (and all its subpages) with the world, you’re done! We’ll come back to Notion in our last section.

Super

1.) Go to super.so and click the Sign Up link in the top right corner.

2.) Select the 1 site, $4 option and input your payment method. Don’t worry, if you hate it, you can cancel anytime in the next 7 days without charge.

3.) Once you finish sign up, you’ll be navigated to your Super dashboard, which means we can now COMBINE EVERYTHING!


Combining Everything

1.) Go back to your Notion page — the same page that you want to make into your website.

2.) Click on the Share link at the top right hand of the page and turn on Share to the Web. Copy the link provided.

3.) Go back to your Super dashboard and click the New Site link in the top right hand corner.

4.) Follow the prompt, enter the following, and click Continue when you’re finished:

  • Site Name — this is the name that will show when the link pops up on Google Search or when you share it (like sending it via iMessage)
  • Custom Domain — this is the domain you purchased on NameCheap, our example being foofoocuddlypoops.com (I didn’t actually buy it, so this will lead you nowhere, sorry 😕)
  • Public Notion URL — this is your Share to the Web link from Notion which you just copied in Step 2

5.) Select the NameCheap option


6.) Now we will need to take the below information and add it to our domain settings in NameCheap. First, go back to your Account screen in NameCheap. Second, use this link to walk through adding the A Record to your domain. Click Continue on the Super screen when done. Don’t worry, it may seem complex, but it will take you MAYBE 5 minutes.

7.) We’ve made it to our LAST STEP! Here you can change the font of your website, add analytics, and provide a thumbnail image/description. Go ahead and add in what you want or click Skip for Now. I recommend adding a Site Image and Site Description, but skipping the font and analytics.

8.) Hit Continue and you’re DONE! Just remember that both NameCheap and Super will have to configure things on the backend — this essentially means your site could take up to 30 mins or so to “warm up” before you can access it.

Wrap Up

At this point you should be good to go! If you do have any trouble, both NameCheap and Super have live chats you can use to get assistance with troubleshooting. If you are having trouble with Notion, there are a TON of tutorial videos on Youtube that you can use to continue to buff up on your skills.

One last item, if you ever want or need to make changes to your website after initial set up, just make the changes in Notion. They will automatically be reflected on your page in realtime. You don’t need to do anything else. It’s that easy.

The Real MVP’s

Credit where credit is due! Notion and the creators of Super.so (Traf and Jason Werner) have made some amazing tools! To stay up to date on new features and their other projects, you can follow them here and on Twitter.

Bonus - a free alternative

If you're looking for an even cheaper version, and aren't afraid of a little more DIY, you can also replace the Super section with fruitionsite.com. It's an open source project that was inspired by Super, but it isn't a managed solution, so it doesn't have any troubleshooting support or guarantees.


Is your offer competitive?

Find out how much you’re worth and how to ask for more — the right way.

Loading...