Background
Back to home
5 min read

Bersonal Website

the `B` is deliberate

Always wanted a personal website.

Never got around to it. Then came Cursor Composer :). I'll try to detail the process of building this website end-to-end.

"as a data engineer with nearly 10 years of experience"

This is how a few of my friends would describe me jokingly. I'm a former engineer turned AI enthusiast. The blogs posted here will vary in subject matter that I'll try to keep interesting (mainly this for me tho)

Before we start 📝

Look, I said minimal experience earlier, but let's be real about what that means:

  • Terminal basics: You should be comfortable with:

    cd my-directory
ls
mkdir new-folder

  • Git fundamentals: Know how to:

    git clone
git add .
git commit -m "your message"
git push

    Nothing fancy, just enough to not get lost.

  • JavaScript/TypeScript: You don't need to be an expert, but you should know:

    • What a function is
    • How to use npm/node
    • Basic ES6 stuff (arrow functions, destructuring)

If you're missing any of these, don't stress - just Google as you go. That's what we all do anyway.

Tooling 🛠️

Hardware

  • Macbook Pro 14" 2023
    • 36GB RAM
    • Apple M3 Max

Software

  • Cursor (IDE)
  • Git/Github
  • Vercel (Deployment)
  • GoDaddy (Domain)

I'll explain each component later on. This should act as a guide for anyone who wants to build a simple website with minimal experience - I say minimal, you should be familiar with an IDE, git and the terminal/command line.

What's Cursor?

Cursor is an AI-powered IDE. It's also my favourite development tool of recent. Whilst it's not necessary for this project, it'll greatly help with the creative process of building the site. You can be a software engineer or you can be an intent-based developer. Cursor is the best of both worlds.

Cursor can be downloaded from here.

What's Vercel?

Next.js is a framework for building modern web applications. Vercel is a platform for deploying Next.js applications. Pretty simple.

I don't know much about the entire breadth of web development tools, so I asked our man's deepseek-r1 for a rundown of the simplest builds possible with TypeScript as a base language. We arrived at Next.js hosted on Vercel.

What's GoDaddy?

GoDaddy is/was a mistake and in the future I'll move to something else. For now, it's a domain registrar and web hosting provider. In other words, it's a place where you can buy a domain name and (I wouldn't recommend it) host your website.

Building the site 🏗️

Let's get technical. Assumption: you have a mac.

We'll use nvm to install node and manage node versions. Node will be used to run the Next.js application, written in TypeScript.

Download nvm from here

Or install it using homebrew:

brew install nvm

Use nvm to install node:

nvm install node
nvm use node

Create the project:

npx create-next-app@latest my-website
cd my-website

Now if you run npm run dev you'll see a development server running on localhost:3000. This is the base you'll be working with.

This is where Cursor comes in. If you open the project in Cursor, you'll notice a tab called "Composer" - The IDE's AI powered coding assistant/editor.

Composer was used exclusively to adapt the default Next.js project to what the site is now. Expertise with prompt engineering is helpful but anyone with an imagination and some knowledge of software engineering can craft something special.

🤖 AI Assist: The following sections were crafted using Cursor Composer. I provided the intent, and the AI helped structure and expand the content. Pretty cool, right?

Project Structure 📁

When you run create-next-app, you'll get a structure like this:

my-website/
├── app/
│   ├── page.tsx        # Your home page
│   ├── layout.tsx      # The main layout wrapper
│   └── globals.css     # Global styles
├── public/            # Images, fonts, etc.
├── components/        # Your React components
├── package.json      # Dependencies
└── tailwind.config.js # Tailwind settings

The app folder is where the magic happens. Next.js 13+ uses this for file-based routing. Want a new page? Just create a new folder with a page.tsx file. Simple as that.

Quick Example with Cursor 🎯

Let's say you want to add a simple navigation bar. Here's how I'd do it with Cursor:

  1. Create a new file: components/Navbar.tsx

  2. In Cursor's Composer tab, type something like:

    "Create a simple navigation bar with Home and About links using Tailwind CSS"

  3. Cursor will generate something like:

// 🤖 AI-Generated using Cursor Composer
import Link from 'next/link';

export default function Navbar() {
  return (
    <nav className="p-4 bg-gray-800">
      <div className="container mx-auto flex justify-between">
        <Link href="/" className="text-white hover:text-gray-300">
          Home
        </Link>
        <Link href="/about" className="text-white hover:text-gray-300">
          About
        </Link>
      </div>
    </nav>
  );
}
  1. Import it in your app/layout.tsx:
import Navbar from '@/components/Navbar';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

That's the workflow I use - let Cursor handle the boilerplate, then tweak it to my liking.

Things That Might Trip You Up 🚧

🤖 AI Assist: These gotchas were collected and organized with help from Cursor Composer, based on common Next.js issues and my own experiences.

Node Version Drama

  • If you're getting weird errors, check your Node version: 
    node --version
  • Next.js 13+ likes Node.js 16.8 or later
  • When in doubt, use the LTS version

Next.js Gotchas

  • Images: Always use next/image instead of <img>. It's better for performance.
  • Client vs Server Components: By default, everything in app/ is a server component. If you need client-side stuff (like useState), add: 
    'use client';
    at the top of your file.
  • API Routes: They live in app/api now, not pages/api like the old days.

DNS Headaches

  • DNS changes can take forever (or feel like it)
  • If your domain isn't working:
    1. Check your DNS records (like, triple check them)
    2. Clear your browser cache
    3. Try dig your-domain.com in terminal
    4. Wait... seriously, sometimes that's all you can do

Hosting the site 🚀

Vercel

Once you've pushed your changes to github, you can deploy with Vercel.

  1. Go to Vercel and sign in with your Github account
  2. Click on "New Project" and select the repository you want to deploy
  3. Click on "Deploy" and wait for the site to be deployed

Once the site is deployed, you can access it at the URL provided by Vercel. Final part incoming - linking your custom domain.

In your Vercel dashboard, head to the "Domains" tab in your project settings. Click "Add Domain" and enter your domain (in my case, miidoriya.com). Vercel will show you the DNS records you'll need to set up - keep this page open, you'll need it in a minute.

GoDaddy

First things first - you'll need to register your domain. Head over to GoDaddy, create an account if you haven't already, and search for your desired domain. I went with miidoriya.com. They'll offer you various add-ons, but for this project, just the basic 1-year registration is fine.

The last technical bit - linking GoDaddy to Vercel. Here's what you need to do:

  1. In your GoDaddy account, find your domain and click "Manage DNS"
  2. You'll need to add two DNS records: 
    # For the root domain (miidoriya.com):
Type: A
Host: @
Points to: 76.76.21.21 (Vercel's IP)

# For the www subdomain:
Type: CNAME
Host: www
Points to: cname.vercel-dns.com

Save these changes and wait a bit - DNS changes can take anywhere from a few minutes to 48 hours to propagate (usually it's pretty quick though).

Back in your Vercel dashboard, it should automatically detect when the DNS is properly configured. Once verified, Vercel will automatically set up SSL (https) for your domain.

And that's it! You've got a personal website running. Updates to it should be as simple as pushing changes to your main branch on the Github repository. Local development can continue with npm run dev. If you combine Cursor and Composer, you'll be iteratively building the site like I'll be.

I'll be posting more in time hermanos ✌🏾

← Back to all posts