🚀 From Zero to One: My Website Development Journey and Beginner's Roadmap

A reference guide for all beginners who want to build a website from scratch

📚 Table of Contents

1. Project Overview
2. My Journey
3. Technology Stack Choices
4. Development Phases
5. Deployment Phase
6. Challenges and Growth
7. Beginner's Roadmap

📋 Project Overview

What is My Website?

This is a personal AI tools collection website that includes:

• Frontend Display: Personal homepage, About me, Articles, Contact
• 5 AI Tool Demos:
  • E-Tester: English test system (complete question bank, scoring, progress tracking)
  • PMentor: Project management competency assessment (questionnaire, AI analysis, IDP reports)
  • Forge: Goal-setting tool (goal generation, evaluation, KPI management)
  • A3Gen: Problem analysis tool (5WHY analysis, root cause mining)
  • PM-Learning: Project management learning system

Technical Architecture

┌─────────────────────────────────────────┐
│      User Access Layer (Nginx)          │
│      https://charleswang.com.cn         │
└─────────────────────────────────────────┘
              ↓
┌─────────────────────────────────────────┐
│    Frontend Service (Astro + React)    │
│    Port: 3000                           │
└─────────────────────────────────────────┘
              ↓
┌─────────────────────────────────────────┐
│    Backend API Service Cluster          │
│    (FastAPI)                             │
│  ┌──────────┬──────────┬──────────┐   │
│  │ E-Tester │ PMentor  │  Forge   │   │
│  │  :5004   │  :5003   │  :5001   │   │
│  └──────────┴──────────┴──────────┘   │
│  ┌──────────┬──────────┐              │
│  │  A3Gen   │PM-Learning│              │
│  │  :5002   │  :5005   │              │
│  └──────────┴──────────┘              │
└─────────────────────────────────────────┘
              ↓
┌─────────────────────────────────────────┐
│    Data Layer (SQLite + File Storage)  │
└─────────────────────────────────────────┘

💭 My Journey

Phase 1: From Idea to Start (Week 1)

Mindset: Excitement + Confusion

What was I thinking?

• "I want to build a personal website to showcase my work"
• "I want to integrate those AI tools together"
• "But I have no idea where to start..."

What did I do?

1. Searched "how to build a website"
2. Watched countless tutorials, but they were all too complex
3. Decided to start with the simplest: make a static page first

Key Decisions:

• ✅ Choose Astro as frontend framework (simple, fast)
• ✅ Decide to build frontend first, add backend later
• ✅ Don't pursue perfection, make a working version first

Phase 2: First Page (Weeks 2-3)

Mindset: Sense of achievement + frustration alternating

What was I thinking?

• "Wow, my first page is live!"
• "Why does it look so ugly?"
• "Why isn't this button working?"

What did I do?

1. Followed Astro official tutorial to create the first page
2. Learned Tailwind CSS to beautify the interface
3. Added navigation bar, footer, and other basic components

Challenges I faced:

• Didn't know how to adjust CSS styles
• Completely unfamiliar with responsive design
• Had to refresh browser every time I changed code to see the effect

Solutions:

• Used Tailwind CSS preset styles
• Referenced designs from other websites
• Used browser developer tools for debugging

Phase 3: Adding First Feature (Weeks 4-5)

Mindset: Nervous + Excited

What was I thinking?

• "I want to build an English test tool"
• "Do I need a backend?"
• "How do I use a database?"

What did I do?

1. Learned FastAPI (Python backend framework)
2. Designed the first API endpoint
3. Connected to SQLite database
4. Integrated frontend and backend

Challenges I faced:

• Didn't know how frontend and backend communicate
• CORS cross-origin issues
• Unfamiliar with database operations

Solutions:

• Used fetch API to send requests
• Configured CORS to allow cross-origin
• Used SQLAlchemy to simplify database operations

Phase 4: Feature Expansion (Weeks 6-10)

Mindset: Growing confidence

What was I thinking?

• "I made the first feature work, I can do more!"
• "Should I add AI features?"
• "How can I make the interface look better?"

