Behind the ScenesBuilding a No-Code Operations Site with S3 + CloudFront + Route 53

Prologue: 2 Days That Overturned "Website Development" Common Sense

"Building a professional website requires weeks of coding" That was my fixed mindset until I completed an enterprise-level site in just 1-2 days. And I didn't write a single line of programming code. This article is a real report on how I built AWS S3 + CloudFront + Route 53 infrastructure using only AI agents and voice input. I'll share not only the technical details, but also "why this became possible" and "where I stumbled and how I overcame it."

Chapter 1: Technical Architecture - More Professional Than It Looks

"Wait, this is a personal site?" Infrastructure

Let me be honest. The backend of this site uses professional infrastructure at the level used by startups and small businesses.

• Route 53: Custom domain (pochanglab.com) acquisition and DNS management
• CloudFront: Globally distributed CDN for high-speed delivery, HTTPS support
• S3: Static website hosting (99.999999999% availability)
• GitHub Actions: Complete automation from code updates to production deployment

🏗️ Complete Infrastructure Overview

Architecture Order: Client → Route 53 (DNS) → CloudFront (CDN) → S3 (Storage). S3 is at the very back, with CloudFront closer to the client.

Technology Stack That Would Surprise Developers

• Next.js 15 (App Router): Latest React framework
• TypeScript: Type-safe programming language
• Tailwind CSS: Modern CSS design methodology
• Lucide React: Beautiful icon library

💻 Frontend Technology

Looking at this, you might think "Wow, this looks difficult...". But don't worry. The actual work was just giving voice instructions.

Chapter 2: The Magic Revealed - The Power of AI × Voice Input

"Just talking creates a website" was actually true

This is the core of the story.

What I did was really simple:

1. Activate voice input on MacBook Air (Windows: Win + H)
2. Describe the website I wanted to create in detail
3. AI agent (Cursor) designs and implements
4. "Please adjust this a bit more" with voice instructions

That's it.

Why Voice Input is Revolutionary

Why voice input?

After actually using it, I discovered that voice input has three major benefits that text input cannot provide:

⚡ Express at the speed of thought You can convey ideas that come to mind at the speed you think them. When typing on a keyboard, you might forget what you wanted to say mid-way, but with voice, you can speak everything at once.

💪 No fatigue Typing long text is really tiring. But speaking isn't tiring. In fact, speaking more allows you to give AI more detailed instructions, dramatically improving output accuracy.

🎯 Nuances are conveyed "Like this" or "make it a bit more casual" - these nuances that are difficult to express in text are naturally conveyed through voice.

Actual Prompt Example: This Really Creates a Website

This is what I actually said to the AI:

"Well, I acquired the domain pochanglab.com through AWS Route53. First, please set up a foundation for a nice homepage that's common in the world, and then, I've prepared a separate instruction document for ChatGPT about what kind of content I want for the homepage, so I'll attach that. Please create it according to that. Make it responsive so it looks good on smartphones too. Also, please enable Japanese and English switching. I need a sitemap and RSS feed. I want to eventually distribute it as a static site through S3 and CloudFront, so please consider that too. Oh, and please create an operation manual in Markdown format. Also, after creation, please make it easy to update by setting up GitHub Actions for deployment. Something like automatic deployment when merged to the main branch."

With just this, a fully functional blog system was completed. Of course, I had to provide GitHub and AWS authentication credentials through dialogue.

Chapter 3: Production Journal - 2 Days of Stumbling and Discovery

Day 1 Morning: The Surprising Simplicity of Foundation Building

9 AM: "Alright, let's build a website"

First, domain acquisition. I acquired pochanglab.com through Route 53 (about $15/year).

Next, S3 bucket and CloudFront setup. Actually, these were also completely automated just by instructing Cursor's AI to "Please automatically build infrastructure with AWS CDK". SSL certificates included, no manual configuration was needed.

11 AM: "Huh, the foundation is already complete?"

The foundation was completed faster than expected. It was surprisingly simple.

Day 1 Afternoon: Meeting the Next.js Development Environment

1 PM: First encounter with Cursor

I started using "Cursor", an AI agent-integrated editor. Initially, I used Cursor Auto, but switched when GPT-5 appeared.

This decision was absolutely correct. I exceeded the $20 monthly fee by about $18, but it was worth every penny.

Day 1 Evening: The First Major Wall

5 PM: "I want to display YouTube videos..."

Here I hit the first major wall.

Me: "Please retrieve videos from a YouTube playlist and display them" AI: "I'm sorry, but I cannot do that"

"Eh, you can't?"

But I didn't give up here. I opened ChatGPT separately and researched "How to use YouTube Data API". Then, I taught that information to Cursor's AI.

Then...

AI: "Understood. I will implement it using YouTube Data API"

This was the discovery of "reverse education". Rather than asking AI agents directly, it was more effective to research with higher-tier models first, then teach them.

Day 2 Morning: The Miracle of Multilingual Support

10 AM: "I want to support both Japanese and English"

Me: "Please add Japanese and English switching functionality"

What the AI returned was a perfectly functioning multilingual switching system. It was the moment when a single instruction implemented functionality far beyond expectations.

Day 2 Afternoon: Trials in Production Environment

2 PM: "Huh? It's not working in production..."

While it worked perfectly locally, some functions didn't work when deployed to CloudFront.

This was the difference between local and production environments, a path every developer goes through.

• Explicit static export configuration in next.config.js
• API route fixes
• Routing design review

Solutions:

4 PM: "Alright, it's completely working!"

I confirmed that all functions were working normally in the production environment.

