新手建站完整规划与执行流程

该 DOCX 包含不完整的 Office 元数据关系，已使用兼容模式恢复正文和媒体。

操作指南DOCXv1.0

操作指南DOCX下载原文件

> 该 DOCX 包含不完整的 Office 元数据关系，已使用兼容模式恢复正文和媒体。

新手建站完整规划与执行流程

一、建站的正确顺序

一个完整网站，不是“先画页面，再让 AI 写代码”，而应该按照下面的顺序进行：

想法确认 → 项目立项 → 内容规划 → 页面结构 → 技术选型 → 视觉规范 → 环境搭建 → 页面开发 → 功能开发 → 内容录入 → 测试验收 → 服务器部署 → 正式上线 → 日常维护

每完成一个阶段，都要形成可以保存的文件或可以验证的结果。

核心规则：

上一步没有验收通过，不进入下一步。先完成能用的网站，再逐步增加复杂功能。

第一阶段：明确网站要解决什么问题

1. 写清楚网站类型

先确认网站属于哪一种：

个人博客

作品集网站

企业官网

工具网站

内容社区

电商网站

在线服务平台

综合个人网站

新手第一次建站，推荐从以下组合开始：

个人博客 + 项目作品集 + 资源展示 + 关于我

不要第一次就同时开发：

用户系统

在线聊天

复杂后台

积分系统

支付系统

多端 App

实时同步

社交社区

这些功能可以预留位置，但不要在第一版全部开发。

2. 明确网站目标

需要回答以下问题：

网站主要展示什么？

谁会访问网站？

用户进入网站后，希望他做什么？

网站由谁维护？

内容多久更新一次？

网站未来是否要增加登录、评论、后台或 App？

网站是否必须支持手机？

是否需要长期自主部署？

是否允许依赖第三方收费服务？

网站失败或服务器更换后，能否完整迁移？

3. 输出《项目立项说明》

立项说明至少包括：

项目名称

网站名称

网站定位

目标用户

核心内容

首版功能

暂不开发的功能

技术限制

部署方式

维护方式

数据归属

项目完成标准

本阶段验收标准

必须能用一句话说明网站：

这是一个面向什么人、提供什么内容、解决什么问题的网站。

如果一句话说不清楚，说明项目范围仍然太散。

第二阶段：确定第一版范围

1. 区分三个版本

V1：最小可用版本

目标是尽快上线。

建议包含：

首页

博客列表

博客详情

项目列表

项目详情

资源页面

关于页面

404 页面

手机端导航

基础 SEO

HTTPS

V1.5：内容管理增强

网站稳定后再增加：

分类

标签

搜索

草稿

阅读进度

RSS

文章目录

图片管理

发布工具

V2：动态功能

有真实需求后再开发：

登录注册

评论系统

后台管理

在线发布

用户权限

数据库

邮件通知

多设备同步

App 封装

2. 建立功能优先级

每项功能标记为：

P0：没有它不能上线

P1：上线后应尽快补充

P2：体验增强

P3：未来想法

例如：

功能	优先级
首页	P0
文章详情	P0
手机适配	P0
HTTPS	P0
搜索	P1
评论	P2
登录注册	P3
App	P3

本阶段验收标准

V1 功能数量尽量控制在 8至15项。

如果首版功能超过二十项，通常说明范围过大。

第三阶段：整理网站内容

网站不是先做页面，而是先确认页面里放什么。

1. 建立内容清单

整理已有内容：

网站名称

Logo

网站介绍

个人介绍

联系方式

文章

项目

图片

视频

音频

下载资源

隐私说明

2. 区分正式内容和项目沟通内容

以下内容不能直接放进网站：

对 AI 的指令

临时讨论

自我吐槽

页面开发说明

未确认的数据

内部路径

密码或服务器信息

测试账号

未经授权的素材

所有正式内容应单独整理，不要直接把聊天记录当网页正文。

3. 建立内容表

建议建立一个表格：