What did I do?

1. Added 5 different AI tools
2. Integrated DeepSeek API (AI capabilities)
3. Optimized user experience
4. Added data visualization (radar charts, graphs)

Skills I learned:

• Frontend-backend separation architecture
• RESTful API design
• Async programming (async/await)
• Data visualization (Chart.js)

Phase 5: Deployment (Weeks 11-12)

Mindset: Anxious + Excited

What was I thinking?

• "It works locally, will it work on the server?"
• "How do I buy a server?"
• "How do I configure a domain?"

What did I do?

1. Purchased Alibaba Cloud ECS server
2. Configured Linux environment
3. Deployed code to server
4. Configured Nginx reverse proxy
5. Applied for SSL certificate (HTTPS)

Challenges I faced (This was the most painful phase):

• Windows local development, Linux server deployment, environment inconsistency
• Code worked locally but failed on server
• Didn't know where the problem was, had to troubleshoot step by step

Solutions:

• Detailed documentation of every error and solution
• Created deployment scripts to automate the process
• Learned basic Linux commands
• Used Git for version control

Phase 6: Optimization and Maintenance (Week 13 - Present)

Mindset: Mature + Continuous learning

What was I thinking?

• "The website works, but there's still a lot to improve"
• "User feedback is important"
• "Need to continuously update and maintain"

What did I do?

1. Optimized SEO (search engine optimization)
2. Added monitoring and logging
3. Fixed bugs and improved features
4. Wrote documentation to record experiences

🛠️ Technology Stack Choices

Why These Technologies?

Frontend: Astro + React + Tailwind CSS

Astro:

• ✅ Simple and easy to learn, suitable for beginners
• ✅ Great performance (static site generation)
• ✅ Supports multiple frameworks (React, Vue, etc.)
• ✅ Clear official documentation

React:

• ✅ Component-based development, code reusability
• ✅ Rich ecosystem with many ready-made components
• ✅ Abundant learning resources

Tailwind CSS:

• ✅ No need to write CSS, just use class names
• ✅ Simple responsive design
• ✅ Unified and beautiful styling

Backend: Python + FastAPI

Python:

• ✅ Simple syntax, easy to learn
• ✅ Rich libraries, especially for AI
• ✅ Suitable for rapid development

FastAPI:

• ✅ Modern and fast
• ✅ Auto-generates API documentation
• ✅ Great type hint support
• ✅ Async support

Database: SQLite

Why SQLite?

• ✅ No need to install a separate database server
• ✅ File-based database, simple and easy to use
• ✅ Suitable for small projects
• ✅ Easy to migrate

Deployment: Nginx + Linux

Nginx:

• ✅ Great performance, stable
• ✅ Relatively simple configuration
• ✅ Supports reverse proxy and load balancing

Linux Server:

• ✅ Low cost (Alibaba Cloud ECS)
• ✅ Stable and reliable
• ✅ Learning Linux is very useful

📖 Development Phases Explained

Phase 1: Environment Setup (1-2 days)

Goal: Make code run locally

Steps:

1. Install Node.js

   # Download and install Node.js (https://nodejs.org/)
   # Verify installation
   node --version
   npm --version
   

2. Install Python

   # Download and install Python 3.10+ (https://www.python.org/)
   # Verify installation
   python --version
   

3. Create Frontend Project

   npm create astro@latest charles-genai-site
   cd charles-genai-site
   npm install
   npm run dev
   

4. Create Backend Project

   mkdir english_test_backend
   cd english_test_backend
   python -m venv venv
   venv\Scripts\activate  # Windows
   pip install fastapi uvicorn
   

Checklist:

• Node.js installed successfully
• Python installed successfully
• Frontend project can start (localhost:3000)
• Backend project can start (localhost:5000)

Phase 2: First Page (3-5 days)

Goal: Create a presentable page

Steps:

1. Modify Homepage
   ```astro
   // src/pages/index.astro

   // Page logic

   Welcome to My Website

   ```