Chapter 4: The Magic of Automation - Meeting GitHub Actions

"The website updates automatically when code is pushed"

The last thing I set up was the automatic deployment mechanism.

name: Deploy to S3 (Static Export)
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm ci
      - name: Build site
        run: npm run build
      - name: Deploy to S3
        run: aws s3 sync ./out s3://$S3_BUCKET --delete
        env:
          S3_BUCKET: ${{ secrets.S3_BUCKET }}
      - name: Invalidate CloudFront
        run: |
          aws cloudfront create-invalidation             --distribution-id $DISTRIBUTION_ID             --paths "/*"
        env:
          DISTRIBUTION_ID: ${{ secrets.CF_DIST_ID }}

Now, just by updating code and pushing to GitHub, it becomes accessible from around the world in about 1.5 minutes.

Chapter 5: MCP Revolution - Issue Management Also Automated

Smartphone Late-Night Inspiration Management Method

This was a really convenient discovery.

1. Check my site from smartphone in bed
2. Record points of interest as GitHub Issues (with labels)
3. Next morning, instruct AI agent to "fix all issues labeled 'bug'"

🌙 Night Routine

Actual instruction example:

"Can you please fix all issues labeled 'bug' using GitHub MCP? Please create branches and PRs. In the PR body, please list #<issue numbers> and set up auto-close. After completion, please execute deployment and provide production URLs with comments asking for 'visual OK confirmation'."

Result: With one morning instruction, all problems found the night before were solved.

Chapter 6: The Truth About Costs - The Shock of Just a Few Dollars Monthly

"Wait, that's it?" Monthly Costs

Despite being a professional site, monthly costs are surprisingly low:

• Route 53: $0.50 (domain management fee)
• S3: $1-3 (depending on access count)
• CloudFront: $1-5 (depending on distribution volume)
• Total: About $3-9 monthly

💰 Actual Monthly Costs

• Cursor: $20/month (excess charges when using GPT-5)
• ChatGPT Plus: $20/month

🛠️ Development Tools

Cost Philosophy: Since I use Cursor and ChatGPT for development and other work, I don't include them in the website production cost. I leave difficult parts to paid models, and since I can usually proceed with Cursor Auto, there are no maintenance costs.

Comparison with Traditional Methods

• Traditional: Planning 1 week + Design 1 week + Implementation 2-4 weeks = 4-6 weeks
• AI Collaboration: Planning half day + Implementation 1-2 days = 2-3 days

⏱️ Time Cost Revolution

I achieved about 10-20 times efficiency improvement.

Chapter 7: The Path to Voice Input Mastery

OS Standard vs ChatGPT Voice: The Art of Usage Differentiation

After extensively using voice input, here's the optimal solution for each device:

• High stability
• No interruption even with 3-5 minute long text
• Very high accuracy

🎤 Long text & Detailed explanation → OS standard voice input (macOS standard, Windows: Win + H)

• Fast response
• Natural conversation format
• However, with 2-3 minute voice input, errors sometimes occurred, so I'm not very trusting of it

💬 Short text & Dialogue → ChatGPT voice input

• Voice recognition is unstable for technical terms
• Manual correction afterward is more efficient

⌨️ Technical terms → Manual input supplementation

Chapter 8: Golden Rules Learned from Stumbling

Rule 1: "Small, Fast, and Reliable"

Understanding AI Agent Characteristics

AI is wonderful, but sometimes it "breaks things that are working".

• Commit even small fixes frequently
• Verify operation before merging to main branch
• Always keep diffs thin

Countermeasures:

Rule 2: Self-verification Before "Please Verify"

Preventing "Verification Request Whiffs"

Previously, I sometimes said "please verify" when things were clearly not working.

Improvement Strategy: Build a mechanism for AI agents to perform curl-based operation verification themselves.

# Automatic verification script example
curl -s http://localhost:3000/ | grep "実験室" > /dev/null
if [ $? -eq 0 ]; then
  echo "✅ Site operating normally"
else
  echo "❌ Error detected"
fi

Rule 3: The Power of "Reverse Education"

Teaching Cursor Information Researched with ChatGPT

This was the most effective technique:

1. Research technical information in detail with ChatGPT Plus
2. Organize that information and teach it to Cursor
3. Cursor accurately implements it

Chapter 9: Google AdSense and SEO - The Path to Monetization

Reliable Implementation Using the Same Method as Existing Pages

Google Analytics implementation, in preparation for future use of AdSense and other services, adopted the same method proven on existing pages.

• Structured data (JSON-LD): Accurately communicate article information to search engines
• OpenGraph & Twitter Card: Optimize appearance when shared on SNS
• Automatic sitemap generation: /sitemap.xml, /sitemap-blog.xml
• RSS feed: /api/blog/feed.xml for subscriber acquisition

📊 Complete SEO Measures

Chapter 10: Future Prospects - Possibilities as a Laboratory

To You Reading This Article

Perhaps reading this article makes you think "This seems impossible for me...".

But I also started from a state where there were many parts of detailed configurations I didn't understand well.

The important thing is not aiming for perfection. First, create something that works, then improve it. With AI agents, that's really possible.

What I Want to Do in This "Laboratory" Going Forward

• New AI tool verification records
• Infrastructure optimization experiment results
• Usability improvement initiatives
• Monetization strategy verification data

🧪 Continuous Experiment Themes

Finally: The Future of Human-AI Collaboration

This article was actually structured and written by an AI agent based on voice input content.

Did you notice while reading? Human experiences and emotions, refined by AI into readable text. This might be the ideal form of human-AI collaboration.