内容名称	类型	所属页面	状态	文件位置
网站介绍	文本	首页	已完成	content/home.md
个人介绍	文本	关于	待修改	content/about.md
项目封面	图片	项目页	已完成	public/projects/
第一篇文章	Markdown	博客	草稿	content/blog/

4. 制定内容命名规则

文件名建议使用：

2026-08-05-my-first-post.md通用数字产品-logo.svgproject-local-ai-cover.webp

避免使用：

最终版.png最终版2.png真的最终版.png新建文档.docx

本阶段验收标准

每个页面都必须知道：

页面标题

页面目的

页面主要内容

用户可以进行的操作

没有内容时显示什么

第四阶段：设计网站页面结构

1. 先画网站地图

示例：

首页├── 博客│ ├── 博客列表│ └── 文章详情├── 项目│ ├── 项目列表│ └── 项目详情├── 资源├── 关于我└── 404

2. 为每个页面写页面说明

每页至少写清楚：

页面名称

页面网址

页面目标

页面模块

页面入口

页面出口

空状态

加载状态

错误状态

手机端变化

首页示例

页面名称：首页路由：/目标：让访问者快速理解网站是谁、做什么、有什么内容模块：1. 顶部导航2. 品牌介绍3. 最新文章4. 精选项目5. 简短个人介绍6. 页脚主要操作：- 查看文章- 查看项目- 进入关于页面

3. 设计完整状态

不能只设计“正常页面”，还要设计：

没有文章

图片加载失败

页面不存在

网络断开

内容过长

标题过长

手机屏幕较窄

用户重复点击

表单填写错误

数据损坏

本阶段验收标准

任何页面都能回答三个问题：

用户从哪里进入？

用户在这里能做什么？

用户下一步去哪里？

第五阶段：确定技术方案

1. 新手第一版推荐方案

对于以文章、项目和个人展示为主的网站，推荐：

前端框架：Astro开发语言：TypeScript样式：原生 CSS内容：Markdown / MDX构建方式：静态构建服务器：Linux + Nginx证书：HTTPS代码管理：Git

这个方案的优点：

结构清晰

速度快

容易部署

不强依赖平台

可以完整迁移

服务器成本低

适合博客和作品集

后期可以接入后端

2. 理解基础组成

前端

用户看见和点击的部分，例如：

页面

按钮

导航

图片

动画

表单

后端

处理业务逻辑的部分，例如：

发布文章

用户权限

数据查询

数据库

保存结构化数据，例如：

用户账号

文章状态

操作记录

服务器

让网站可以从互联网访问的计算机。

域名

网站地址，例如：

通用数字产品.com

DNS

负责把域名指向服务器。

Nginx

负责接收访问请求，并把网站文件交给访问者。

3. 第一版是否需要后端

只有以下情况才需要后端：

用户登录

在线发表评论

在线发布文章

保存用户数据

多设备同步

管理员后台

实时功能

支付

如果第一版只是展示内容，可以先不开发后端。

本阶段验收标准

形成一份《技术方案说明》，明确：

使用什么框架

使用什么语言

是否需要数据库

是否需要后端

如何部署

数据保存在哪里

如何迁移

如何备份

第六阶段：建立项目规范

这一阶段非常重要。没有规范，AI 很容易越改越乱。

1. 建立目录规范

推荐结构：

project/├── docs/ # 项目文档├── public/ # 静态资源│ ├── images/│ ├── icons/│ ├── fonts/│ ├── audio/│ └── video/├── src/│ ├── components/ # 可复用组件│ ├── layouts/ # 页面公共布局│ ├── pages/ # 页面与路由│ ├── styles/ # 样式│ ├── content/ # 文章和项目内容│ ├── utils/ # 工具函数│ ├── config/ # 网站配置│ └── types/ # 类型定义├── scripts/ # 自动化脚本├── tests/ # 测试├── .env.example # 环境变量示例├── README.md├── PROJECT_STATE.md└── package.json

2. 建立命名规范

统一规定：

文件如何命名

页面如何命名

组件如何命名

图片如何命名

CSS 类如何命名

路由如何命名

日期格式

中文和英文使用规则

3. 建立代码修改规则

