US.KG 免费域名建站实战：从零搭建一个三文件静态网站并走向部署

US.KG 免费域名建站实战从零搭建一个三文件静态网站并走向部署【免费下载链接】US.KGFree domain registration and practical DNS learning resources for everyone.项目地址: https://gitcode.com/GitHub_Trending/us/US.KG本文基于 US.KG 教程第 3.2 章《Build a Static Website》带你完整创建第一个可部署的静态网站项目一个index.html、一个about.html和一份styles.css。读完后你将掌握静态站点的标准目录结构、可直接复制运行的 HTML/CSS 代码、相对链接与公开目录的安全准则以及本站点如何无缝衔接本地测试3.3 章与 Linux 服务器部署3.4、3.5 章。这个站点在 US.KG 学习路径中的位置US.KG 是 DigitalPlat FreeDomain 的公开资源仓库提供免费域名注册与系统化的 DNS/建站学习路径。整本书的 Part 3Build and Publish a Website 遵循一条明确的主线HTML 与 CSS 基础3.0理解一次网站请求如何工作3.1搭建静态网站3.2即本章本地测试3.3准备 Linux Web 服务器3.4部署并接入域名3.5启用并验证 HTTPS3.6。选择先做静态站并非随意。3.1 章给出了理由静态站的 HTML、CSS、JavaScript 和图片文件按原样被服务器返回攻击面小是最合适的第一个部署目标而动态应用涉及数据库、认证、后台任务与密钥需要额外的部署、备份与运维实践。因此 3.2 章交付的这个三文件项目就是后续所有部署、DNS、HTTPS 章节反复使用的实验对象。创建项目目录所有操作从本地任意工作目录开始创建一个独立的项目文件夹mkdir my-first-site cd my-first-site后续 3.5 章的部署命令正是从这个目录的父目录执行rsync所以保持一个干净、独立的项目目录很重要。编写 index.html首页的完整代码在my-first-site/下创建index.html!doctype html html langen head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 meta namedescription contentMy first website titleMy First Website/title link relstylesheet hrefstyles.css /head body main classcard p classeyebrowHello, Internet/p h1My first website is online./h1 pThis page is served from my own domain./p a hrefabout.htmlAbout this site/a /main /body /html逐段解读这份代码中每个要素的作用!doctype html声明 HTML5 文档类型保证浏览器以标准模式渲染。html langen语言属性供辅助技术与搜索引擎识别页面语言3.0 章建议按实际内容语言设置。meta charsetutf-8统一字符编码避免中文等非 ASCII 内容出现乱码。meta nameviewport contentwidthdevice-width, initial-scale1让移动设备按设备宽度渲染是响应式布局的前提没有它手机会以桌面宽度缩放显示页面。meta namedescription页面摘要用于搜索引擎结果展示更完整的可访问性与搜索优化见 3.8 章。link relstylesheet hrefstyles.css用相对 URL引入样式表。3.0 章专门对比了三种 URL 写法——相对 URLabout.html、根相对 URL/about/、绝对 URLhttps://example.dpdns.org/about/——并指出相对 URL 让小型静态站更容易在不同环境本地目录、测试服务器、不同子路径中复用这正是本章坚持全部使用相对链接的原因。main classcard使用语义化地标元素而非无意义的div让这是页面主体内容这一含义被浏览器与辅助技术直接理解。页面中的a hrefabout.html指向第二页链接文本描述的是目标页内容而不是点击这里符合 3.0 章的链接书写建议。注意首页中只使用了一个h1。3.0 章强调h1代表页面主题每页只应有一个标题层级表达文档结构而非字号大小。编写 styles.css支持浅色/深色主题的卡片布局创建styles.css:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.5; } body { display: grid; min-height: 100vh; margin: 0; place-items: center; background: #0f172a; color: #e2e8f0; } .card { width: min(38rem, calc(100% - 3rem)); padding: 3rem; border: 1px solid #334155; border-radius: 1.5rem; background: #111827; box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%); } .eyebrow { color: #38bdf8; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } a { color: #7dd3fc; }这份样式虽然只有几十行但覆盖了几个值得理解的技术点color-scheme: light dark声明页面同时适配浅色与深色系统主题。3.3 章的浏览器检查清单中文本在浅色和深色系统主题下均可读就是针对这一条的验收项。display: gridplace-items: centermin-height: 100vh现代 CSS 的居中方案让.card在整个视口内水平垂直居中且body边距被margin: 0清零。width: min(38rem, calc(100% - 3rem))响应式宽度的核心技巧——卡片最宽 38rem但永远不会超过容器宽度减去左右共 3rem 留白因此在窄屏手机上不会溢出。3.0 章的响应式小节给出了同样的min(68rem, calc(100% - 2rem))模式二者是同一思路。system-ui, sans-serif优先使用系统自带字体不下载 Web 字体页面加载零阻塞——这为后续 3.9 章的性能与缓存主题留好了基础。.card的padding: 3rem与border: 1px solid正好落在盒模型的border - padding - content三层之内3.0 章的盒模型小节。若后续你发现声明的宽度对不上实际渲染宽度3.0 章给出的全局box-sizing: border-box规则就是修正手段。从这份 CSS 的结构看选择器全部是最简单的元素选择器与类选择器没有深层嵌套——这与 3.0 章优先使用简单类选择器的级联建议一致。编写 about.html第二个页面创建about.html!doctype html html langen head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 titleAbout | My First Website/title link relstylesheet hrefstyles.css /head body main classcard h1About this site/h1 pI built this site to learn domains, DNS, HTTP, and HTTPS./p a hrefindex.htmlReturn home/a /main /body /html该页面刻意保持极简独立的titleAbout | My First Website标题含站点名的管道符分隔是常见的多页站点命名惯例、同一份styles.css、以及指回首页的相对链接index.html。两个页面互为链接正好覆盖 3.3 章验收项中的About 与 Return 链接都能正常工作。检查项目结构完成后项目目录应呈现为my-first-site/ ├── about.html ├── index.html └── styles.css三个文件平铺在根目录下没有子目录。这个扁平结构是刻意为之相对链接about.html、styles.css不需要路径前缀页面即使在测试子目录或不同服务器根路径下也能工作3.5 章用rsync -av --delete ./my-first-site/整目录同步时扁平结构让本地有什么、服务器就有什么一目了然。3.2 章同时给出了两条贯穿整个部署过程的安全准则原文要求如下使用相对链接保证页面在测试目录中同样可用公开站点目录只放公开内容——不要把密码、API 密钥、私人文档、包含密钥的 source map、配置备份放进my-first-site/。因为该目录未来会被整体复制到公网服务器的/var/www/下任何放进去的文件都可能被匿名访问。添加基础项目文件.gitignore 与提交纪律如果编辑器或工具会在项目里生成本地文件创建.gitignore.DS_Store *.log .env这里需要特别理解原文的一句安全告诫把.env写进.gitignore只意味着本地不追踪它并不意味着它已经安全。如果文件之前已被提交或凭据已存在于版本历史中忽略规则无法消除泄露。原文给出的配套纪律是每次提交前都要检查暂存区文件例如git status与git diff --cached确认没有凭据混入。这与 3.8 章之前各章反复出现的公开面最小化原则一脉相承静态站攻击面小的前提恰恰是公开目录里只有静态内容。从项目到上线与后续章节的衔接3.2 章交付的目录并不是终点它是 3.3 到 3.6 章所有操作的对象。提前了解衔接方式能帮助你在写代码阶段就避免返工本地测试3.3 章。不要直接双击打开index.html——file://协议无法复现 Web 服务器的行为。正确做法是在项目目录启动一个仅绑定本机的开发服务器python3 -m http.server 8000 --bind 127.0.0.1然后在另一个终端验证本章创建的两个页面都能返回成功状态与 HTML 内容类型curl -I http://127.0.0.1:8000/ curl -I http://127.0.0.1:8000/about.html--bind 127.0.0.1将开发服务器限制在本机3.3 章警告绑定0.0.0.0会让服务器上所有网络接口暴露这些文件仅在确实需要局域网测试且文件可共享时才这样做。生产服务器上的对应物3.4 章。3.4 章以 Debian/Ubuntu Nginx 为例最终会创建站点目录/var/www/example.dpdns.org并配置虚拟主机其中两条指令直接消费本章的成果root /var/www/example.dpdns.org; index index.html;index index.html意味着用户访问站点根路径/时Nginx 自动返回本章编写的index.htmltry_files $uri $uri/ 404则保证about.html这类直链文件按原样返回、不存在的路径返回 404——这正是 3.1 章状态码表中静态站的行为。部署与域名接入3.5 章。部署从本项目目录的父目录执行rsync -av --delete ./my-first-site/ user192.0.2.10:/var/www/example.dpdns.org/--delete会删除目标端多余文件——3.5 章提醒在确认源与目标路径无误之前不要使用它上传后用find /var/www/example.dpdns.org -maxdepth 2 -type f -print核对文件sudo nginx -t验证配置再重载。随后在外部权威 DNS 服务商创建的 A/AAAA 记录与www的 CNAME 记录用dig与curl -I完成 DNS 和 HTTP 两层验证。本章验收清单对照 3.2 章原文与后续章节的验收标准你的my-first-site项目应满足目录中恰好包含index.html、about.html、styles.css以及可选的.gitignore无其他文件两页 HTML 的文档结构合法!doctype html、lang、charset、viewport齐全各页只有一个描述性h1所有链接与样式引用都是相对路径HTML 与 CSS 中不出现本地绝对路径如C:\Users\...或/home/xxx/...公开目录中没有密码、API 密钥、.env、日志或任何配置备份在python3 -m http.server下curl -I对/与/about.html均返回成功状态与 HTML 内容类型浏览器控制台无缺失文件报错。全部满足后即可按 3.3 章完成本地测试再进入 3.4 章准备服务器让这三行简单的 HTML/CSS 真正上线在你自己的域名上。完整学习路径可回到 教程总目录或 LEARN.md 继续浏览。【免费下载链接】US.KGFree domain registration and practical DNS learning resources for everyone.项目地址: https://gitcode.com/GitHub_Trending/us/US.KG创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考