US.KG 免费域名教程实战:Capstone 网站本地构建与全链路测试指南

US.KG 免费域名教程实战:Capstone 网站本地构建与全链路测试指南【免费下载链接】US.KGFree domain registration and practical DNS learning resources for everyone.项目地址: https://gitcode.com/GitHub_Trending/us/US.KG本文基于 US.KG(DigitalPlat FreeDomain)教程第七部分 Capstone 项目的第二课,完整讲解如何在动手修改公网 DNS 和服务器之前,在本地把最终要上线的静态网站完整构建并测试一遍。读完后你将能够独立搭建一个含首页、About 页与样式表的两页站点,用本地 HTTP 服务器跑通功能测试、可访问性测试与内容隐私审查,并以可复现的版本基线作为进入注册/部署阶段的放行门槛。一、为什么必须先本地,后公网Capstone 项目把整本书的内容收敛为一个完整工程:规划、注册、构建、部署、加固、验收、运维(见 Part 7 索引)。本课 Build and Test the Site 处在流程的关键位置:上一步 Project Brief and Architecture 已经确定了页面范围、域名命名与架构分工,而下一步 Register, Deploy, and Connect 会真正创建外部状态——注册域名、修改 nameserver、在公网服务器上安装 Nginx。因此原文档开篇就立下一条纪律:Build the complete website locally before making a public DNS or server change.在做任何公网 DNS 或服务器变更之前,先在本地把完整网站构建出来。这条纪律的回报是:所有低级错误(文件缺失、链接失效、样式未加载、隐私信息误发布)都在不产生外部副作用的本地环境被拦截。原文明确设置了放行闸门(Gate):Do not continue until all local tests pass and the source can rebuild the site on another machine.在所有本地测试通过、且源码可以在另一台机器上重建出该网站之前,不要继续。对照 7.1 项目简报中的架构图,本地构建出的三个文件index.html、about.html、styles.css正是未来要部署到服务器上/var/www/example.dpdns.org目录的内容——本地目录结构与生产目录结构一一对应,是本课可执行性的基础。二、Step 1:创建项目骨架与版本控制2.1 创建目录结构mkdir -p capstone-site/assets capstone-site/notes cd capstone-site目录划分与 7.1 项目简报的规划相互呼应:notes/用于存放 ownership(责任人分工)与 acceptance(验收证据)等项目笔记,assets/预留给静态资源。2.2 创建 .gitignore.DS_Store .env *.log notes/private-*每一项都对应一种真实的泄漏风险:.DS_Store:macOS 目录元数据,避免把本机目录结构噪音提交进仓库;.env:环境变量文件,通常承载密钥,绝不能进入版本库;*.log:日志文件,既含隐私也易产生无意义 diff;notes/private-*:项目笔记中的私密草稿(如账号恢复信息),与 7.1 中定义的私有数据清单(账号密码、恢复码、API 密钥、SSH 私钥等)保持边界一致。2.3 初始化版本控制git init git status先执行git status观察未跟踪文件,确认目录内容符合预期后再进入后续步骤。版本控制在这里的作用不是团队协作,而是让源码可以在另一台机器上重建站点这一闸门要求可验证、可回滚。三、Step 2:创建首页 index.html完整代码如下,注意其中每个可访问性细节都在第 8 节的测试清单中被逐一验证:!doctype html html langen head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 meta namedescription contentA short description of the project and its purpose. titleExample Project/title link relstylesheet hrefstyles.css /head body a classskip-link href#contentSkip to content/a header classsite-header nav classnav aria-labelPrimary navigation a classbrand hrefindex.htmlExample Project/a a hrefabout.htmlAbout/a /nav /header main idcontent classpage p classeyebrowOpen and useful/p h1A clear statement of what the project does./h1 p classledeExplain who the project serves and why it exists in two short sentences./p a classbutton hrefabout.htmlLearn about the project/a /main footer classsite-footer pContact: a hrefmailto:contactexample.dpdns.orgcontactexample.dpdns.org/a/p /footer /body /html值得逐条理解的关键点:langen与meta description:每个公开页面都需要唯一的title与有意义的 description,这是 可访问性与搜索基础中Page Metadata一节的直接落地——它帮助用户区分标签页,并帮助搜索系统理解页面,但并不保证排名;skip-link:a classskip-link href#contentSkip to content/a位于body第一个交互元素的位置,让键盘用户跳过导航直达正文。它平时被 CSS 隐藏(见第 5 节),获得焦点时才显现;语义化标签:nav aria-labelPrimary navigation、main idcontent使用原生元素而非通用div拼凑,天然携带键盘行为与语义,这正是 3.8 章节Start with Semantic HTML原则的体现;虚拟联系邮箱:原文特别强调,contactexample.dpdns.org是虚构的占位值,只有当存在一个被监控的邮箱且你有意公开发布时,才应替换为真实地址。这与 7.1 中Public vs Private 数据的划分一致:联系方式属于可公开数据,但必须是你实际能收信、愿公开的地址。四、Step 3:创建 About 页 about.html!doctype html html langen head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 meta namedescription contentBackground, purpose, and contact information for Example Project. titleAbout | Example Project/title link relstylesheet hrefstyles.css /head body a classskip-link href#contentSkip to content/a header classsite-header nav classnav aria-labelPrimary navigation a classbrand hrefindex.htmlExample Project/a a aria-currentpage hrefabout.htmlAbout/a /nav /header main idcontent classpage prose h1About the project/h1 pDescribe the problem that led to the project./p h2What we provide/h2 pDescribe the useful information or service available here./p h2Contact/h2 pExplain how a visitor can reach the responsible team./p /main footer classsite-footer pa hrefindex.htmlReturn home/a/p /footer /body /html与首页相比,这页有两处刻意的差异:当前页导航项使用aria-currentpage标记,向辅助技术声明这就是你所在的页面;main增加prose类、正文使用h1之下嵌套h2的严格标题层级——第 8 节确认标题顺序测试直接针对这一点。标题层级、描述性链接文案(About、Return home、Learn about the project 均描述了去向)都对应 3.8 章节中结构化内容同时利于可访问性与搜索理解的要求。五、Step 4:创建样式表 styles.css*, *::before, *::after { box-sizing: border-box; } :root { color-scheme: light; font-family: system-ui, sans-serif; line-height: 1.6; background: #f8fafc; color: #0f172a; } body { min-height: 100vh; margin: 0; } a { color: #075985; } a:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 3px; } .skip-link { position: absolute; left: 1rem; top: -5rem; padding: 0.75rem 1rem; background: #ffffff; } .skip-link:focus { top: 1rem; } .site-header, .site-footer { border-block: 1px solid #cbd5e1; background: #ffffff; } .nav, .page, .site-footer p { width: min(68rem, calc(100% - 2rem)); margin-inline: auto; } .nav { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; } .brand { font-weight: 750; text-decoration: none; } .page { padding-block: clamp(4rem, 10vw, 8rem); } .page h1 { max-width: 18ch; font-size: clamp(2.25rem, 6vw, 4.75rem); line-height: 1.05; } .eyebrow { color: #0369a1; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .lede, .prose { max-width: 44rem; } .button { display: inline-block; margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 0.5rem; background: #075985; color: #ffffff; font-weight: 700; text-decoration: none; } .site-footer { padding-block: 1rem; } media (prefers-reduced-motion: no-preference) { a { transition: color 150ms ease, background-color 150ms ease; } }这段样式表虽然不长,但每个区块都有明确的工程意图,值得结合源码逐块解读:区块关键声明作用与依据全局盒模型box-sizing: border-box让所有元素(含伪元素)的 padding/border 计入宽度,是响应式布局可预测的前提:root主题变量color-scheme: light、system-ui、line-height: 1.6声明浅色方案避免浏览器自动深色化造成对比度失控;系统字体栈零加载成本;1.6 行高保障长文可读性焦点样式a:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 3px }用:focus-visible而非简单outline: none思路,保证键盘导航时焦点永远可见——对应 3.8 章节不要移除焦点轮廓而不提供清晰替代的硬性要求Skip link 机制.skip-link { top: -5rem }.skip-link:focus { top: 1rem }平时移出视口上方(位置绝对,不占布局),获得焦点时下移 1rem 可见——首页中Skip to content链接的显示逻辑完全由这两条规则驱动响应式宽度width: min(68rem, calc(100% - 2rem))margin-inline: auto大屏上限 68rem、小屏两侧各留 1rem,无需媒体查询即可实现居中容器流式排版padding-block: clamp(4rem, 10vw, 8rem)、font-size: clamp(2.25rem, 6vw, 4.75rem)clamp()在最小/最大约束间随视口插值,第 8 节200% 缩放与窄视口测试即验证这种流式行为正文字宽.lede, .prose { max-width: 44rem }限制行长约 44rem,符合可读行宽惯例动效降级media (prefers-reduced-motion: no-preference)链接过渡动画仅在用户未开启减少动态效果时启用,尊重系统偏好注意:root声明color-scheme: light,意味着该站点以浅色为既定主题;3.3 本地测试章节要求文本在浅色与深色系统主题下均可读,该声明正是让页面在深色系统主题下也不会出现深色文字配深色背景错乱的保证。六、Step 5:启动本地服务器python3 -m http.server 8000 --bind 127.0.0.1然后打开http://127.0.0.1:8000/。这里有两个关键细节:为什么不直接双击打开index.html?直接用file://协议打开文件无法复现真实 Web 服务器行为(相对路径解析、MIME 类型、404 语义都不同),3.3 章节开宗明义:Openingindex.htmldirectly does not reproduce all web-server behavior. Run a local HTTP server instead.--bind 127.0.0.1的意义:把开发服务器限制在本地回环接口。3.3 章节警告,绑定到0.0.0.0会让服务器在防火墙允许的每一个网络接口上可达,只有当你刻意要做局域网测试且文件确实可以分享时才该这样做。测试完毕后按CtrlC停止服务器,并可用lsof -nP -iTCP:8000 -sTCP:LISTEN确认没有进程残留监听该端口(无输出即已停止)。这个开发服务器只用于本地测试,不用于公网生产——生产环境由 7.3 章节中的 Nginx 承担。七、Step 6:功能测试在另一个终端中,对三个资源逐一发起 HEAD 请求:curl -I http://127.0.0.1:8000/ curl -I http://127.0.0.1:8000/about.html curl -I http://127.0.0.1:8000/styles.css预期结果(原文逐条列出):两个页面都返回200;样式表返回200且携带 CSS 的 Content-Type;首页链接到 About 页;About 页链接回首页。结合 Python 标准库的实现可以推断:python3 -m http.server的SimpleHTTPRequestHandler会通过mimetypes模块解析扩展名,因此.html应返回Content-Type: text/html、.css应返回Content-Type: text/css(随系统 MIME 数据库可能带 charset 参数)。如果styles.css返回的不是 CSS 类型,浏览器可能拒绝应用样式,这类问题必须在此阶段发现,而不是上线后排查。功能测试不只是状态码:两条链接互指的断言验证的是 7.1 架构中Home 与 About 相互可达这一页面结构契约,对应 7.1 验收清单里Home and About links work一条。八、Step 7:可访问性测试原文给出七项手动测试清单,它们与样式表、HTML 结构形成一一对应的验证链:测试项被验证的实现用Tab与Enter完成全部导航原生a元素天然可聚焦、可激活(3.8 章节键盘导航1–5 步的现场执行)确认 skip link 在获得焦点时出现.skip-link:focus { top: 1rem }规则(第 5 节)确认焦点始终可见a:focus-visible的 3px 轮廓规则(第 5 节)放大到 200%clamp()流式字号与min(68rem, ...)容器宽度在缩放后不产生横向滚动或溢出测试窄视口同上,验证calc(100% - 2rem)在小屏下的表现确认标题顺序About 页h1→h2的层级(第 4 节)确认每个链接都描述其去向About、Return home、Learn about the project 等文案这套清单与 3.8 章节Accessibility Review Lab的七步审查法同源(键盘导航、替代文本、标题顺序、200% 缩放、窄视口、禁用 CSS 后文档仍可读、记录并修复至少三个问题),本课将其裁剪为与两页站点直接相关的可执行子集。九、Step 8:内容与隐私审查在提交任何公开内容之前,用 ripgrep 扫描整个项目:rg -n -i password|token|secret|api[_-]?key|192\.168\. .正则各分量的含义:-n -i:输出行号、忽略大小写;password|token|secret:凭据类关键字;api[_-]?key:同时覆盖apikey、api_key、api-key三种命名习惯;192\.168\.:转义的.精确匹配内网地址段前缀,防止把本机内网 IP 写进公开页面(这正是 3.3 章节HTML 或 CSS 中不应出现本地绝对路径/本地地址检查的终端版)。对每一条命中都必须人工复核。原文随后给出两条判定标准:公开的联系信息必须是有意为之;站点目录内不得残留私密笔记——对应.gitignore中notes/private-*规则:私密笔记应放在被忽略的模式内,且根本不应出现在capstone-site的公开文件中。十、Step 9:保存版本基线git add index.html about.html styles.css .gitignore git diff --cached git commit -m Create capstone static site注意原文的操作顺序纪律:Only commit after reviewing the staged content.——先git diff --cached审查暂存区内容,确认没有意外文件(如误放的notes/private-*草稿)之后,再执行 commit。这个基线提交的价值在于:它是源码可在另一台机器上重建站点这一闸门要求的直接证据:git clone 三个源文件即可完整复现;后续 7.3 部署与 7.4 运维阶段若需要回滚,该 commit 就是已知良好的恢复点,与 7.1 中回滚计划Website backup location / Command to restore files两个字段直接衔接。十一、放行闸门:何时可以进入公网阶段本课结束时,原文设置了一道硬闸门:Do not continue until all local tests pass and the source can rebuild the site on another machine.即必须同时满足:第六节三个curl -I全部符合预期(两个页面 200、样式表 200 且为 CSS 类型、双向链接成立);第七节七项可访问性检查全部通过;第九节隐私扫描无未处理命中;第十节基线 commit 完成,且该源码在另一台机器上能重建出站点。满足以上条件后,才进入下一章 Register, Deploy, and Connect——准备 DNS zone、注册域名、验证委派、安装 Nginx 并把本地产物部署到/var/www/example.dpdns.org。本地测试做得越彻底,公网阶段要面对的未知数就越少,这正是整个 Capstone 先本地、后公网方法论的核心。【免费下载链接】US.KGFree domain registration and practical DNS learning resources for everyone.项目地址: https://gitcode.com/GitHub_Trending/us/US.KG创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考