How this website was made

A short note on turning an empty repo, a new domain, and Vercel into this personal website.

This website started as an empty GitHub repository and a newly purchased domain: rogerribas.me. The goal was deliberately small for the first version: create a personal website with an About page, a CV page, and a Blog that is easy to maintain over time.

The first practical step was fixing the repository shape. The Git metadata had been created one directory too deep, so the .git folder was moved up to the intended project root. That made the repository match the folder Vercel would eventually build from.

The domain

The domain was purchased through Namecheap. Vercel was then configured with both rogerribas.me and www.rogerribas.me as project domains. Namecheap remains the DNS provider, while Vercel handles the deployed site and HTTPS certificate.

The final setup uses www.rogerribas.me as the canonical address. The apex domain, rogerribas.me, redirects there. That keeps the public URL consistent while still allowing either address to work.

The Vercel setup

The site is deployed through Vercel. After logging in with the Vercel CLI, the local project was linked to a Vercel project and deployed to production.

Vercel also created local project metadata in .vercel, which is useful on this machine but should not be committed to the repository. That is why .vercel is listed in .gitignore.

The codebase

The website is built with Next.js and the App Router. The first version is static-friendly, so Vercel can build the pages once and serve them quickly.

  • app/page.tsx is the homepage.
  • app/about/page.tsx is the About page.
  • app/cv/page.tsx is the CV page.
  • app/blog/page.tsx lists blog posts.
  • app/blog/[slug]/page.tsx renders individual posts.
  • content/blog stores blog posts as Markdown files.

I originally considered rendering MDX directly, but removed that dependency after checking the dependency audit. The current blog renderer supports a small, safe Markdown subset: headings, paragraphs, links, inline code, and lists. That is enough for simple posts like this one, and it keeps the codebase easy to understand.

What comes next

This first version is intentionally plain and functional. The next step is to replace the placeholder About and CV content with real copy, then use the Blog as a place for notes on projects, decisions, and things learned while building.