Interview prep

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 similar to what you hope to build. 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


Process Overview

This process is a mix of 3 simple components, and 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 of these 3 components.

NameCheap

1.) Go to namecheap.com.

2.) Type 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 will only take 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 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 improve 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.


The information provided herein is for general informational purposes only and is not intended to provide tax, legal, or investment advice and should not be construed as an offer to sell, a solicitation of an offer to buy, or a recommendation of any security by Candor, its employees and affiliates, or any third-party. Any expressions of opinion or assumptions are for illustrative purposes only and are subject to change without notice. Past performance is not a guarantee of future results and the opinions presented herein should not be viewed as an indicator of future performance. Investing in securities involves risk. Loss of principal is possible.

Third-party data has been obtained from sources we believe to be reliable; however, its accuracy, completeness, or reliability cannot be guaranteed. Candor does not receive compensation to promote or discuss any particular Company; however, Candor, its employees and affiliates, and/or its clients may hold positions in securities of the Companies discussed.