前面五章是"照着做就能上线"，这一章不一样 —— 它要让你真正学会。 我给你排了 12 关，从"改一个字颜色的临时试验"一路走到"从零独立搭一个网站"。 每一关都写清楚四件事：要做什么、什么算完成、卡住看哪章、还能挑战什么。
怎么用这一章：不要一口气读完。读一关，动手做一关，做完再读下一关。 12 关不需要一天做完，一天一关、两周通关，比一天冲完扎实得多。
这一章的目标不是"知道答案"，而是形成手感：看到现象能判断问题出在哪一层，拿到一个陌生模板知道从哪里下手改。
如果你只想让网站赶紧跑起来，先回第 01 章；这一章是给"想学会打鱼"的人准备的。
技术会过时（面板改版、软件升级），但这 5 条心法不会。它们决定了你是"每次都要问别人"， 还是"自己就能摸出来"。建议先花十分钟把这一节读两遍，再开始动手。
很多新手一上来就抄一堆命令，结果命令跑通了也不知道为什么，出了问题更不知道该看哪。 真正该先装进脑子的是这条链路 —— 它是所有问题的地图：
域名 →（DNS 翻译成 IP）→ 服务器 →（Nginx 按域名找到站点）
→ 站点根目录里的 index.html →（浏览器渲染）→ 你看到的页面这条链子上有五个环节，每个环节都可能断：域名解析没生效、服务器没开机、Nginx 没匹配到站点、 根目录里没有首页文件、浏览器缓存了旧页面。以后网站出任何毛病， 先问自己一句话："是这条链子上的哪一环断了？" 你会发现，问题一下子从"网站坏了"这种无从下手的状态，变成"DNS 还没生效"这种可以验证的具体判断。
在网页上右键 → 检查，就能打开开发者工具，看到这个页面的骨架和皮肤： 哪一段是标题、哪一段是卡片、颜色写在哪里、图片有多大、哪个文件最拖速度。 它最厉害的地方是不只是能看自己的网站 —— 看到任何喜欢的页面， 你都可以右键检查，把它那几行写法抄过来改一改，变成自己的。
想调颜色、调间距、试字号，都可以先在开发者工具里改，页面会立刻变化， 满意了再把数值抄回文件。先在工具里试，再落到文件里，比反复上传试错快十倍。
顺便说个坑：不少笔记本的 F12 被设成了多媒体键（有的按下去会打开计算器），
浏览器根本收不到这个键。这不是浏览器坏了，直接用右键 → 检查，
或者按 Ctrl + Shift + I，效果完全一样。具体办法见第 04 章。
新手最容易犯的错，是兴致上来一口气改五个地方，然后页面乱了 —— 这时候你根本不知道是哪一处改坏的，只能全部回退，等于白改。
正确的节奏是：改一处 → 保存 → 上传 → Ctrl+F5 强制刷新 → 确认效果 → 再改下一处。 每次只引入一个变量，出问题就一定是刚才那一下。 这个"小步验证"的习惯，以后你写任何代码、改任何配置都用得上， 它比记住一百个技巧更值钱。
上传新文件之前，先把服务器上的旧文件重命名（比如把 index.html 改成 index-旧.html）， 再上传新的。这样万一新文件有问题，改个名字就能在一分钟内恢复到原样。 以后熟练了，就用面板的"计划任务"每天自动备份，这是第 11 关的内容。
请记住这句话：有备份的人，才敢乱试；敢乱试的人，才学得快。 怕改坏而不敢动手，是自学路上最大的障碍。备份就是你的安全网 —— 追求的不应该是"永不出错"，而是"出错后 30 秒能恢复"。
看到满屏红字先别慌。绝大多数报错其实在很客气地告诉你三件事： 哪里错了、为什么错、去哪一行找。阅读顺序是：先看最后一行， 那里通常是真正的原因，前面的内容往往只是"是谁调用它的时候出错的"。
然后：把报错原文复制去搜，不要用自己的话转述。 搜"网站打不开"很可能找不到答案，搜"nginx 502 php-fpm 未运行"第一条就命中。 报错里出现的文件路径和行号，就是直接给你指路的门牌号。 实在看不懂也没关系，把原文完整贴出来问人 —— 带原文的提问，通常一次就能得到答案； 只说"我的网站坏了"，谁也帮不了你。
建站这件事看起来庞杂，其实可以拆成四层。每一层都有"该懂的概念、该操作的界面、 以及自己能测的出师标准"。先看清地图，你就不会在细节里迷路。
| 层次 | 要掌握的概念 | 在哪里操作 | 出师标准（自己能测） |
|---|---|---|---|
| ④ 页面层 | HTML 结构、CSS 样式、响应式、浏览器开发者工具 | 代码编辑器 + 浏览器 | 看到一个喜欢的效果，能自己照着写出来 |
| ③ 站点层 | Nginx、站点根目录、域名绑定、PHP 与数据库 | 宝塔面板 | 能新建一个站点，并让它正常打开 |
| ② 服务器层 | IP、端口、SSH、防火墙、进程、磁盘 | SSH 工具 + 云厂商控制台 | 能说清"打不开"是端口问题还是服务问题 |
| ① 网络层 | 域名、DNS、A 记录、解析生效、TTL | 域名注册商后台 | 能用 nslookup 验证域名解析到了哪台服务器 |
建议顺序：④ → ③ → ② → ①，也就是从下往上反着学。
理由很实在：页面层最容易有成就感 —— 改一个字、换个颜色，刷新就能看到结果， 这种即时反馈能让你坚持下去。等页面改顺了，自然会想知道"我的文件放在服务器的哪里"， 这就进了站点层；再往下会遇到"为什么端口不通"，那就到了服务器层； 最后搞懂域名怎么找到服务器，网络层就通了。
反过来从网络层开始学，前两周你都在看概念，一个可见的成果都没有，很容易放弃。
下面 12 关，每一关都用同样的格式写清楚四件事。做完一关打个勾，再进入下一关。 前 6 关在页面层，第 7 到 10 关在站点层，第 11 关是保命的习惯，第 12 关是毕业设计。
四件事的含义：
Ctrl + Shift + I）。color。Ctrl + Z 撤销，看它变回去。你能让标题变红、又能撤销；并且你清楚地知道：这只是你自己浏览器里的临时效果， 服务器上的文件一个字都没变，刷新就没了。
第 04 章（改页面与优化）—— 里面讲了开发者工具的每一个面板是干什么的。 如果按 F12 打开的是计算器，同样看第 04 章，那里有笔记本功能键的解决办法。
按 Ctrl + Shift + M 切换到手机视图，看看同一个页面在小屏幕下的样子；
再试试把 font-size 从 40px 改成 20px，体会"数值一变、排版就变"。
index.html，把里面的示例名字（页面上那几处占位文字）改成你自己的名字。index.html 改名备份（例如 index-旧.html）。index.html 传上去，同名文件选「覆盖」。Ctrl + F5 强制刷新。网址上显示的是你的名字，而不是模板里的示例名字； 浏览器标签页的标题也跟着变了。这就是你人生第一次"把文件发布到公网"。
第 01 章（建站全流程）的上传部分；刷新没变化就看第 05 章（排错速查）。
故意不上传就刷新页面，观察"改了没变化"是什么感觉。 记住这种手感 —— 以后十次"改了没变"，有八次是这个原因，另外两次是浏览器缓存。
index.html，找到文件顶部样式区里的主题设置（一般是 :root 里的几行变量）。#16a34a、紫色 #7c3aed 或橙色 #ea580c。Ctrl + F5，看整站的按钮、图标底色、链接颜色是不是一起变了。nav 里的几个链接），照着已有的写法复制一行，改成指向页面里已有板块的锚点。全站主色同时变了（而不是只变了一个按钮 —— 这说明你改的是"变量"，不是"某一处"）； 新导航项能正常跳转，手机宽度下导航不会挤成一团。
第 04 章，关于 CSS 变量和颜色写法的部分。
把圆角变量改成 0，看看"全直角风格"长什么样；再试试把页面底色改成浅灰，
体会"同一个模板、两种气质"。
<div class="卡片"> 到它对应的 </div>，
中间有图标、标题、说明文字）完整选中、复制。页面上多出第四张卡片，宽度自动排列、没有错位、没有半个标签露出来。
如果排版乱了，几乎一定是少复制或多复制了一个 </div>。
第 04 章的"HTML 最小知识"一节 —— 那里讲了标签成对出现这件事。
把卡片里的表情符号换成别的（🚀 📷 🎧 🧩 都行）；再加到五张； 然后试着删掉一张，体会"复制是加法、删除是减法"，两种操作你都该熟练。
1.jpg。index.html 同一个文件夹）。index.html，把相册里第一格的整段占位块换成：<div class="相册项"><img src="1.jpg" alt="我的照片"></div>相册里出现了你的照片，并且被自动裁切填满格子、没有变形。 如果出现的是一个破图图标，按顺序查三件事：文件名的大小写是否一致、 文件是不是真的在根目录、文件是否上传成功（Windows 上文件名不区分大小写，服务器上区分）。
第 05 章（排错速查）—— 破图和 404 是同一类问题：路径找不到文件。
把三张照片都换上；再试着在根目录下新建一个 images 文件夹，
把照片放进去，路径写成 images/1.jpg —— 这一步做完，你就真正理解"相对路径"了。
download 文件夹（没有就新建一个，名字必须完全一致）。download 文件夹里。index.html 的「下载」板块，把卡片的标题、说明、以及下载链接里的文件名改掉。点「下载」之后，浏览器把文件存了下来，文件名正确、能打开。 这说明你已经理解：服务器上的文件夹结构，就是网址的一部分。
第 05 章 —— 如果是 404，那就是路径写错了，注意大小写和斜杠方向。
故意把链接里的文件名写错一个字母，访问一下，看看出现的是不是你上传过的那个 自定义 404 页面。能预判 404 长什么样，说明你开始"有预期"地工作了。
bt default，把面板地址、账号、密码抄下来。index.html，面板会打开自带的编辑器。Ctrl + F5 看结果。你没有碰本地任何文件，网站内容也变了。 这时候你应该能说出一句话："面板就是服务器文件的可视化管理器。"
第 03 章（宝塔面板地图）—— 哪个菜单在哪、文件管理怎么用，那一章讲得最细。
打开面板左侧的「终端」，敲一条列目录的命令（ls -la 你的站点根目录），
把你看到的结果和文件列表对照一下。命令行和图形界面看到的是同一批文件，
这个认知建立起来之后，你就不会再怕黑色窗口了。
留言成功显示在列表最上方；服务器上自动出现了 data 文件夹和里面的数据文件。
你现在能说清"静态页面"和"动态页面"的区别了：静态是文件直接给出去，
动态是程序现场生成再给出去。
框里一片空白 = PHP 没开启成功；出现 500 之类的报错 = 把报错原文复制去搜， 或按第 05 章的流程排查。第 03 章有 PHP 版本在哪改的截图式说明。
在面板文件管理里打开 data 目录下那个数据文件，看看留言存成了什么格式
（一行一条，人能看懂）。再想一想：为什么这个文件的第一行要写一句让它"直接访问就退出"的代码？
带 www 和不带 www 都能打开，显示的都是你的页面，小锁也都在。 你现在明白了：在 Nginx 眼里，"带 www"和"不带 www"是两个不同的网站名， 必须分别登记，它才知道该把哪个站点的文件给你。
第 02 章（名词与原理）里关于"域名匹配"的部分；如果还是 404， 检查是不是把域名加到了别的站点上去了。
用 nslookup 分别查带 www 和不带 www 的两个域名，看它们各自解析到了哪里。
然后想一个问题：为什么直接访问服务器 IP 永远会 404？
能答上来，说明你已经完全理解第 9 关和第 2 关。
你能不看教程说出三件事：证书是谁签发的、什么时候到期、为什么必须有它。 同时你明白一个关键点：有证书不等于有内容 —— 证书只负责"证明这是你的站 + 传输加密"，里面有没有东西，还得你自己放。
第 05 章的证书报错一节（提示不安全、证书过期、域名不匹配分别怎么处理）。
在地址栏手动把 https 改成 http 再回车，看它是不是被自动跳回加密地址；
然后关掉手机的 WiFi、用流量再访问一次，确认外网访问同样正常 ——
很多"我这里好好的"的假象，都是因为只在自己电脑上测过。
任务列表里有一条正常运行的任务；备份目录里有当天的压缩包； 你亲自下载并解压过一次，确认里面确实是你的网站文件。 这一关比前面十关加起来都重要 —— 没有备份的网站，迟早会丢，只是时间问题。
第 03 章的计划任务部分。
再加一条「备份数据库」的任务；把保留份数改成 14； 然后想一个更重要的问题：如果备份文件和网站放在同一台服务器上，会有什么风险？ （提示：服务器本身出故障或欠费被回收时，备份会一起消失。）
不看任何现成文件，自己完整走一遍：新建站点 → 绑定域名 → 配 SSL → 放内容 → 配备份。题目二选一：
一个全新的站点能正常打开、能自己改内容、也配好了备份。 并且你能不看任何资料，在白纸上把整条流程写出来： 域名 → 解析 → 服务器 → 宝塔 → 建站 → SSL → 上传内容 → 备份。 写出来那一刻，你就真的会建站了。
第 01 章（全流程）做主线，第 03 章（面板地图）当说明书， 第 05 章（排错速查）当字典。三章配合，足够你独立完成。
给新站配一个二级域名（例如 blog.你的域名），解析到同一台服务器， 再在面板里新增站点、申请证书，把它接到你主页的导航里。 这一套动作做完，你已经具备"给别人建站"的能力了。
这 10 题覆盖了整条链路上最容易踩的点。请先在心里（或纸上）各答一句， 再点开折叠核对。能答对 8 题以上，说明你不是"会点按钮"，而是真的懂了。
域名是门牌号，服务器是店面。店可以换地址（换服务器），门牌号也可以重新指向别处（改解析）， 两者是分开的两样东西，也分开续费。
因为浏览器发出的请求里没有域名，Nginx 不知道该匹配哪个站点，只好回一个"找不到"。 这是正常现象，不是故障 —— 它反而证明服务器和 Nginx 都活着。
站点的域名列表里只登记了带 www 的那个。Nginx 按域名匹配站点， 没登记的域名匹配不上，就回 404。到「域名管理」里把裸域名也加进去即可。
先按 Ctrl + F5 强制刷新，排除浏览器缓存。
如果还是旧的，再确认文件是否真的传到了正确的目录、
文件名是否正确（很多站点认 index.html 这个固定名字）。
通常是 PHP 服务（php-fpm）没在运行、崩了、或权限不对。 也可能是程序本身执行超时或出错。先在面板里重启 PHP，再看站点错误日志。
根目录是你在面板里看到的那个站点文件夹（形如"站点名"的目录）。 首页文件必须直接放在根目录这一层，不能多套一层文件夹 —— 多套一层就会出现"明明传上去了却还是 404"。
用 SSH 连上服务器，在终端输入 bt default，它会打印面板地址、账号和默认密码。
也可以输入 bt 打开菜单，从里面查。
不是。证书只负责两件事：证明这个站是谁的、把传输内容加密。 它跟"里面有没有网页"完全无关 —— 空目录也可以有证书。
直接写文件名即可：<img src="1.jpg" alt="说明文字">。
因为网页文件和图片在同一层，这叫相对路径。
如果放进 images 文件夹，就写成 images/1.jpg。
备份。改前把旧文件改名留底，长期用计划任务每天自动备份， 并且定期下载一份到自己的电脑上。有退路，才敢大胆试。
遇到问题不要一上来就乱改配置 —— 那样往往把一个小问题变成两个。 按下面三步走，绝大多数毛病在两分钟内能定位到"是哪一层坏了"。
先根据你看到的现象，判断问题大概在哪一层，再看那一层的细节：
在页面上右键 → 检查 → 切到 Network（网络） 面板 → 刷新页面， 你会看到浏览器请求的每一个文件，以及每个请求的状态码。 红色的那一条就是问题所在：404 是找不到文件，500 是程序出错， 403 是没权限。再切到 Console（控制台），脚本出错的信息都在那里。
面板里每个站点都有访问日志和错误日志，错误日志会直接告诉你 "哪个文件、第几行、什么错"。面板自身的日志则在设置里。 会看日志之后，你的排错速度会有质的飞跃 —— 从"猜"变成"读"。
还搞不定？去第 05 章《排错速查手册》，那里按"现象"分类， 对号入座即可。提问时记得带上四样东西：你做了什么操作、现在什么现象、 报错原文（复制而不是转述）、状态码。带齐这四样，问题通常一次就能解决。
12 关全部走完，你得到的不是"一个能打开的网站"，而是三样带走能力：
更重要的是，你会养成三个习惯：改前备份、一次只改一处、看报错原文。 这三个习惯，比任何一项具体技术都耐用 —— 它们会跟着你走到以后学的任何东西里。