On a budget? Make a great-looking portfolio using Notion.

Pay only for your domain, if you want one.

Bonbon by Polina Orlova

Let’s say you are making your first ever portfolio. Maybe you are unemployed, or changing careers, or maybe you just never had a portfolio before. No matter what the case is, not all of us can afford to pay $12/month for a hosting service, which is the average price I found when researching website-hosting platforms.

Does that mean we have to conform to having an underwhelming portfolio? Not in the slightest.

But there are three things you need to know before we dive head-first into it.

1. Free doesn’t mean effortless

Yes, you’ll have to download some programs and there’ll be some coding involved. Mainly CSS, to make the page look how you want it to. But not having to pay for a service every month made the trouble of going through it worth it to me.

And I am no master of coding myself. I can get around some HTML a CSS, but that’s pretty much it. I had to experiment a lot to get the results I wanted, and I don’t want you to go into this thinking it will be all roses.

2. I didn’t come up with it

It was actually on this website that I found the instructions. Since I am not a developer, I needed some help figuring out what he was saying, but I’ll do my best to explain it here for everyone to understand.

Either way, I advise anyone interested to read the original instructions, as they may cover topics I won’t address here.

(if you are a developer reading this, please don’t be mad if I said something wrong or if my instructions are not perfect. I am really trying here, give me some love)

3. Is it really free?

The whole process is free because all the tools you’ll use are costless. In the end, you will deploy your Github repository to Vercel, which has free hosting for personal or hobby websites forever. The only thing you’ll pay for — if you want to — is a personal domain, but you can decide later.

Let’s get to the tools!

Bonbon by Polina Orlova

Step 1 — Setting up Notion

1. First things first, make a Notion account and set up your portfolio there. You don’t need to have everything ready just yet but it’s important to have the main items you want on your page already there, so you can start making the changes you want to your CSS. Something like this is good enough to start:

If you have trouble setting your page on Notion, you can duplicate this template found in the original instructions.

2. You’ll click on share > share to the web, and copy all the numbers at the end of the public URL.

Step 2 — Setting up Github

1. Go to Github and set up an account.
2. Open this repository and fork it.

3. Once forked to your repository, find the site.config.ts file, open it, and edit the rootNotionPageId to replace the numbers with the ones you found on your notion URL. Great, now your Notion page and Github repository are connected!

4. Also, edit the rest of the personal information on this document, such as name, domain, author, and social usernames.

5. To change things such as the favicon, go to the public folder and replace the favicon files. Remember to update your favicon with the same names, dimensions, and file extensions as the original ones! (for the .ico file I used Convertio to convert a .png to .ico)

Step 3 — copying to a local folder and editing CSS

This step is important so you can make the adjustments to your code and see how the website looks without deploying it, which is faster and safer, as there’s an untouched backup on Github.

What you’ll do is:

1. Download Git.
2. Create a folder on your computer where your files will be copied to. Mine is called “Github stuff”
3. Open the folder and right-click anywhere. Click on “Git Bash here” and a Git window will open.
4. Type “git clone” and the URL for your repository. The URL is found here:

It should look like “git clone https://github.com/yourrepository.git”. Hit enter. (ctrl+v doesn’t work on Git, to paste the copied URL use shift+insert).

5. Once that’s done type “npm install”, hit enter, and wait for Git to install it (it takes a while).

6. Finally, enter “npm run dev”. This will make your website visible on http://localhost:3000/

7. Leave Git open, even though you won’t need to type anything anymore. Go to your files and find the “styles” folder, where all three CSS files reside. As you edit these files and hit save, you’ll see the changes in real-time on the localhost tab.

8. If you can’t finish everything on the same day, close Git, and the next time you’ll need to enter only “npm run dev”, to enable the localhost.

Step 4— Taking it back to Github

I am pretty sure there is a better way to do this, but what I did was copy the whole CSS file from my local folder once I was satisfied, and replace the code on the same file on Github. This is needed because Vercel will deploy directly from Github.

Step 5— Setting up Vercel

1. Go to Vercel and click on start deploying and continue with Github. It will ask you to log in using your Github account and then choose your desired repository. Once that’s done and the deployment is finished, your website is live! 🎉
2. If you want to use your own domain, buy it from any service (I bought mine on Namecheap), then go to settings > domain to add it to your project. There will be some instructions to let Vercel use a domain that was bought somewhere else, but it shouldn’t be a problem.

Step 6 — Making changes to your portfolio

Your site is live, but you can still make changes.

Everything you change on Notion will be shown on the portfolio automatically, and every change you make on Github will be deployed to Vercel automatically as well.

Time to show your beautiful, and free, portfolio to the world!

I’d actually love to see how it turned out, so feel free to post the URL in the comment section!

Bonbon by Polina Orlova