🌐 网站从零搭建全流程指南

1 需求规划：先想清楚"做什么"

在写第一行代码之前，先回答三个问题：

• 网站类型：个人博客？企业官网？电商平台？作品集？SaaS 后台？
• 功能需求：是否需要用户注册登录、支付系统、评论互动、后台管理？
• 预算范围：免费方案（GitHub Pages）还是付费 VPS（月费几十到几百）？

2 域名注册：给网站起个"门牌号"

域名选择 3 原则

• 好记：拼音、英文单词、简短组合，避免生僻字和过长的字符串
• 后缀优先 .com：全球通用，认知度最高；备选 .cn（国内）、.net
• 避坑：别用知名品牌/商标当域名（如 taobao-shop.com），会被投诉

注册流程（以阿里云为例，5 分钟搞定）

1. 打开 wanwang.aliyun.com，搜索你想要的域名
2. 选好可用的域名 → 点击"立即购买"
3. 填写域名所有者信息（个人用身份证，企业用营业执照，必须真实）
4. 支付费用（.com 一般 50-100 元/年）→ 拿到域名所有权

3 服务器选购：给网站找个"家"

三种选择，对号入座

新手推荐配置（云服务器）

• CPU/内存：2 核 4G（个人站够用，电商建议 4 核 8G 起步）
• 硬盘：50GB SSD（系统 + 代码 + 数据库足够）
• 带宽：1-3Mbps（个人站 1M 够用，企业站建议 3-5M）
• 操作系统：Ubuntu 22.04 LTS（推荐，社区支持最好）或 CentOS 7.9
• 地域：国内用户选华东/华北/华南节点，海外用户选香港/新加坡（免备案）

4 DNS 解析：让"门牌号"指向"家"

域名注册后需要通过 DNS 解析把域名指向服务器 IP。

A 记录解析步骤

1. 登录域名控制台 → 找到你的域名 → 点击"解析"
2. 添加两条 A 记录：

5 技术栈选型：2025-2026 最新趋势

根据 2025 Stack Overflow 开发者调查和社区实践，以下是最主流的技术组合：

推荐组合速查表

各层详细对比

6 开发编码：从设计到代码

6.1 UI/UX 设计

• 工具：Figma（免费）画原型，确定配色（主色调 ≤3）、字体、导航结构（≤7 栏）
• 响应式：手机流量已占 60%+，必须做移动端适配
• 组件库：TailwindCSS（原子化 CSS）+ shadcn/ui（React）/ Vuetify（Vue）加速开发

6.2 前端开发

# Next.js 项目初始化
npx create-next-app@latest my-website --typescript --tailwind
cd my-website
npm run dev

# Vue 3 项目初始化
npm create vue@latest my-website
cd my-website
npm install
npm run dev

6.3 后端开发

# FastAPI 项目初始化
pip install fastapi uvicorn sqlalchemy
# main.py
from fastapi import FastAPI
app = FastAPI()

@app.get("/")
def root():
    return {"message": "Hello World"}

# 启动
uvicorn main:app --reload
# API 文档自动生成在 http://localhost:8000/docs

6.4 版本控制（必须）

git init
git add .
git commit -m "feat: initial project setup"
git remote add origin https://github.com/你的用户名/项目名.git
git push -u origin main

7 服务器环境搭建：让服务器跑起来

7.1 首次 SSH 登录

# 本地连接服务器（替换为你的 IP）
ssh root@你的服务器IP

# 更新系统
sudo apt update && sudo apt upgrade -y

# 安装基础工具
sudo apt install curl wget git unzip vim -y

7.2 安装 Docker（推荐）

# 一键安装 Docker
curl -fsSL https://get.docker.com | sh

# 安装 Docker Compose
sudo apt install docker-compose-plugin -y

# 把当前用户加入 docker 组（不用每次 sudo）
sudo usermod -aG docker $USER

# 验证
docker --version
docker compose version

7.3 方案 A：宝塔面板（新手友好）

# 一键安装宝塔面板（Ubuntu）
wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sudo bash install.sh

# 安装完成后会显示：
# 面板地址: http://你的IP:8888/xxxxxx
# 用户名: xxxxxx
# 密码: xxxxxx

# 登录面板 → 一键安装 LNMP（Nginx + MySQL + PHP）

7.4 方案 B：纯命令行 Docker 部署（进阶推荐）

创建 docker-compose.yml：

version: '3.8'
services:
  backend:
    build: ./backend
    ports:
      - "8000:8000"
    environment:
      - DATABASE_URL=postgresql://user:pass@db:5432/mydb
    depends_on:
      - db

  frontend:
    build: ./frontend
    ports:
      - "3000:3000"

  db:
    image: postgres:16
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: mydb
    volumes:
      - pgdata:/var/lib/postgresql/data

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/www:/var/www/certbot
    depends_on:
      - backend
      - frontend

volumes:
  pgdata:

8 HTTPS 证书 & Nginx 配置

8.1 Nginx 基础配置

