Build a Website with AI from Scratch: A Complete Hands-On Guide from Generation to Deployment

Introduction

More and more non-technical users are starting to use AI tools to build their own websites and products. This is known as "Vibe Coding" — instead of writing code, you describe your requirements in natural language and let AI generate complete web applications for you. This concept was proposed by OpenAI co-founder Andrej Karpathy in early 2025, with the core idea of transforming programming from "precise instruction input" to "intent expression and iterative dialogue." Unlike traditional low-code/no-code platforms — which still require users to operate within preset components and logic frameworks — Vibe Coding relies entirely on AI's natural language understanding to generate arbitrary forms of code, dramatically lowering the barrier to software development.

But generating code is only the first step. How to deploy it and make it directly accessible to users in China is where many people get stuck.

This article is based on the hands-on experience of a Bilibili content creator, outlining the complete workflow from product prototype design, AI code generation, to final deployment, helping zero-experience users avoid common pitfalls.

Step 1: Organize Your Product Prototype with AI

Define Requirements — Write Documentation First

Many people jump straight into code generation tools and start writing requirements, only to end up going back and forth with extremely low efficiency. A better approach is: first use a regular AI chat tool to organize your content into a document.

Specific steps:

• Open Google Gemini (or another AI chat tool)
• Tell it what product you want to build (e.g., a community showcase page, personal introduction website, small utility, etc.)
• Organize your core selling points, service content, and copywriting needs into a complete document

This step is essentially your product's prototype design. You need to think clearly: What information should the page display? What are the key highlights? What action should users take after seeing it?

Why Not Write Copy Directly in the Generation Tool?

Because code generation tools have limited context windows. Mixing requirement organization with code generation can easily cause the AI to "go off track." The context window is a core parameter of large language models, referring to the total amount of text the model can "remember" and process in a single conversation, typically measured in token count. When you discuss product copy and request code generation in the same conversation, the large volume of copy content occupies context window space, causing the model to potentially "forget" earlier requirements when generating code, or to misunderstand complex instructions.

Separating the processes — documentation stays as documentation, generation stays as generation — is essentially a "context management" strategy that ensures the AI at each stage can focus on the current task, resulting in higher efficiency.

Step 2: Generate Web Page Code with Google AI Studio

Enter Builder Mode

Open Google AI Studio (formerly Firebase Studio) and find the Builder feature. This is Google's AI code generation tool that can generate complete web applications directly from natural language descriptions.

