Hello World from 2025

The code was written by AI, but this article was not.

0 Preface

0.1 Motivation and Background

After ChatGPT matured, I’ve been using GitHub Copilot to assist with development at work. Across enough projects, I gradually found that the amount of code I need to write myself is decreasing — more time can be spent observing and thinking about business, and designing and experimenting with architectures and solutions.

After Anthropic released Claude Sonnet 3.5, both Cursor and Windsurf launched AI Agents based on Claude Sonnet 3.5/3.7 that can already handle most of the capability to convert business PRD documents into actual code. While the GPT KOLs on X are still immersed in using Agents and MCP to build beautiful interfaces to consume gossip from major internet companies, I believe most full-stack developers who have experienced the PHP and jQuery era are already capable of controlling Sonnet to output various front-end and back-end code through precise Prompts to assemble an excellent scenario — regardless of whether it has a business use case, this is a very worthwhile attempt.

In my ten-year career, I’ve assigned every full-stack developer I’ve mentored one task: build a dynamic blog using the latest tech stack. Although there have always been many mature solutions on the market, only by starting from coding all the way to purchasing a domain and getting the blog online can you truly understand the underlying principles. This is the best practice project for beginners who can’t find projects. Today, I think I can also use this topic to experiment — building a dynamic blog in a Vibe Coding way.

0.2 What’s the Goal

A blog website needs many things. If you’ve browsed other people’s websites while searching for bugs on Google, you’ll find that most blogs include: Home, About Me, Portfolio, Articles, and possibly other pages like Podcast, Product List, etc. depending on the author’s interests.

Other features are similar across blogs. I’ll provide a TODO list to show current progress:

Another goal is to complete the website construction as quickly as possible while writing as little code as possible.

1 Getting Started

1.1 Choose Your Hero

Next.js

I’ve been using Next.js in my work recently. For those who experienced the PHP era, it’s very familiar and is one of the preferred frameworks for full-stack engineers.

For languages and frameworks I’m familiar with, I can quickly verify whether the code generated by large models meets expectations. For unsatisfactory results, I can quickly modify the Prompt or directly modify the code to meet requirements, rather than waiting for the AI Agent to complete it.

HeroUI (NextUI)

If you don’t want to spend effort on styles or waste time on CSS, choosing a component library is the most convenient option. You can assume the large model has already learned HeroUI’s styles and usage, and directly ask it to assemble the components you need.

How to verify that the large model has learned HeroUI’s styles and usage? You can ask it questions about the component library documentation content in Cursor or Windsurf’s chat mode, then compare whether the generated code meets expectations.

Component library: HeroUI

1.2 npm run dev

Experienced engineers can build an empty project through Next’s CLI. For speed, I chose to directly use HeroUI’s template code to run, and after aligning some dependency versions in package.json, I could begin.

2 Going Live

2.1 Choose a Hosting Service - Vercel

Vercel is an excellent hosting service. For Next.js projects with little traffic, it completely meets needs without any cost. Follow the official website steps to connect to a GitHub repository for one-click deployment.

2.2 Choose a Domain - Cloudflare

Cloudflare can purchase domains for a few dozen yuan, then complete domain resolution to the Vercel deployment instance for access.

3 Summary

The entire process took less than half an hour — even shorter than writing this article.
Except for some styles and features that were manually modified (issues the AI couldn’t perceive), everything else was completed by the large model itself.
The deployment runs entirely on Vercel. Errors caused by npm build were resolved by copying the error stack to the large model.
Functional requirements can mostly be implemented precisely; styles that rely on component libraries can also be handled.

An easter egg: You might not expect that this website’s logo was also directly generated as SVG by the large model — abstract and mysterious.