每次修改必须：

先读取项目状态。

只修改指定范围。

不随意更换技术栈。

不删除不理解的代码。

不改服务器配置，除非任务明确要求。

修改前创建备份或 Git 提交。

修改后运行检查。

报告修改文件。

报告测试结果。

更新项目状态文件。

4. 必备文档

至少准备：

README.mdPRD.mdTECH_STACK.mdSITE_MAP.mdDESIGN_SYSTEM.mdCONTENT_RULES.mdDEPLOYMENT.mdSECURITY.mdPROJECT_STATE.mdCHANGELOG.md

本阶段验收标准

把项目交给另一个 AI 或开发者，对方只看文档就能知道：

项目是什么

当前做到哪里

哪些不能改

下一步做什么

如何运行和测试

第七阶段：设计视觉规范

1. 不要直接设计完整页面

先确定设计系统：

主色

辅助色

背景色

文字颜色

字体

字号

圆角

阴影

间距

按钮样式

卡片样式

图片比例

动画速度

2. 使用设计变量

示例：

:root { –color-background: #f8f6f2; –color-surface: #ffffff; –color-primary: #7868e6; –color-text: #24222a; –color-text-muted: #77727f; –radius-small: 8px; –radius-medium: 16px; –radius-large: 24px; –space-1: 4px; –space-2: 8px; –space-3: 12px; –space-4: 16px; –space-6: 24px; –space-8: 32px;}

以后修改颜色或圆角，只需要改变量，不需要逐页修改。

3. 先设计基础组件

先完成：

导航

按钮

卡片

标签

输入框

标题

正文

图片容器

提示信息

页脚

再使用这些组件拼页面。

4. 同时设计三种尺寸

至少考虑：

手机：小于 768px

平板：768px 至 1024px

电脑：大于 1024px

优先从手机端开始设计，再扩展到电脑端。

本阶段验收标准

页面不依靠临时手写颜色和尺寸，主要样式都来自统一设计变量。

第八阶段：搭建本地开发环境

1. 安装基础工具

需要：

Node.js

Git

VS Code 或其他编辑器

浏览器

项目包管理器

可选：Codex、Trae 等开发辅助工具

2. 初始化项目

示例流程：

创建 Astro 项目npm create astro@latest# 进入项目目录cd 项目目录# 安装依赖npm install# 启动本地开发服务器npm run dev

3. 建立 Git

初始化 Gitgit init# 保存第一个版本git add .git commit -m “chore: initialize project”

4. 验证基础环境

确认：

项目能启动

浏览器能打开

修改文字后页面会变化

构建命令能运行

没有严重报错

本阶段验收标准

必须通过：

npm run devnpm run build

如果项目还没有成功构建，不进入正式页面开发。

第九阶段：按顺序开发网站

推荐开发顺序：

第一步：全局基础

先完成：

全局样式

字体

页面最大宽度

基础背景

响应式规则

网站配置

第二步：公共组件

完成：

Header

Navigation

MobileMenu

Footer

Button

Card

Tag

EmptyState

ErrorState

第三步：公共布局

完成：

默认页面布局

文章布局

项目详情布局

第四步：静态页面

依次开发：

首页

博客列表

博客详情

项目列表

项目详情

资源

关于

404

第五步：内容系统

实现：

Markdown 内容读取

文章发布日期

标签

分类

摘要

封面图片

草稿过滤

第六步：增强功能

在基础页面稳定后，再增加：

搜索

阅读进度

文章目录

RSS

图片预览

每完成一个功能必须验证

npm run lintnpm run checknpm run testnpm run build

项目没有某个命令时，应根据实际配置调整，但最终构建必须通过。

第十阶段：内容录入与整理

1. 不要使用假内容上线

正式上线前替换：

Lorem ipsum

测试文章

假头像

占位图片

测试联系方式

无意义按钮

无法打开的链接

2. 检查文章格式

每篇文章至少包含：

title:description:publishDate:updatedDate:category:tags:cover:draft:

3. 图片处理

建议：

普通照片使用 WebP

Logo 和图标优先 SVG

图片压缩后再上传

设置宽度和高度

添加替代文字

避免直接上传几十兆原图

本阶段验收标准

所有公开页面都使用正式内容，所有按钮都有明确作用。

第十一阶段：完整测试

1. 功能测试

检查：

所有导航可点击

所有页面能打开

返回按钮正常

搜索正常

标签正常

文章链接正常

404 正常

外部链接正常

2. 视觉测试

检查：

字体是否加载

页面是否横向溢出

图片是否变形

标题是否超出

长文章是否易读

颜色对比是否清楚

按钮状态是否明显

3. 多设备测试

至少测试：

Chrome

Edge

手机浏览器

窄屏窗口

1920×1080 电脑

手机竖屏

4. 性能测试

检查：

首页是否加载过慢

图片是否过大

是否引用不必要脚本

是否使用过多动画

是否存在重复资源

是否有控制台报错

5. SEO 检查

必须包含：

页面标题

页面描述

网站图标

canonical 地址

robots.txt

sitemap.xml

Open Graph 信息

正确的标题层级

图片替代文字

6. 安全检查

检查：

没有上传密码

没有上传服务器密钥

没有公开环境变量

没有写死管理员账号

没有暴露本地绝对路径

依赖没有明显高危漏洞

表单有输入校验

本阶段验收标准

必须做到：

构建成功

控制台无严重错误

手机端可正常操作

所有正式路由通过

404 能正确显示

没有敏感信息泄漏

第十二阶段：准备服务器和域名

1. 准备域名

完成：

域名注册

实名认证

必要的备案

DNS 管理权限确认

2. 准备服务器

服务器需要：

Linux

Nginx

SSH

防火墙

HTTPS 证书

网站目录

日志目录

备份目录

3. DNS 配置

常见记录：

@ A 服务器公网 IPwww A 服务器公网 IP

不要随意删除已有邮箱记录：

SPF

DKIM

DMARC

4. 建立安全部署目录

第十三阶段：正式部署

1. 本地构建

npm run build

通常会生成：

dist/

2. 上传构建结果

只上传构建后的静态文件，不要把以下内容直接放到网站目录：

node_modules

Git 密钥

环境变量

开发缓存

本地测试文件

未使用素材

3. 配置 Nginx

核心内容包括：

网站根目录

域名

首页文件

404 页面

HTTPS

HTTP 跳转 HTTPS

缓存策略

日志

4. 上线后验证

验证：

HTTP 是否跳转 HTTPS

根域名是否打开

www 是否打开

所有页面是否正常

静态资源是否加载

404 是否正确

手机端是否正常

SSL 证书是否有效

本阶段验收标准

网站通过正式域名访问，页面、资源、HTTPS 和 404 全部正常。

第十四阶段：上线后的维护

上线不是结束，而是进入维护阶段。

1. 建立备份制度

至少备份：

网站源代码

正式构建包

内容文件

图片素材

Nginx 配置

数据库

环境变量模板

部署说明

推荐保留：

本地副本

Git 仓库

服务器备份

独立硬盘备份

2. 建立更新流程

每次更新按照：

提出需求→ 建立任务→ 修改本地副本→ 本地测试→ 构建→ 上传 incoming→ 服务器验证→ 创建 release→ 切换版本→ 线上回归→ 更新日志

3. 建立版本号

例如：

v1.0.0 首次正式上线v1.0.1 修复错误v1.1.0 增加搜索v2.0.0 增加后台系统

4. 监控内容

定期检查：

网站是否可访问

HTTPS 是否到期

磁盘空间

错误日志

访问日志

失效链接

依赖漏洞

备份是否有效

第十五阶段：AI 协作规则

1. 不要一次交给 AI 整个网站

错误方式：

帮我开发一个完整的网站，功能都做好。

正确方式：

只完成博客列表页面。不得修改其他页面，不得更换技术栈，完成后运行检查并报告修改文件。

2. 每个任务只做一件事

推荐拆分：

任务1：搭建项目基础任务2：建立设计变量任务3：完成顶部导航任务4：完成首页框架任务5：接入文章数据任务6：完成文章详情任务7：完成手机适配任务8：进行完整测试

3. 给 AI 的通用任务模板

你正在修改一个正式项目。本次任务：只完成【具体功能】。允许修改：- 文件A- 文件B禁止事项：- 不更换技术栈- 不新增收费依赖- 不删除原有功能- 不修改服务器- 不修改任务范围以外的文件- 不使用无法迁移的平台专属能力执行步骤：1. 先只读检查相关文件。2. 说明当前实现情况。3. 创建修改方案。4. 进行最小范围修改。5. 运行类型检查、代码检查、测试和构建。6. 报告修改文件、测试结果和遗留问题。7. 更新 PROJECT_STATE.md。8. 完成后暂停，不继续开发其他功能。

4. AI 每次必须提交的结果

修改了什么

为什么修改

修改了哪些文件

有没有增加依赖

测试是否通过

构建是否通过

是否存在风险

下一步建议

当前是否可以回滚

第十六阶段：新手最容易踩的坑

1. 一开始追求完整生态

同时做网站、后台、安卓、iOS、鸿蒙和电脑客户端，容易导致所有项目都停留在半成品。

正确做法：

先让网页版内容发布闭环真正跑通，再扩展其他端。

2. 页面好看，但内容和功能没完成

页面截图不等于网站。

真正完成必须包括：

页面能打开

按钮能点击

内容可更新

手机可用

可以构建

可以部署

可以维护

3. 经常更换技术栈

项目中途频繁从 Astro 换到 Next.js，再换 Vue、React，会造成重复开发。

技术栈一旦确定，除非出现无法解决的问题，否则第一版不要更换。

4. 让 AI 自由发挥

AI 没有明确边界时，可能：

重写大量代码

删除原功能

添加新依赖

改变目录

擅自调整视觉

修改部署配置

因此每项任务必须明确允许范围和禁止范围。

5. 没有项目状态文件

聊天记录会被压缩，AI 会遗忘。

必须维护：

PROJECT_STATE.md

内容包括：

当前版本

已完成功能

未完成功能

当前技术栈

6. 直接在线修改正式网站

正确方式永远是：

本地修改 → 本地测试 → 生成新版本 → 上传验证 → 切换上线

不要直接在生产目录里边看边改。

第十七阶段：推荐的实际执行顺序

第一轮：把网站跑起来

写项目立项说明。

确定 V1 页面。

画网站地图。

整理正式内容。

确定技术栈。

创建项目目录。

初始化 Astro。

配置 Git。

确认开发和构建成功。

第二轮：把网站做完整

建立设计变量。

开发公共导航。

开发首页。

开发博客列表。

开发文章详情。

开发项目列表。

开发项目详情。

开发资源和关于页面。

开发 404。

完成手机适配。

第三轮：把内容放进去

建立 Markdown 内容规范。

导入正式文章。

导入项目资料。

压缩并整理图片。

检查所有链接。

删除占位内容。

第四轮：把质量补齐

完成功能测试。

完成视觉测试。

完成手机测试。

完成 SEO。

完成安全检查。

执行正式构建。

第五轮：上线

准备服务器。

配置域名 DNS。

配置 Nginx。

配置 HTTPS。

上传新版本。

验证所有路由。

检查手机端。

保留可回滚版本。

正式发布。

第六轮：进入维护

建立更新流程。

建立备份计划。

建立版本管理。

记录问题和需求。

每次只完成一个小版本。

网站稳定后再考虑后台和 App。

最终完成标准

一个网站真正完成，不是“页面看起来差不多”，而是同时满足：

定位清楚

页面完整

内容正式

手机可用

导航正常

构建通过

域名可访问

HTTPS 正常

404 正常

SEO 基础完成

没有敏感信息

能够备份

能够更新

能够回滚

能够迁移

其他开发者或 AI 能接手

建站的最终目标不是只做出一个漂亮页面，而是建立一个：

可以上线、可以更新、可以维护、可以迁移、出现问题可以恢复的长期网站项目。