2. Add Navigation Bar

   • Create navigation component
   • Add links

3. Beautify Styling

   • Use Tailwind CSS
   • Adjust colors, fonts, spacing

Checklist:

• Homepage displays correctly
• Navigation bar links work
• Styling looks good

Phase 3: First API (5-7 days)

Goal: Frontend and backend can communicate

Steps:

1. Create Backend API

   # english_test_backend/app.py
   from fastapi import FastAPI
   
   app = FastAPI()
   
   @app.get("/api/health")
   def health():
       return {"status": "ok"}
   

2. Frontend Calls API

   // In Astro component
   const response = await fetch('http://localhost:5004/api/health');
   const data = await response.json();
   

3. Configure Proxy (Solve CORS)

   // astro.config.mjs
   export default defineConfig({
     vite: {
       server: {
         proxy: {
           '/api/english-test': {
             target: 'http://localhost:5004',
             changeOrigin: true,
           }
         }
       }
     }
   });
   

Checklist:

• Backend API can return data
• Frontend can call API
• No CORS errors

Phase 4: Database Operations (7-10 days)

Goal: Can store and read data

Steps:

1. Design Database Tables

   # User table, question table, answer table, etc.
   

2. Use SQLAlchemy

   from sqlalchemy import create_engine, Column, Integer, String
   from sqlalchemy.ext.declarative import declarative_base
   
   Base = declarative_base()
   
   class User(Base):
       __tablename__ = 'users'
       id = Column(Integer, primary_key=True)
       name = Column(String)
   

3. CRUD Operations

   • Create
   • Read
   • Update
   • Delete

Checklist:

• Can create data
• Can read data
• Can update data
• Can delete data

Phase 5: Complete Feature (10-15 days)

Goal: Build a complete, usable tool

Steps:

1. Design Feature Flow

   • User enters page
   • Select questions
   • Answer questions
   • Submit answers
   • View results

2. Implement Each Step

   • Frontend interface
   • Backend logic
   • Database operations

3. Test and Debug

   • Test various scenarios
   • Fix bugs
   • Optimize experience

Checklist:

• Feature is complete and usable
• No obvious bugs
• Good user experience

🚀 Deployment Phase Explained

Pre-Deployment Preparation

What you need:

1. Server: Alibaba Cloud ECS (2 cores, 2GB RAM, ¥99/year, ~¥8.25/month or ~$1.15/month)
2. Domain: charleswang.com.cn (~$7/year)
3. SSL Certificate: Alibaba Cloud free certificate

Deployment Steps

1. Connect to Server (10 minutes)

# SSH connection
ssh root@101.37.180.66

# Update system
sudo yum update -y

# Install basic tools
sudo yum install -y git wget curl

2. Install Environment (30 minutes)

# Install Node.js
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

# Install Python
sudo yum install -y python3 python3-pip

# Install Nginx
sudo yum install -y nginx

3. Upload Code (20 minutes)

# Method 1: Use Git
git clone <your-repo-url> /var/www/mywebsite

# Method 2: Use WinSCP to upload files

4. Configure Services (40 minutes)

Configure Backend Service:

# Create systemd service
sudo nano /etc/systemd/system/english-test.service

[Unit]
Description=English Test API
After=network.target

[Service]
WorkingDirectory=/var/www/mywebsite/english_test_backend
ExecStart=/usr/bin/python3 -m uvicorn app:app --host 0.0.0.0 --port 5004
Restart=always

[Install]
WantedBy=multi-user.target

# Start service
sudo systemctl enable english-test
sudo systemctl start english-test

Configure Nginx:

server {
    listen 80;
    server_name charleswang.com.cn;
    
    location / {
        proxy_pass http://localhost:3000;
    }
    
    location /api/english-test/ {
        proxy_pass http://localhost:5004/;
    }
}

5. Configure SSL (30 minutes)

# Use certbot to apply for certificate
sudo yum install -y certbot python3-certbot-nginx
sudo certbot --nginx -d charleswang.com.cn

