← Back to Blog

How I built this

programming

How I built this blog

How I built this

I always wanted to have a personal blog; but I never seriously pursued it until August 23rd, 2025, where I woke up one day and decided to try “vibe coding” for the first time in my life.

For context, I’m a backend software engineer. Most of my professional experience is in Java and Spring Boot. My CSS skills are pretty minimal, and my rudimentary React knowledge comes almost entirely from my college capstone project.

I began by utilizing ChatGPT deep research with the following prompt:

*The original chat can be found here - https://chatgpt.com/share/68ab8fd7-aabc-800a-9b74-48f62b62a52c

I want to make a personal blog in react JS. I'll utilize the cursor agent mode to set up the project.

I want to keep it pretty simple - about me page; blogs posts; contact us.

What's a good format for making the blogposts and updating the website?
Just hardcoding into frontend or doing some backend db?

Afterwards; it responded with a Cursor prompt to use with Agent mode:

Create a new Next.js project (using the App Router, TypeScript optional) named "my-markdown-blog". In the root, install and configure the following:

- Contentlayer 2 (with next-contentlayer2 plugin) for Markdown content. In `contentlayer.config.ts`, set up a document type for blog posts (e.g., `Post` with fields like title, date, slug).
- MDX support (optional): add `@next/mdx` to `next.config.js` so that `.md` and `.mdx` files in the `/posts` or `/content/posts` folder are treated as pages. Or configure Contentlayer to use MDX.
- Tailwind CSS (optional) for styling. Initialize `tailwind.config.js` and import Tailwind in `globals.css`.
- In the project structure, create a `content/posts/` folder and add one example Markdown file with frontmatter (title, date, excerpt, etc.).
- Under `src/app/`, scaffold pages: `page.tsx` for the homepage, `about/page.tsx` and `contact/page.tsx` for static pages, and a `blog/` folder. In `blog/`, create `page.tsx` (to list posts) and `[slug]/page.tsx` (to render each post). Use `getStaticProps`/`getStaticPaths` or Contentlayer to load and render the Markdown content in the `[slug]/page.tsx`.
- Implement a simple post list in `blog/page.tsx` that links to each post’s page (use `<Link>`). Extract titles and dates from frontmatter.
- Install and configure a search library: e.g. install `fuse.js`, then generate a JSON index of all post titles and content at build time. Add a search input component that queries this index and displays matching post links.
- For the Contact page, set up a basic form (name, email, message) that either uses a service like Formspree or a Next.js API route to send an email.
- Ensure the project builds and deploys on Vercel (no custom server needed). Set `output: 'export'` in `next.config.js` if you want a fully static export.
- (Optional) Set up Husky or a pre-commit hook so that whenever you add a new Markdown file and commit, the search index is regenerated automatically.

To my surprise - it did a fantastic job setting up the original skeleton of the design. By continually iterating, I was able to get features such as mobile-friendly design, search, and filtering by tags to work.

Once I finished, I was able to purchase this domain for $1.00 off of GoDaddy, and thanks to Vercel’s magic, their CI/CD pipeline automatically builds & deploys this project whenever I push to my remote repository. Pretty neat!

In order to publish a blog post, it’s pretty simple. I just write up the post within Notion and I can export it as a markdown file. Afterwards, the markdown-to-jsx library takes care of converting it to a react component and adding it as a blog post.

Unfortunately, the drawback of vibe coding is that my understanding of the codebase and different components of the web-app is limited. I intend on spending some time going through the codebase, and understanding core React/NextJS fundamentals that were used to build this website.

Current Roadmap:

  • Replace the pre-generated About me page with actual content.
  • Build a mailing list to notify subscribers about new content.
  • Build out the contact-me form. Currently I am using a third-party provider that limits me to ~50 submissions per month. Maybe I can build my own web service using AWS lambda or something.
  • Establish a regular cadence for writing.

My intention is to have a repository to deposit my thoughts as I work on different things in my life, and become a better writer along the way! Hopefully, others will one day derive some value out of this too.

← All Posts