综合与上线:让全世界打开你的网站

6.1 文件组织与命名规范

一个清爽的项目结构,会让后面所有步骤都顺。推荐的静态站目录长这样:

my-site/
├── index.html        <!-- 首页,必须叫这个 -->
├── about.html        <!-- 其他页面 -->
├── css/style.css     <!-- 样式集中放这 -->
├── js/app.js         <!-- 脚本 -->
├── images/logo.png   <!-- 图片 -->
└── favicon.ico       <!-- 标签页小图标 -->

• 文件名全小写 + 用短横线(about-us.html),别用空格和中文——服务器上大小写敏感,中文/空格易出错。
• 图片、样式、脚本各归各的文件夹,不要全堆在根目录。
• 引用一律用相对路径(images/logo.png),换电脑换域名都不会失效。

6.2 favicon 与 SEO 基础

6.3 Git:给你的代码存"历史版本"

Git 是版本管理工具,能记录每次改动、随时回退;配合 GitHub / Gitee 还能直接托管和部署网站。新手先记住这三条命令:

git add .                 # 把改动放进暂存区
git commit -m "说明改了什么"  # 存成一个版本
git push                  # 推到远程仓库(GitHub 等)

6.4 部署上线:把文件搬到服务器上

"部署"就是把本地文件放到一台 24 小时开机、能对外访问的电脑上。静态站部署极其简单,新手首选免费平台:

具体图文步骤见 → 02 部署上线。

6.5 域名与备案(国内必做)

默认给你的是一长串平台子域名,想用自己的 mysite.com 需要两步:

• 买域名:在域名商处注册,解析到服务器地址。详见 → 03 域名申请。
• 备案:服务器在中国大陆就必须做 ICP 备案,提交主体资料、幕僚核验,通常几个工作日。详见 → 04 备案流程。

6.6 上线前检查清单

• 本地用浏览器逐页点过一遍,没有 404、没有报错(F12 看 Console)。
• 手机、电脑都看过,响应式正常。
• 所有图片、样式、脚本用相对路径,文件名全小写无空格。
• title、description、favicon、alt 都补齐。
• 部署后用自己的域名/子域名再访问一遍确认可打开。

📝 随堂小测

🏁 全站通关清单

把下面这些全部打勾,说明你已经走完中职进阶地图的六关,具备独立做一个静态网站并上线的能力!

• 关卡1 装好工具,做出并打开了第一个网页
• 关卡2 能用 HTML 写出一整页内容(文字/图/链接/表格)
• 关卡3 会用 CSS 选择器、盒模型、圆角阴影美化页面
• 关卡4 用 Flex/Grid 排版,并用 @media 做响应式
• 关卡5 会用 JS 取元素、监听事件、改内容做出交互
• 关卡6 整理好项目、用 Git 管理,并成功部署上线
• 理解域名与备案流程,知道国内公开访问该怎么做