Personal Website and Notion

Description

How I built my personal website using NextJS and Notion.

Publish Date

Published

Social Image

Over the past five years, my personal website has called many places home. Despite everything I’ve built along the way, none of its previous iterations ever gave me a sense of permanence because the site was always tied to a specific purpose. And as many hackers and builders know, when something has a purpose, speed takes priority—and permanence and stability often takes a back seat. As of April 2025, it is now on Version 3 and I think this will be the final one for the near future.

When I had just gotten started with freelancing and had made my first dollar on the internet, the first thing I wanted to do was get a really nice website with proper SEO and set up my portfolio immediately to get more clients. And that’s exactly what I did—I used Squarespace to host my portfolio. It cost me $20/month and overall has cost me total of $800. While it may seem a lot, that site had brought me more clients worth over $20,000 so the hosting fees was not a big deal. I think it did it served its purpose pretty well.

But Squarespace was not exactly the source of my clients—it was upwork—this was just a medium to showcase the projects I had worked on. So if I was busy with work, it was just another monthly recurring bill for me.

Requirements

I’ve always wanted to work on a personal site that I could tinker with—somewhere to explore tools and technologies. I think for any developer, a personal website should be the first place to experiment with new tools or services.

But I’ve never been great at design, and I used to struggle with frontend. I was inconsistent with the stack I used, always jumping between new frameworks and libraries. I didn’t want to keep rebuilding my site every month just because I found something new. I wanted to choose a stack I understood well—something I could stick with and shape over time if needed.

Most importantly, before I could start building, there were a few key things I wanted to finalize:

1. Portfolio Management

Squarespace had made it really easy to add and update my portfolio. It came with clean, eye-catching designs, and I genuinely think that’s one of its strongest points. It was actually one of the main reasons I didn’t switch to other website builders afterward. It handled images and content beautifully, with minimal effort.

For people who just want to showcase their work without needing granular control over their site, I think platforms like WordPress or Squarespace are perfect go-to solutions.

2. Content Management System

I think this was the biggest blockade stopping me—the mess of handling content and storing images just felt overwhelming. If I want to update something, I don’t want to dive into code every time—that’s just too cumbersome. Some people might enjoy that level of control, but I don’t.

I went through this pain when working on the first version of OpenPastPaper—the homepage was a mess, and honestly, I still don’t want to touch it. I also didn’t want to rely on Markdown, because at the end of the day, it’s not that different from HTML. Sure, it’s a bit easier for text, but images were still a hassle.

3. Design

I like minimalism. I like things to be simple and easy to understand. My previous website was an okay attempt at this, but it ended up on the funkier side. I’m no designer, but I know when a website feels right to me.

For this project, I wanted to get my hands dirty with Figma—because like every developer at some point, I used to think I didn’t need a design tool. I thought I could just start coding and adjust the design as I went, based on “feel.” That mindset is wrong. Figma has made things so much easier. Honestly, it’s saved me from going crazy while working on frontends.

The overall Solution: Notion

I had explored the idea of using some sort of WordPress CMS or even Markdown, but nothing felt enticing enough. WordPress felt like a gated service with limited control over design. Markdown wasn’t much better—it felt like just another way of coding your content, while still leaving the image storage problem entirely up to you.

When I was trying to find a reliable solution, I stumbled upon Notion. Some brilliant (and slightly crazy) people out there built an open-source project called react-notion-x, which literally renders your Notion pages as a blog. It’s amazing how it solves all the CMS headaches—adjustability, content updates, and even image handling—all in one go.

Additionally, with Next.js, the content is rendered on the server, which means SEO is perfectly handled—exactly what I needed for better search visibility.

That was the final trigger for me to finally start working on my personal site.

How does it work?

When a user opens the site, routing is handled by Next.js.

Notion fetches the content table of pages and automatically assigns them to the sidebar. The design and styling are fully customizable through React—Notion only takes care of the data fetching. In this setup, Notion basically acts as both a database and a page renderer.

When a user clicks on a title in the sidebar, the main view dynamically renders the corresponding Notion page with all its content.

The blog you’re reading right now is using just this much code to render. (Of course, it’s a little more complicated under the hood—but this is the gist of it.)


<div className="flex flex-row gap-1">
	<Sidebar />
	<NotionRenderer
	  recordMap={blockMap}
	  darkMode={theme}
	  className='notion-page'
	  components
	 />
</div>

Stack

Overall, the stack is very simple. It doesn’t cost anything to store images or host content. But I ended up taking a slightly different path than you might expect—especially since I’m using Vercel with Next.js. And I have a good reason for that.

Vercel for hosting only.

I’m still not entirely sold on Vercel’s serverless functions. Personally, I prefer Cloudflare because of their generous free tier. I think the main reason I went with Vercel is simply because they’re the creators of Next.js—it just made sense. That said, I only use it to host my Next.js web apps. I’m also on the Hobby plan, so it doesn’t cost me anything.

Django for Backend

This setup is mostly for side projects and handling simple things like contact emails. I built a small feature that lets users send messages directly to my email through the backend—no need for them to deal with a mailto:manishgt194@gmail.com link or annoying popup. It’s a small touch, but it feels much cleaner. It’s not live yet, though.

I use Railway to host all my Django backends (including Open Past Paper), thanks to their generous $5 usage limit, which has been more than enough for my needs so far.

Analytics

I use PostHog because I know I’ll never hit the one million events limit anytime soon. Until then, it gives me a great way to see how users interact with my site and catch any UI bugs I might have missed. I also have Google Analytics running alongside it for basic analytics and traffic insights.

So the total cost for hosting this website is went from $20 per month → $0 per month assuming I don’t get DDoS attacked but Vercel should take care of that too.

So, I think now, this site isn’t just a portfolio anymore—it’s a playground. A space where I get to experiment, learn, and build without pressure. It’s finally something that feels like me—clean, minimal, and functional. I’m sure things will keep changing over time, and that’s okay. At least now, I have a foundation I actually want to come back to and improve.

Thanks for making it this far.