6. Build Frontend (20 minutes)

cd /var/www/mywebsite/charles-genai-site
npm install
npm run build

# Configure Nginx to point to dist directory

Post-Deployment Checks

Checklist:

• Website is accessible (https://charleswang.com.cn)
• All pages display correctly
• API endpoints work correctly
• HTTPS certificate is valid
• Services auto-restart (test by restarting server)

💥 Challenges and Growth

Biggest Challenge: Cross-Platform Compatibility

Problem: Windows local development, Linux server deployment

Errors Encountered:

1. Line Ending Issues: Windows uses CRLF, Linux uses LF

   • Error: syntax error: unexpected token
   • Solution: Use dos2unix to convert

2. JavaScript Version Issues: Server V8 version is older

   • Error: Unexpected token 'const'
   • Solution: Convert ES6 syntax to ES5

3. Python Version Issues: Local Python 3.9+, server Python 3.6

   • Error: 'type' object is not subscriptable
   • Solution: Use List[str] instead of list[str]

Lessons Learned:

• ✅ Consider deployment environment during development
• ✅ Using Docker can avoid environment differences
• ✅ Document every error and solution in detail

Second Biggest Challenge: Frontend-Backend Communication

Problem: Didn't know how to connect frontend and backend

Errors Encountered:

1. CORS Cross-Origin Error

   • Error: Access-Control-Allow-Origin
   • Solution: Configure CORS or use proxy

2. API Path Errors

   • Error: 404 Not Found
   • Solution: Check Nginx configuration and API paths

3. Data Format Mismatch

   • Error: Frontend receives data but parsing fails
   • Solution: Use JSON format consistently

Lessons Learned:

• ✅ Use API proxy to simplify paths
• ✅ Use consistent data format (JSON)
• ✅ Using TypeScript can avoid type errors

Third Biggest Challenge: Database Operations

Problem: Didn't know how to design and use databases

Errors Encountered:

1. Database Locking

   • Error: database is locked
   • Solution: Use connection pool, close connections promptly

2. Data Loss

   • Error: Data not saved
   • Solution: Ensure transaction commit

3. Query Performance Issues

   • Error: Queries are slow
   • Solution: Add indexes, optimize queries

Lessons Learned:

• ✅ Use ORM (SQLAlchemy) to simplify operations
• ✅ Design database structure well
• ✅ Regular data backups

Most Important Lessons

1. Don't Be Afraid of Errors

   • Every error is a learning opportunity
   • Document errors and solutions

2. Start with Small Features

   • Don't try to build a complete system from the start
   • Make a working minimum viable version first

3. Keep Learning

   • Technology updates quickly
   • Maintain the habit of learning new technologies

4. Write Documentation

   • Document the development process
   • Convenient for future review and sharing

🗺️ Beginner's Roadmap

If you're a complete beginner, learn in this order:

Week 1: Fundamentals

Goal: Understand web development basics

Learning Content:

1. HTML Basics

   • Tags, attributes, structure
   • Practice: Make a simple personal introduction page

2. CSS Basics

   • Selectors, styles, layout
   • Practice: Beautify the personal introduction page

3. JavaScript Basics

   • Variables, functions, events
   • Practice: Add interactive features (button clicks)

Recommended Resources:

• MDN Web Docs (https://developer.mozilla.org/)
• freeCodeCamp (https://www.freecodecamp.org/)

Weeks 2-3: Frontend Framework

Goal: Learn to use modern frontend frameworks

Learning Content:

1. React Basics

   • Components, Props, State
   • Practice: Build a Todo List

2. Astro Basics

   • Pages, components, layouts
   • Practice: Build a blog website

3. Tailwind CSS

   • Utility classes, responsive design
   • Practice: Beautify the blog website

Recommended Resources:

• React Official Docs (https://react.dev/)
• Astro Official Docs (https://astro.build/)

Weeks 4-5: Backend Development

Goal: Learn to create APIs

Learning Content:

1. Python Basics

   • Syntax, data types, functions
   • Practice: Write some small programs

2. FastAPI Basics

   • Routes, requests, responses
   • Practice: Build a simple API

3. Database Basics

   • SQL basics, SQLite usage
   • Practice: Store and query data

Recommended Resources:

• Python Official Tutorial (https://docs.python.org/)
• FastAPI Official Docs (https://fastapi.tiangolo.com/)

Weeks 6-8: Complete Project

Goal: Build a complete project

Project Suggestions:

1. Personal Blog

   • Frontend: Astro + Tailwind
   • Backend: FastAPI
   • Features: Article list, details, search

2. Todo Application

   • Frontend: React
   • Backend: FastAPI
   • Features: CRUD operations, categories

3. Simple Chat Room

   • Frontend: React
   • Backend: FastAPI + WebSocket
   • Features: Real-time chat

Weeks 9-10: Deployment

Goal: Make website accessible on the internet

Learning Content:

1. Linux Basics

   • Basic commands, file operations
   • Practice: Operate on a server

2. Server Configuration

   • Nginx configuration, service management
   • Practice: Deploy a simple website

3. Domain and SSL

   • Domain resolution, certificate application
   • Practice: Configure HTTPS

Recommended Resources:

• Linux Command Reference (https://www.linuxcool.com/)
• Nginx Official Docs (https://nginx.org/en/docs/)

Continuous Learning

Suggestions:

• Write code at least 2-3 times per week
• Contribute to open source projects
• Read technical blogs
• Join technical communities

🎯 Words for Beginners

Don't Be Afraid

• Everyone starts from zero
• Errors are part of learning
• Don't pursue perfection, make something that works first

Learning Methods

1. Hands-on Practice

   • Just watching tutorials isn't enough, you need to write code yourself
   • Try to solve problems yourself first when you encounter them

2. Document the Process

   • Write a blog to document your learning process
   • Record problems you encounter and their solutions

3. Seek Help

   • Join technical communities
   • Provide sufficient information when asking questions

4. Keep Learning

   • Technology updates quickly
   • Maintain the habit of learning

Recommended Learning Path

HTML/CSS/JS Fundamentals (2 weeks)
    ↓
Choose a Frontend Framework (2-3 weeks)
    ↓
Learn Backend Development (2-3 weeks)
    ↓
Build a Complete Project (3-4 weeks)
    ↓
Deploy Online (1-2 weeks)
    ↓
Continuous Improvement and Learning

Common Questions

Q: I have no programming background, can I learn?
A: Yes! As long as you persist in learning and make progress every day, you can build your own website in 1-2 months.

Q: Do I need to buy a server?
A: You can develop locally at first, and consider deployment after you have a working version. Servers aren't expensive, Alibaba Cloud ECS is ¥99/year, averaging about ¥8.25/month (~$1.15/month).

Q: What should I do when I encounter problems?
A:

1. First, look at the error message and understand the problem
2. Search for the error message to see how others solved it
3. If that doesn't work, ask in technical communities

Q: How long does it take to build a website?
A: If you study 2-3 hours per day, you can build a complete website in 1-2 months.

Q: What technologies do I need to learn?
A:

• Frontend: HTML, CSS, JavaScript, React (or Vue)
• Backend: Python (or Node.js), FastAPI (or Express)
• Database: SQLite (simple) or MySQL (complex)
• Deployment: Linux basics, Nginx configuration

🌟 Final Words

Building a website from zero to one, the hardest part isn't the technology, it's getting started.

Don't wait until you're "ready" to start, start now:

1. Open your computer
2. Install Node.js and Python
3. Follow a tutorial to make your first page
4. Solve problems as you encounter them
5. Keep improving

Remember:

• ✅ Every expert was once a beginner
• ✅ Every error is a learning opportunity
• ✅ Continuous learning is more important than talent
• ✅ Hands-on practice is more effective than just watching tutorials

Good luck! 🚀

This document is based on real project experience and is intended to help friends who want to build a website from scratch.

Last updated: November 2025