Google AI Studio was originally a developer platform launched by Google DeepMind for testing and calling Gemini series models. In 2025, Google deeply integrated it with Firebase (Google's application development platform) and launched Firebase Studio, whose Builder feature allows users to generate complete web applications through natural language descriptions. Firebase Studio is based on a cloud IDE environment with built-in code editor, live preview, and version control, allowing users to complete the entire workflow from code generation to deployment without installing any local development environment.

Workflow:

1. Click Builder and input your requirements
2. Feed it the document you organized earlier (you can download it locally and upload, or share via Google Docs)
3. Explicitly tell it: "I want to build a static website"

Understanding What "Static Website" Means

A static website is one where all page content is determined at deployment time. When users visit, the server directly returns pre-generated HTML, CSS, and JavaScript files without needing server-side real-time computation or database queries. In contrast, dynamic websites require backend servers running programs (like Node.js, Python, etc.) to generate page content in real-time based on user requests. The advantages of static websites include: fast loading speed, high security (no server-side vulnerabilities), and extremely low deployment costs (even free), making them ideal for showcase pages. Modern static websites can still achieve rich front-end interactive effects through JavaScript (such as animations, popups, form validation, etc.) — they just don't involve server-side data processing.

Key Prompt Strategies

When communicating with AI Studio, keep these points in mind:

• Specify the website type: If it doesn't involve AI API calls or backend interactions, just say "pure static website"
• Don't over-specify design details: Let the AI quickly produce a first version, then gradually fine-tune
• Iterate step by step: For example, first generate the main framework, then request additions like popups, animations, and other details

In the actual case, the content creator first had AI generate a basic version of the community showcase page, then gradually added a "lock in early bird price" popup component, contact information display, and other features — all accomplished through natural language conversation.

Step 3: Push Code to GitHub

Once the webpage is debugged to your satisfaction in AI Studio, you need to save the code to a GitHub repository.

GitHub is the world's largest code hosting platform, built on the Git version control system. For zero-experience users, there are a few core concepts to understand: a "Repository" is where all code files for a project are stored; "Push" is the operation of uploading local or cloud code changes to a GitHub repository; a "Branch" is a different version line of code, with the default main branch usually called main or master. GitHub is not just a code storage tool — it's the collaboration hub of modern software development. Almost all mainstream deployment platforms (like Netlify, Vercel) support pulling code directly from GitHub repositories for automatic deployment, which is why you need to push code to GitHub first.

Specific steps:

1. Click the Push button in AI Studio
2. Select push to GitHub
3. GitHub will automatically check and save your code

If this is your first time, you'll need to register a GitHub account and complete the connection with AI Studio. While this step isn't complicated, it may take zero-experience users some time to familiarize themselves with basic Git concepts. The good news is that in this workflow, you don't need to learn Git command-line operations — AI Studio has encapsulated the Push operation into a single button click.

Step 4: Deploy via Netlify (Accessible in China)

Why Not Use Vercel?

Many tutorials recommend Vercel as a deployment tool. It's indeed user-friendly, but has one fatal problem: websites deployed on it cannot be directly accessed in China — they require a VPN. For scenarios where you want to share with friends in China, this is obviously unsuitable.

Vercel and Netlify are both representative deployment platforms of the JAMstack architecture, offering one-stop services from code to launch. Vercel was developed by the creators of Next.js, and its global CDN node distribution focuses more on North American and European markets. Its domains (*.vercel.app) have DNS resolution and network connectivity issues in mainland China, with some regions being completely blocked.

Recommended Solution: Netlify

After hands-on testing, the content creator recommends using Netlify, with these advantages:

• Free tier is sufficient for personal use
• Generated links after deployment can be directly opened in China
• Simple workflow, suitable for beginners

Netlify's CDN network coverage strategy differs from Vercel's. Its default domain (*.netlify.app) is currently directly accessible in most regions of China without a VPN. However, note that this accessibility is not permanently guaranteed. If your project has long-term stable operation needs, it's ultimately recommended to purchase your own domain and complete ICP filing.

Netlify Deployment Steps

1. Go to the Netlify website and register an account
2. Click "Add new project" → "Import existing project"
3. Select GitHub as the code source
4. Select the repository where you just pushed your code
5. Project name can be anything; leave the branch, deploy directory, and build command fields empty
6. API Key field: For pure static websites, enter anything (since it won't actually be called)
7. Click "Deploy"

The deployment process is fully automatic. Wait a few minutes and an accessible link will be generated. Send this link on WeChat, and friends can see your website by simply clicking it.

Results and Important Notes

Quality of AI-Generated Web Pages

From actual demonstrations, AI-generated web pages feature:

• Professional UI design and color schemes
• Smooth page animations (scroll animations, hover effects)
• Responsive layout with good mobile experience
• Complete interaction logic (popups, buttons, etc.)

Suitable Use Cases

This workflow is suitable for:

• Personal introduction/portfolio websites
• Community or course showcase landing pages
• Small games and utility applications
• Any static project that doesn't require a backend or AI API calls

Unsuitable Use Cases

If your application requires:

• Calling AI large models (like GPT, Claude, etc.)
• User login and data storage
• Real-time interactive features

Then you'll need to handle API Key security, backend services, and other issues — that's a different level of deployment solution. Such dynamic applications typically require cloud functions (like Netlify Functions, AWS Lambda) or independent backend servers, along with considerations for database selection, user authentication systems, and other more complex tech stacks. The learning curve for zero-experience users would be much steeper.

Summary

The entire zero-experience AI website building workflow can be summarized in four steps:

1. Gemini for documentation → Define product requirements and content
2. AI Studio for code generation → Iterate through conversation until you're satisfied with the webpage
3. Push to GitHub → Code version management
4. One-click Netlify deployment → Generate a link accessible in China

For zero-experience users, the biggest pitfall isn't in the AI code generation phase, but in the "infrastructure" layer of GitHub operations and deployment configuration. But once you've run through it once, replicating this workflow becomes very fast. The entire process requires writing zero lines of code, truly realizing the "Vibe Coding" philosophy.

Key Takeaways

• Using Google AI Studio's Builder feature, you can generate complete static web applications through natural language conversation
• Before deployment, use AI tools like Gemini to organize product documentation — separating requirement organization from code generation is more efficient
• Websites deployed on Vercel are not directly accessible in China; Netlify is recommended as a free and China-accessible deployment solution
• For pure static website deployment, the API Key field can be filled with anything — no real key is needed
• The complete workflow is: Gemini for documentation → AI Studio for code generation → Push to GitHub → Deploy on Netlify