๐Ÿ“ Tutorials
ยท 4 min read

I Built a Website With AI in One Afternoon โ€” Here Is What Happened


Iโ€™ve been wanting to start a side project for months. You know how it goes โ€” you think about it, research frameworks, bookmark tutorials, and never actually start.

Yesterday I decided to just do it. I opened up an AI coding assistant and said: โ€œLetโ€™s build a website with free developer tools.โ€ Four hours later, I had a live site with 9 working tools, analytics, email capture, and a domain.

Hereโ€™s exactly what happened, step by step.

The idea

I didnโ€™t start with some grand business plan. I started with a question: can AI actually help me build something that makes money? Not in theory โ€” for real.

After going back and forth on ideas (SaaS tool? API service? content site?), I landed on something simple: a blog with free browser-based tools. Think JSON formatters, regex testers, color generators โ€” stuff developers use every day. The twist: every tool runs right on the page. No backend, no sign-ups, no ads (yet).

Why this? Because free tools get shared. People bookmark them, post them on Reddit, link to them from Stack Overflow. Thatโ€™s organic traffic you donโ€™t have to pay for.

Hour 1: Setup

I told the AI to scaffold an Astro blog. Iโ€™d never used Astro before โ€” I just knew it was good for static sites and SEO. The AI installed Node.js (I didnโ€™t even have it on this machine), created the project, and customized the template.

Within 30 minutes I had:

  • A working Astro site with a homepage, blog listing, and about page
  • Custom branding and navigation
  • A content schema that separates โ€œtoolโ€ posts from regular articles

The thing that surprised me: I didnโ€™t write a single line of config. I described what I wanted, the AI wrote it, and it worked.

Hour 2: Building the tools

This is where it got fun. I asked the AI to create interactive tools โ€” one at a time โ€” each as a blog post with embedded JavaScript. No React, no framework overhead. Just HTML, CSS, and vanilla JS inside Markdown files.

In about an hour, we built:

  1. JSON Formatter โ€” paste, format, minify, copy
  2. Base64 Encoder/Decoder โ€” with file upload support
  3. Regex Tester โ€” real-time match highlighting
  4. Color Palette Generator โ€” spacebar to regenerate, lock colors you like
  5. JWT Decoder โ€” shows header, payload, expiration status

Each tool took about 5-10 minutes. The AI wrote the code, I tested it, we fixed bugs, moved on. The biggest issue was that Astroโ€™s Markdown parser kept eating the JavaScript โ€” backticks in scripts got interpreted as code blocks. Took us a few tries to figure that out.

By the end of hour 2, I had 5 working tools. All client-side, zero hosting costs.

Hour 3: More tools + going live

We kept the momentum going and added 4 more tools:

  1. Markdown Preview โ€” live side-by-side editor
  2. Lorem Ipsum Generator โ€” with fun modes (pirate, office jargon)
  3. CSS Gradient Generator โ€” visual builder with CSS export
  4. URL Encoder/Decoder โ€” with encodeURI vs encodeURIComponent explained

Then it was time to go live. I bought a domain (aimadetools.com โ€” โ‚ฌ12/year), pushed to GitHub, and connected to Vercel. The AI walked me through every step, including the DNS configuration.

Total deployment time: about 15 minutes.

Hour 4: The boring (important) stuff

With the site live, we set up everything you need but nobody wants to build:

  • Google Search Console โ€” so Google knows the site exists
  • Google Analytics โ€” to track visitors
  • robots.txt + sitemap โ€” SEO basics
  • Email capture โ€” connected to Kit (formerly ConvertKit), free up to 10,000 subscribers
  • Custom favicon โ€” SVG, looks sharp at any size
  • AI model comparison page โ€” a living reference page I can update with every new model release

Then we restructured the whole site into categories (Developer Tools, AI Tools, Learning Hub, Integrations, Tutorials) because I realized this thing was going to grow.

The total cost

ItemCost
Domain (aimadetools.com)โ‚ฌ12/year
Hosting (Vercel)$0
AI assistantAlready had access
Email capture (Kit)$0
Analytics$0
Total~โ‚ฌ1/month

What I learned

AI is incredible at scaffolding. Setting up a project, writing boilerplate, configuring tools โ€” this used to take me a full weekend. The AI did it in minutes.

AI still makes mistakes. The script/Markdown parsing issue cost us 30 minutes of debugging. The AI suggested a fix that didnโ€™t work, then another that didnโ€™t work, then finally got it right. You still need to understand whatโ€™s happening.

Shipping beats planning. I spent months thinking about side projects. Today I built one. The difference wasnโ€™t skill or knowledge โ€” it was just starting.

The hard part hasnโ€™t started yet. Building the site was the easy part. Getting traffic, building an audience, actually making money โ€” thatโ€™s the real challenge. Iโ€™ll share how that goes in future posts.

Whatโ€™s next

I have a roadmap with 50+ content ideas. The plan is 2-3 posts per week, mixing tools with tutorials and honest write-ups like this one. Iโ€™ll publish monthly income reports with real numbers โ€” even if those numbers are zero for a while.

If you want to follow along, subscribe to the newsletter โ€” Iโ€™ll send updates when I publish new tools and share how the project is going.

And if youโ€™re thinking about starting your own side project: just start. Open a terminal, talk to an AI, and ship something today. You can figure out the rest tomorrow.

Related: How to Choose an AI Coding Agent ยท AI Coding Tools Pricing