# /etc/nginx/sites-available/myapp
server {
    listen 80;
    server_name example.com www.example.com;

    # 前端静态文件
    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
    }

    # API 反向代理
    location /api/ {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

8.2 Let's Encrypt 免费 SSL 证书

# 安装 Certbot
sudo apt install certbot python3-certbot-nginx -y

# 申请证书（自动配置 Nginx）
sudo certbot --nginx -d example.com -d www.example.com

# 测试自动续期
sudo certbot renew --dry-run
# Certbot 会自动添加 systemd timer，每 90 天续期

8.3 SSL 强化配置

# 在 server block 中追加
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
ssl_ciphers "ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384";

# 强制 HTTPS 跳转
if ($scheme != "https") {
    return 301 https://$host$request_uri;
}

# HSTS（强制浏览器只用 HTTPS）
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;

# 安全头
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options SAMEORIGIN;
add_header X-XSS-Protection "1; mode=block";

# 隐藏 Nginx 版本号
server_tokens off;

9 部署上线

9.1 代码上传到服务器

# 方法1：Git 拉取（推荐）
cd /var/www
git clone https://github.com/你的用户名/项目名.git myapp
cd myapp

# 方法2：scp 上传
scp -r ./dist/* root@你的IP:/var/www/html/

# 方法3：rsync 增量同步
rsync -avz --delete ./dist/ root@你的IP:/var/www/html/

9.2 Docker 一键部署

# 在服务器项目目录下
docker compose up -d --build

# 查看运行状态
docker compose ps

# 查看日志
docker compose logs -f

# 重启服务
docker compose restart

9.3 传统部署（无 Docker）

# 安装 Node.js
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs

# 前端构建
cd frontend && npm install && npm run build

# 后端启动（用 PM2 守护进程）
npm install -g pm2
cd backend && pm2 start app.py --interpreter python3
pm2 save && pm2 startup  # 开机自启

9.4 自动化 CI/CD（GitHub Actions 示例）

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to Server
        uses: appleboy/ssh-action@v1
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /var/www/myapp
            git pull
            docker compose up -d --build

10 安全加固：上线前的护甲

10.1 SSH 安全

# 编辑 /etc/ssh/sshd_config
PermitRootLogin no           # 禁用 root 登录
PasswordAuthentication no    # 禁用密码登录，只用密钥
PubkeyAuthentication yes     # 启用公钥认证
Port 2222                    # 改掉默认 22 端口（可选）

# 重启 SSH
sudo systemctl restart sshd

10.2 防火墙（UFW）

sudo ufw default deny incoming
sudo ufw default allow outgoing
sudo ufw allow 80/tcp        # HTTP
sudo ufw allow 443/tcp       # HTTPS
sudo ufw limit 22/tcp        # SSH 限速（防暴力破解）
sudo ufw enable

10.3 Fail2Ban（防暴力破解）

sudo apt install fail2ban -y

# 创建 /etc/fail2ban/jail.local
[sshd]
enabled = true
maxretry = 5
bantime = 3600

[nginx-http-auth]
enabled = true
maxretry = 3
bantime = 7200

sudo systemctl enable fail2ban --now

10.4 数据库安全

-- 创建专用用户，限制权限
CREATE USER 'app_user'@'localhost' IDENTIFIED BY '强密码';
GRANT SELECT, INSERT, UPDATE, DELETE ON mydb.* TO 'app_user'@'localhost';

-- 禁用远程 root 登录
-- 编辑 /etc/mysql/my.cnf，添加：
-- bind-address = 127.0.0.1

10.5 云平台安全组

在阿里云/腾讯云控制台配置安全组，仅开放必要端口：

11 测试与验证

上线前检查清单

• ✅ 域名解析生效（ping 你的域名 返回正确 IP）
• ✅ HTTPS 证书有效（浏览器地址栏显示锁形图标）
• ✅ 所有页面正常打开，无 404/500 错误
• ✅ 表单提交、登录注册等核心功能正常
• ✅ 手机端适配正常（Chrome DevTools 模拟）
• ✅ Chrome、Firefox、Safari 三大浏览器兼容
• ✅ robots.txt + sitemap.xml 已配置
• ✅ 错误页面（404/500）已自定义
• ✅ 数据库已备份
• ✅ SSL 证书自动续期已配置（certbot renew --dry-run）

12 运营维护：上线才是开始

日常维护清单

性能优化要点

• Gzip 压缩：Nginx 启用 gzip on; 压缩文本资源
• 静态资源缓存：JS/CSS/图片设置长缓存（1 年）
• CDN 加速：接入 Cloudflare 或阿里云 CDN
• 图片优化：使用 WebP 格式，压缩到合适尺寸
• 数据库优化：添加索引、清理慢查询
• Lighthouse 检测：目标 90 分以上

SEO 基础

• 合理使用 <title> 和 <meta description>
• 使用语义化 HTML（h1 ~ h6）
• 提交站点到百度站长平台 / Google Search Console
• 保持内容持续更新