No Code Written: Launching a Personal Website in Two Hours with Gemini + Qoder

The Era Where Anyone Can Build a Website Has Arrived

In today's rapidly evolving AI landscape, the barrier to creating a personal website has dropped to an unprecedented low. Bilibili creator Qiu Yang Chris proved it through hands-on practice: without writing a single line of code, he built a fully functional, visually polished personal website and successfully deployed it online — all in just over an hour.

His core tool combination: Gemini 3 (Google's latest viral model) for generating frontend code, and Qoder (an AI coding tool) for debugging and deployment. This workflow demonstrates just how far Vibe Coding has evolved.

Vibe Coding is a concept coined by prominent AI figure Andrej Karpathy in early 2025. It describes an entirely new programming paradigm: instead of writing code line by line, developers describe their desired outcome and "vibe" to an AI in natural language, and the AI handles the actual code implementation. The developer's role shifts from "code writer" to "intent communicator and quality reviewer." The reason this concept sparked widespread discussion is that it fundamentally changes the answer to "who can build software" — programming ability is no longer the bottleneck; clear requirement articulation and aesthetic judgment have become the core competitive advantages.

Why Does Everyone Need a Personal Website?

In the internet age, a personal website is your "digital business card." Whether you're a student, office professional, engineer, or creative artist, you need a platform to centrally showcase your work and content.

Qiu Yang's personal website consists of three main sections:

• Personal Introduction: Name, title (Software Engineer and Tech Blogger), external links (GitHub, Xiaohongshu, Bilibili), and contact information
• Content Creation: Article and video summaries that link to the original content when clicked
• Project Showcase: Open-source projects and products, such as OpenCrossGame, an outfit inspiration AI app, and more

The site also features dynamic lighting effects — a light follows the cursor when hovering over panels, creating an overall sci-fi aesthetic with an impressive visual experience.

Step One: Generate Frontend Code with Gemini 3

What Is Gemini 3?

Gemini 3 is the latest generation multimodal large language model released by Google DeepMind in 2025, representing a major iteration of the Gemini series. Compared to its predecessors, Gemini 3 shows significant improvements in code generation, image understanding and generation, and long-context processing. The reason it excels in website-building scenarios is its ability to simultaneously understand natural language descriptions, reference website visual layouts, and directly output runnable HTML/CSS/JavaScript code. This "see it and replicate it" capability fundamentally relies on the model's training on massive amounts of open-source website code and design assets, giving it cross-modal reasoning abilities to translate visual design intent into frontend code.

Core Prompting Strategies

The entire website's frontend code was generated entirely by Gemini 3. The key lies in how you interact with the AI effectively. Qiu Yang summarized several critical prompting strategies:

1. Clear Requirement Descriptions: Tell Gemini you want to build a personal website, provide background information, and specify which content modules to include.

2. Leverage Its Replication Ability: This is a point Qiu Yang particularly emphasized — Gemini 3's website replication capability is remarkably strong. You can find a website style you like, give Gemini the link directly, and have it generate a similar result, then fine-tune the details from there. Behind this capability is Gemini 3's powerful multimodal understanding — it can not only "read" a webpage's source code structure but also visually understand the page's layout, color scheme, and interaction logic, then translate that design language into entirely new code.

3. Iterative Refinement:

• Not happy with the background texture? Tell it "no frosted glass effect, go for a sci-fi style"
• Icons don't look right? Find better icon assets and provide them for replacement
• Interaction details? For example, "show the platform name when hovering over an icon"

Image Generation

When specific-style background images were needed, Qiu Yang had Gemini use its image generation capabilities to create sci-fi-themed assets, achieving visual consistency between text and imagery. Gemini 3's multimodal capabilities mean it can generate both code and images within the same conversation, and this "one-stop" creative experience significantly reduces the friction of switching between different tools.

Step Two: Debug and Deploy with Qoder

What Is Qoder?

Qoder is an AI-powered coding assistant tool, positioned similarly to Cursor, Windsurf, and other AI IDEs (Integrated Development Environments). Its core value lies in providing a non-technical-user-friendly interface that allows users to complete code debugging, file management, and project deployment through conversation. Unlike generating code directly on Gemini's web interface, Qoder provides a complete project management environment — you can preview webpage results, modify specific files, run a local server, and execute Git and deployment commands within it. It essentially serves as "the bridge between AI and the actual development environment," enabling users unfamiliar with command-line operations to complete the last mile from code to launch.

Local Debugging Workflow

The code generated by Gemini is a complete frontend project, but the links and content are all templated placeholders. The next step is to complete personalized replacements and debugging in Qoder.

Specific workflow:

1. Copy and paste the Gemini-generated code into a Qoder project
2. Tell Qoder "Please launch this in the local browser, I want to debug"
3. Use prompts for content replacement, for example: "I have three creative videos with these corresponding links — please generate summaries and update the article and video section"
4. Specify interaction details: "When clicking a summary, open the external link in a new tab"

Git Commit: The Safety Net of Version Control

Qiu Yang specifically explained the concept of Git Commit for non-technical viewers: it's essentially taking a "snapshot" of your code. When you're satisfied with a particular version, you make a commit to save it.

Git is a distributed version control system created by Linux creator Linus Torvalds in 2005, and it has since become the de facto standard in the software development industry. Each commit actually records the complete state of all project files at that moment, along with a descriptive message.

The benefit: even if subsequent changes completely mess up the page, you can always roll back to a previously satisfactory version. For Vibe Coding, this habit is especially important — because AI-generated code may contain unpredictable changes each time (for instance, you only wanted to change a button color, but the AI went ahead and restructured the entire page layout). Frequent commits are like frequent saves in a video game, ensuring you can always "load" back to any satisfactory state. This is one of the most important safety practices in human-AI collaborative development.

One-Line Deployment

Once debugging is complete, the deployment process is extremely simple: just tell Qoder "Deploy the project to Vercel."

Vercel is currently one of the world's most popular frontend hosting and deployment platforms, founded by Guillermo Rauch, the creator of the Next.js framework. It has become an ideal choice for zero-code website building because it simplifies the traditionally complex deployment process (purchasing servers, configuring environments, setting up HTTPS certificates, CDN acceleration, etc.) into a near-one-click operation. Vercel uses an Edge Network architecture that automatically distributes your website to dozens of global nodes, ensuring fast loading for visitors regardless of their location. The free tier is more than sufficient for personal projects, including 100GB of monthly bandwidth and automatic HTTPS encryption.

All you need to do:

1. Register an account on Vercel
2. Have Qoder execute the deployment command
3. Once deployed, you'll receive a default domain name and your site is live

If you have your own domain, you can also map a custom domain to Vercel through DNS, making your web address more personalized. DNS (Domain Name System) is the internet's "phone book," responsible for translating human-readable domain names (like example.com) into computer-recognizable IP addresses. The specific process involves adding a CNAME record in your domain registrar's management panel (such as Cloudflare, Alibaba Cloud, GoDaddy, etc.) pointing your domain to the address provided by Vercel. This configuration usually takes just a few minutes, though global DNS propagation may take anywhere from a few minutes to 48 hours. Having a custom domain not only makes your URL more professional and memorable but also helps build your personal brand as a long-term digital asset.

Complete Workflow Summary and Reflections

The entire zero-code website building workflow can be summarized as:

Gemini 3 (creativity + code generation) → Qoder (debugging + personalization) → Vercel (deployment)

• Time Cost: Approximately 1–2 hours
• Technical Barrier: Zero coding knowledge required
• Core Skills: Clear requirement articulation + aesthetic judgment + patience for iteration

The significance of this case goes beyond just building a website — it demonstrates a new creative paradigm: you don't need to know how to code, but you need to know what you want. AI handles the implementation; you handle the decisions and aesthetics. As Qiu Yang wrote in his website's slogan: "Anyone can build a personalized life through AI."

The deeper implications of this paradigm shift are worth contemplating: once code generation is taken over by AI, the definition of "knowing how to program" is being rewritten. The core skills of the future may no longer be mastering the syntax of a particular programming language, but rather having clear product thinking, good aesthetic taste, and the communication ability to collaborate efficiently with AI.

For those who want to give it a try, I recommend starting by imitating a website style you like, leveraging Gemini's replication ability to quickly generate a first draft, then iterating through repeated conversations until you're satisfied. The technical barrier is no longer an obstacle — the real barrier is whether you're willing to spend two hours giving it a shot.