### Introduction

In my [previous post](https://www.talesofrm.dev/blog/create-blog-20-dollars-2025-edition), I went over the details of how I built this blog using [Lovable](https://lovable.dev/), [Cursor](https://cursor.com) and [Claude](https://claude.ai/download). This is a second part to that post as this covers the deployment process.

I wanted to create an SEO friendly blog website and I read a [research post from Vercel](https://vercel.com/blog/the-rise-of-the-ai-crawler) that stated that new AI search crawlers like Perplexity and Anthropic were unable to render JS pages. I also learnt that there is a concept of [Server Side Rendering](https://www.sanity.io/glossary/server-side-rendering) that allows the webpage to be rendered on the server before being sent to the client.

All this to say that I had to do two things:

1. Migrate the website to use NextJS + React instead of the Vite + React that it was currently using. 
2. Since I was hosting the website on Vercel, NextJS felt like a good fit since they are the creators of it.

### Migrating to NextJS

Migrating a project from one framework to another is a challenge whether you are doing something at scale or even for a small project like mine. Since I wanted Cursor to assist me in this endeavor, I started asking questions like:

```
Can you give me a path to server side rendering atleast for the blog post pages? Do not implement any code yet 
```

It responded with:

```
Here's a strategic path to implement Server-Side Rendering (SSR) for blog posts:

Migration Options:

Next.js (Recommended): Built-in SSR, great React support
Remix: Full-stack framework with SSR
Vite SSR: More complex, manual setup

Next.js Migration Path:
Keep existing components and logic
Convert pages to Next.js format
Implement getStaticProps for blog posts
Setup dynamic routes
Configure Supabase for SSR

Key Changes Needed:
Move blog posts to /pages/blog/[slug].tsx
Implement static generation for posts
Update meta tags for SEO
Adjust data fetching patterns
Handle image optimization

Benefits:
Better SEO
Faster initial page load
Improved Core Web Vitals
Better social media previews
Reduced client-side JavaScript

Would you like me to:
Show the Next.js implementation plan?
Explain the specific changes needed?
Create a migration guide?
```

Since the recommended option was to use NextJS I then asked:

```
Walk me through it step by step
```

It then started giving me instructions on how to create a new NextJS project and install depenencies. *I had to copy the step output from my old project to the new project’s chat input and keep doing this until all the code was migrated.*

I won’t go into every step here but I did observe a few things:

1. It can completely forget the existence of certain features/pages. It forgot about the About page I had as well as the editor page I had. It also forgot about the dark mode toggle. It instead setup a three way toggle of light, dark and system.
2. It completely changed the design language of the website. It removed some nice color highlighting that I had done for buttons in my post editor page.

It added a few things that are worth mentioning:

### Server Side Rendering: Page revalidation

It added a Revalidation Token to allow only authorized users to revalidate the page in NextJS. To do the revalidation, it added a new function in Supabase:

```sql
-- This function will be triggered when posts are updated
create or replace function handle_post_update()
returns trigger as $$
begin
  -- Make HTTP request to revalidation endpoint
  select http.post(
    'https://talesofrm.dev/api/revalidate',
    '{"path": "/blog/' || NEW.slug || '"}',
    '{
      "Content-Type": "application/json",
      "Authorization": "Bearer your_revalidation_token_here"
    }'
  );
  return NEW;
end;
$$ language plpgsql security definer;
```

and then a trigger needed to be created:

```sql
create trigger on_post_update
  after update or insert
  on posts
  for each row
  execute procedure handle_post_update();
```

So the flow from my understanding would be, when a post update occurs from my editor view, the updated post would be written to the posts database. After the write is completed, a trigger called ```on_post_update``` triggers the function ```handle_post_update``` . This function then revalidates the post URL to provide the latest update to all readers. 

### Deploying to Vercel

I originally had deployed the old version of my website to Vercel and purchased a domain with them for this site. I had to figure out how I could deploy the new NextJS repo to Vercel and point the domain to the new project. Again I asked in the chat for some options and the best one I got is to create a new repository in GitHub and a new project in Vercel that points to this repo. Post-deployment, the Domain can be disassociated from the old project to the new one.

The steps to deploy to Vercel are pretty easy:

![](https://onaqesjswnxzcxiflmld.supabase.co/storage/v1/object/public/blog-images/post2-migrating-to-nextjs-deploy-to-vercel/vercel-new-project.jpg)

1. Sign up for an account.
2. Login to your account and connect your Github profile to it.
3. Click on Add new -> Project and you should see an option to import a Git repository.
4. Upload your code from Cursor to Github by creating a new repo in Github and pushing your code to it.
5. In Vercel, choose the repo you want and then set any environment variables that you had in your local environment. In my case, since I was connecting to Supabase, I had a few environment variables related to that.
6. Hit Deploy and wait for it to finish deploying. In case you see errors, you can come back to Cursor and paste the logs from the deployment to debug any issues.
7. Once the deployment is successful you should see a link (should end in .vercel.app) that will point to your deployed application.
8. If you have any domain names purchased with Vercel, you can associate it to the project.


That’s it! Thanks for reading. I like to log my dev notes in this format. I’m happy to take feedback through my socials which can be found on the [About page](https://www.talesofrm.dev/about).

Migrating to NextJS and Deploying to Vercel

##### TL;DR

Built a personal blog from scratch in a few hours for $20 using modern AI tools. Here's what I learned:
This post walks through my experience building a personal blog using AI-powered tools like [Cursor](https://cursor.sh/), [Lovable](https://www.lovable.dev/), and [Supabase](https://supabase.com/). The entire project cost just $20 (for Cursor Pro) and took a few hours. Key learnings include:
* AI tools can significantly speed up web development, even for backend engineers unfamiliar with frontend tech
* Effective AI prompting is crucial - provide context, ask for execution plans, and get high-level design options before diving into implementation
* Version control (using feature branches) is essential when working with AI-generated code, as it may require iterations and rewrites
* AI models can sometimes suggest outdated package versions or configurations, requiring manual verification
* The tech stack (Supabase + React) offers good scalability for future growth while staying cost-effective

⠀If you're interested in building your own blog using AI tools or want to understand the current state of AI-assisted development, this post details my approach, challenges, and solutions.

#### Introduction

In this post, I am going to show you **how I built my own blog post with a few hours of work and 20$**. I am also going to show you how it can be hosted for free and what it could cost in the future if you do want to continue developing it in the future.

#### Motivation/Goal

I mainly wanted to do this ***to test the state of the art in the AI Model application space***. I have been introduced to various AI based tools over the past month that I wanted to see how useful all of them would be. I will go into depth with some of the tools I used and draw comparisons with competing tools in a future blog post. The AI tools I used in the process are:

- [Cursor](https://cursor.sh/) (Pro mode) - 20$ / month - IDE used for AI assisted code development
- [Lovable](https://www.lovable.dev/) - Free (5 chat messages/day) - Web-based AI app development and hosting
- [Superwhisper](https://superwhisper.com/) - Free - Desktop application to transcribe speech to text
- [Claude](https://claude.ai/) - Free (with daily token limit) - Desktop/Web application to ask queries to an AI
- [Supabase](https://supabase.com/) - (Free for personal use) - Web-based application to host your blog content and images
- [DiffusionBee](https://diffusionbee.com/) - (Free) - Mac app to use StableDiffusion Model to generate images.

***I also wanted to create a personal blog of my own that is independent of other platforms ([Medium](https://medium.com/), [Notion](https://www.notion.so/), [Substack](https://substack.com/) etc).*** 

Without further ado, let’s get started shall we?

#### Starting with Lovable

![](https://onaqesjswnxzcxiflmld.supabase.co/storage/v1/object/public/blog-images/post1-how-i-created-this-blog/lovable-starting.png)

I started with a tool I had seen on Twitter called [Lovable](https://www.lovable.dev/) that uses an AI model to generate frontend code for building websites. Being a backend engineer, I wanted something that removed the barrier of learning a whole language ecosystem ([React](https://react.dev/) and [Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)) to make websites. There is an alternative called [v0](https://v0.dev/) offers by [Vercel](https://vercel.com/) which probably has a larger customer base. Lovable's UI offers an AI chat on the left and a preview screen on the right for the generated website.

I gave it a simple prompt:

```
Create a personal website landing page for me with a link to a blog posts page. Make it look retro themed.
```

It started setting up the package and its dependencies and also mentions what elements it is setting up during the process.

Once it finished, I had a landing page with some mock blog posts showing up there and also a link to a blog posts page that was working . This felt like a good starting point. I then asked it

```
Can you add a light mode/dark mode toggle?
```

It made the necessary changes to add it in and I hit my first glitch here. When I clicked the toggle in the preview, it neither did anything nor was it clickable. I asked it 

```
Debug this issue:
the dark mode toggle is not doing anything currently. Please fix this so that the website's theme colors change when this button is clicked
```

It again made some changes but I was still left with the same issue. This is when some technical knowledge helps. I asked it 

```
when I try to click it, i am unable to as the hero element seems to be blocking it
```

While this may seem super basic, the hero element is the big banner-like element that says “Welcome to my digital space”. This seemed to have been laid over the button and hence made the button inaccessible. So the AI immediately recognized this and adjusted the z-index (the depth factor of the element) on the page. I then asked it:

```
Add this button to the blog posts page as well
```

It did so and I reached my limit of 5 messages per day! The interesting thing is that it allows you to connect your Github account to this project and push all the code it generated to a private repository. I also noticed that it had an integration with Supabase (which was new to me at the time). This then led me to the next part of building this out.

#### Working with Supabase

I love abstractions and Supabase is a wonderful platform that abstracts the nitty gritties of interacting with the AWS ecosystem. I created a free account with Supabase and setup a project there. It sets up a compute instance (t4g.nano) with a database (PostgresDB) It gives you an API endpoint (REST API) to connect to for database queries/mutations. It also offers an object storage to store files, images etc. I would probably explore all these in technical depth in a future blog post.

![](https://onaqesjswnxzcxiflmld.supabase.co/storage/v1/object/public/blog-images/post1-how-i-created-this-blog/supabase.png)

#### Continuing in Cursor

I pulled the GitHub repo down to my laptop and opened it in Cursor. Cursor is a fork of VSCode and provides four main things:

1. **Chat** - Connections to Anthropic and OpenAI’s models like Claude Sonnet 3.5 and o1-mini or o1-preview (and a few others) to allow you to chat with them to write code.
2. **Apply changes** - A custom model that allows Cursor to interact with your code base and CLI to apply changes that the chat feature suggests.
3. **Inline code suggestions** to predict what will come next as you type
4. **Debug with AI** - a feature to debug issues that are highlighted in the code

![](https://onaqesjswnxzcxiflmld.supabase.co/storage/v1/object/public/blog-images/post1-how-i-created-this-blog/cursor-ide.png)

Throughout this exercise I used the **Claude 3.5 Sonnet** model via the Chat interface. I will leave you the reader to go through the prompts I used to build it. I have attached a link to an export of the entire chat I had with Cursor. Going into the details may be too long and unnecessary but learning what works and what doesn’t can be a useful proxy.

#### Learnings from Cursor’s model behavior

> **Learning #1: Make the model understand what the code package does and remember it.**

I started with a prompt:

```
@Codebase What does this package do
```

It responded correctly stating that it is a *React + TypeScript project using Vite as the build tool, with a comprehensive UI component library* and went into the details.

I then told it:

```
This is a project for me to host my personal website and blog. Remember that.
```

I am unsure of how the memory of the model works internally but giving this context to it helps with subsequent prompts.

> **Learning #2: Before diving into code implementation, ask for options for a high level design**

It can be as simple as:

```
I want to setup the blog post backend. Give me some options.
```

This provides you a set of options that range from simple to complex and the model provides the pros and cons of each option. This is very similar to how it works when I have to write a technical design document for work. I noticed it suggested Supabase as a complex option that scaled well. Since I had already setup a project in Supabase, I chose this option. It then started providing code snippets to start implementation.

> **Learning #3: Provide context on what machine you are working on**

Although I did not do this in my case, it helps to provide context at the very beginning to allow the model to generate CLI commands that work with your manchine’s operating system (Windows/Linux/MacOS).

> **Learning #4: It does not tell you what to do with commands that need to be run in third-party services by default**

For example, I got a set of SQL code with a heading as **Create the Supabase table:**

```sql
create table public.posts (
  id uuid default uuid_generate_v4() primary key,
  title text not null,
  slug text not null unique,
  content text not null,
  excerpt text not null,
  published_at timestamp with time zone default timezone('utc'::text, now()) not null,
  reading_time integer not null,
  tags text[] default '{}'::text[] not null,
  featured_image text,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Enable RLS
alter table public.posts enable row level security;

-- Create policy
create policy "Public posts are viewable by everyone"
  on public.posts for select
  using ( true );

```

If you do not know anything about Supabase or databases or SQL for that matter, then creating this table might be hard. Of course, you could ask it for instructions to do so but it does not give them to you by default. A mitigation could be to mention this at the beginning and make it remember it.

> **Learning #5 - Always commit your changes before working on new features/improvements. Use feature branches if possible**

When I wanted Markdown support for writing content in the post submission page, the model used MarkedJS to implement the functionality. This decision led to several issues with rendering markdown correctly for different types of text (Eg: tables, code snippets etc). Fixing the errors that came up were also not easy as the model would fix one type error and then that would cause additional errors. It would also miss adding imports at times when it makes these fixes.

![](https://onaqesjswnxzcxiflmld.supabase.co/storage/v1/object/public/blog-images/post1-how-i-created-this-blog/editor-mode.png)

All this led me to see if there was another Markdown library that I could use and I landed with [Markdown-It](https://github.com/markdown-it/markdown-it). I did not face many issues with this library and was able to successfully implement the preview mode. But, this switch was made wasy because I was working off a seperate branch for preview mode and all I had to do was abandon that branch and start off from where I was before preview mode. 

###### Pro Tip 💡

A good practice here would be to create a new branch to check in all the changes it does for this new feature. To create a new branch, you can run the following command: Eg: 

```git
git branch checkout -b preview-feature
```

and then make commits to this new branch as you go on developing the feature.

> **Learning #6: Ask it for an execution plan when creating a new feature**

For example, I wanted a preview mode feature to be able to see how my input would be rendered in the final blog post. I prompted 

```
Can we have writer mode support markdown? Ensure that the changes to our convertor function from html are also updated. Do this in an iterative manner by first telling me the steps. Do not change any code yet
```

It gave me an execution plan:

```
1. Initial Setup
...
2. Converter Functions Update
...
3. UI Updates
...
```

This helped me confirm that the path it is going down is right and allows me to proceed in an iterative manner as I can test each step individually and commit my code as we go along.

> **Learning #7 - The AI model has been trained on code that used different versions of the same dependency**

This one is a more intricate finding. When the model uses external dependencies like the Markdown renderer for example, it gets confused as to certain configurations or types or syntax that are no longer present in the current version. Example:

```typescript
marked.setOptions({
    gfm: true,
    breaks: true,
    pedantic: false 
	smartLists: true // This config option is from an older version
  })

```

```
Object literal may only specify known properties, and 'smartLists' does not exist in type 'MarkedOptions'.
```

I suspect this because the model’s training data might have code bases that used different versions of the dependency. **Fixing this issue is more nuanced as you cannot ask the model itself to solve this issue.** You will need some help from StackOverflow or Google :) 

#### Going back to Lovable

Finally, after I pushed all my commits to the GitHub repo, Lovable automatically picks them up and updates its deployment. I had to make some minor fixes through the Lovable UI to fix the connection to Supabase as it was not using the environment secrets correctly.

#### Bonus: Using SuperWhisper to talk to AI through chat interfaces

As you noticed earlier, I mention a tool I used called [SuperWhisper](https://superwhisper.com/). If you noticed the prompts in this post, there are some that are verbose. It may be faster and easier for the developer to speak these out and have it be pasted into the textbox automatically. This is exactly what SuperWhisper can be used for. 

![](https://onaqesjswnxzcxiflmld.supabase.co/storage/v1/object/public/blog-images/post1-how-i-created-this-blog/super-whisper.png)

I invoke it using *Ctrl+ Space* on Mac and talk through the mic and voila it transcribes that and pastes it into the chat window of Cursor. Makes it super handy!

#### Bonus: Generating Blog Images Using DiffusionBee

I wanted a default image to be placed on my blog page in case an image fails to load from Supabase. I used [DiffusionBee](https://diffusionbee.com/) to generate an image with the following prompt:

```
cartoon style not found image with a robot battle scene in new york
```

and I got this:

![](https://onaqesjswnxzcxiflmld.supabase.co/storage/v1/object/public/blog-images/post1-how-i-created-this-blog/imaginerator.png)

Yay or nay? 😃

#### Future improvements

I will need to test how this scales as I write more content. I have a few open questions to solve:

1. How many posts will this scale to under the free tier?
2. What length can each post be?

There is flexibility in increasing the type of instance in Supabase to scale horizontally and vertically. You can also create Read Replicas to scale horizontally.

If you have come this far, thanks for reading!


Essays

Migrating to NextJS and Deploying to Vercel

How I created this Blog with just $20 [2025 Edition]