151 lines
7.8 KiB
Typst
151 lines
7.8 KiB
Typst
#import "labtemplate.typ": *
|
||
#show: nudtlabpaper.with(title: "网站搭建实验",
|
||
author: "程景愉",
|
||
id: "202302723005",
|
||
training_type: "无军籍",
|
||
grade: "2023",
|
||
major: "网络工程",
|
||
department: "计算机学院",
|
||
advisor: "逄德明",
|
||
jobtitle: "教授",
|
||
lab: "307-211",
|
||
date: "2026.01.17",
|
||
header_str: "《计算机网络》实验报告",
|
||
)
|
||
|
||
#set page(header: [
|
||
#set par(spacing: 6pt)
|
||
#align(center)[#text(size: 11pt)[《计算机网络》实验报告]]
|
||
#v(-0.3em)
|
||
#line(length: 100%, stroke: (thickness: 1pt))
|
||
],)
|
||
|
||
// Global text settings
|
||
#set text(font: song, size: 10.5pt)
|
||
#set par(first-line-indent: 2em, justify: true, leading: 1em)
|
||
|
||
// Heading styling
|
||
#show heading: it => box(width: 100%)[
|
||
#v(0.50em)
|
||
#set text(font: hei)
|
||
#counter(heading).display()
|
||
#h(0.5em)
|
||
#it.body
|
||
]
|
||
|
||
#outline(title: "目录", depth: 3, indent: 2em)
|
||
#pagebreak()
|
||
#outline(
|
||
title: [图目录],
|
||
target: figure.where(kind: image),
|
||
)
|
||
#pagebreak()
|
||
|
||
// List settings
|
||
#set enum(indent: 0.5em, body-indent: 0.5em)
|
||
// Disable indentation for lists
|
||
#show enum: set par(first-line-indent: 0pt)
|
||
#show list: set par(first-line-indent: 0pt)
|
||
|
||
= 实验目的
|
||
|
||
1. 了解万维网（World Wide Web）的历史起源与发展，通过复刻世界上第一个网站，直观感受早期Web技术的形态，理解超文本标记语言（HTML）的基本结构与演变。
|
||
2. 掌握现代Web前端开发技术，包括HTML5语义化标签、CSS3样式设计及响应式布局，能够独立设计并编写符合标准、美观大方的个人主页。
|
||
3. 熟悉互联网基础设施的运作机制，包括域名系统（DNS）的注册与解析原理，以及Linux服务器的基本操作。
|
||
4. 掌握Web服务器软件（Caddy）的安装与配置，实现网站在个人服务器上的部署，并配置HTTPS安全访问，打通从开发到上线的全流程。
|
||
|
||
= 实验原理
|
||
|
||
1. *HTML (HyperText Markup Language)*: 超文本标记语言是构建Web的基础。它使用标签（Tags）来定义网页的内容结构，如标题、段落、链接和图片。实验中涉及从早期的HTML标签到现代HTML5语义化标签的应用。
|
||
2. *CSS (Cascading Style Sheets)*: 层叠样式表用于控制网页的外观和布局。通过CSS选择器、盒模型、Flexbox/Grid布局以及媒体查询（Media Queries），可以将结构与表现分离，实现适应不同屏幕尺寸的响应式设计。
|
||
3. *Web服务器与HTTP协议*: Web服务器（如Caddy）运行在服务端，监听标准端口（80/443），接收客户端（浏览器）发起的HTTP/HTTPS请求，并返回请求的资源（HTML文件、图片等）。Caddy以其自动化的HTTPS配置和简洁的Caddyfile配置语法著称。
|
||
4. *DNS (Domain Name System)*: 域名系统将人类易记的域名（如 `hifuu.ink`）映射为计算机网络中通讯使用的IP地址，使用户能够通过域名便捷地访问服务器。
|
||
|
||
= 实验环境
|
||
|
||
- *操作系统*: Linux (个人公网服务器环境，使用Rockylinux 9)
|
||
- *Web服务器*: Caddy Web Server (支持自动 HTTPS)
|
||
- *开发环境*: VS Code, Typst (实验报告排版)
|
||
- *前端技术栈*: HTML5, CSS3 (未使用庞大的前端框架，保持轻量级)
|
||
- *域名服务商*: 阿里云 (Aliyun)
|
||
- *测试工具*: Firefox Developer Edition
|
||
|
||
= 实验步骤及结果
|
||
|
||
== 复刻世界上第一个网站（https://www.hifuu.ink/TheProject.html）
|
||
|
||
实验的第一部分是致敬历史，复刻由万维网之父 Tim Berners-Lee 创建的世界上第一个网站 "The World Wide Web project"。
|
||
|
||
我获取了原始的 `TheProject.html` 源代码。代码中包含了许多早期 HTML 的特征，例如 `<NEXTID>` 标签（这是当年 NeXTSTEP 开发环境特有的标签）以及 `<DL>`, `<DT>`, `<DD>` 定义列表的使用。该页面通过简单的超链接结构，构建了一个关于 W3C 项目本身的各种信息的索引。
|
||
|
||
#figure(
|
||
rect(width: 100%, height: 8cm, stroke: (thickness: 1pt, dash: "dashed"))[
|
||
#align(center + horizon)[#image("screenshot2.png")]
|
||
],
|
||
caption: [复刻的世界上第一个网站页面效果],
|
||
)
|
||
|
||
== 搭建个人主页 (https://www.hifuu.ink)
|
||
|
||
实验的第二部分是设计并实现我的个人主页 "CGH0S7 Official"。主页旨在展示个人简介、技术栈、教育经历及博客链接。
|
||
|
||
=== 页面结构设计 (HTML5)
|
||
|
||
在 `index.html` 中，我采用了 HTML5 的语义化标签来构建页面结构，这有助于代码的可读性和 SEO 优化：
|
||
|
||
- *`<header>`*: 包含了网站导航 (`<nav>`) 和个人品牌区域 (`.brand`)，展示头像与昵称。
|
||
- *`<section>`*: 将页面内容划分为不同的逻辑区块，包括关于我 (`About`)、爱好 (`Hobby`)、教育经历 (`Education`)、奖项 (`Awards`)、发表论文 (`Publications`)、博客 (`Blog`) 和联系方式 (`Contact`)。
|
||
- *`<footer>`*: 页脚部分，展示版权信息和构建时间。
|
||
|
||
=== 样式与交互设计 (CSS3)
|
||
|
||
为了实现现代化的视觉体验，我在 `<style>` 标签中编写了 CSS 样式：
|
||
|
||
- *CSS 变量*: 定义了 `:root` 变量（如 `--accent: #CEA152`），方便统一管理主题色和字体颜色。
|
||
- *Flexbox 与 Grid 布局*: 导航栏使用 Flexbox 实现水平排列；教育经历卡片使用 Grid 布局 (`grid-template-columns: 1fr auto`) 实现文字与校徽的对齐。
|
||
- *响应式设计*: 使用 `@media (max-width: 640px)` 媒体查询。当屏幕宽度小于 640px 时，Header 自动调整为垂直排列，卡片布局也切换为单列模式，确保在手机端有良好的浏览体验。
|
||
|
||
#figure(
|
||
rect(width: 100%, height: 10cm, stroke: (thickness: 1pt, dash: "dashed"))[
|
||
#align(center + horizon)[#image("screenshot1.png")]
|
||
],
|
||
caption: [个人主页 (hifuu.ink) PC 端显示效果],
|
||
)
|
||
|
||
#figure(
|
||
rect(width: 50%, height: 10cm, stroke: (thickness: 1pt, dash: "dashed"))[
|
||
#align(center + horizon)[#image("screenshot3.jpg")]
|
||
],
|
||
caption: [个人主页移动端响应式布局效果],
|
||
)
|
||
|
||
== 服务器部署与上线
|
||
|
||
=== 域名购买与解析
|
||
|
||
为了让个人主页能够在公网访问，我在 *阿里云* 平台购买了域名 `hifuu.ink`。
|
||
|
||
在阿里云的域名控制台中，我添加了一条 A 记录，将主机记录 `@` 指向了我个人 Linux 服务器的公网 IP 地址。等待 DNS 缓存刷新后，ping 域名即可解析到正确的 IP。
|
||
|
||
=== 配置 Caddy Web Server
|
||
|
||
我选择使用 *Caddy* 作为 Web 服务器，主要看重其配置简单且默认支持自动 HTTPS（通过 Let's Encrypt）。
|
||
|
||
部署步骤如下：
|
||
|
||
1. 将编写好的 `index.html`、`avatar.jpg` 以及复刻的 `hifuu.ink` 文件夹上传至服务器目录。
|
||
2. 编写 `Caddyfile` 配置文件，指定站点根目录。
|
||
3. 启动 Caddy 服务。Caddy 自动检测到域名配置，并自动完成了 SSL 证书的申请和安装。
|
||
|
||
= 实验总结
|
||
|
||
== 心得感悟
|
||
|
||
本次实验是一次非常有意义的web开发初体验。
|
||
|
||
首先，通过复刻 Web 诞生之初的网页，我深刻体会到了互联网技术从简陋到繁荣的巨大变迁。几十行简单的 HTML 代码，却是如今万物互联世界的基石。
|
||
|
||
其次，在编写个人主页的过程中，我不仅巩固了 HTML5 和 CSS3 的语法，更重要的是学会了如何通过布局和配色来提升用户体验。看到自己设计的页面在不同设备上都能完美展示，这种“所见即所得”的反馈带给我很大的成就感。
|
||
|
||
最后，服务器部署环节让我走出了“本地开发”的舒适区。从购买域名到配置 Linux 服务器，再到看着浏览器地址栏那把代表安全的“小锁”（HTTPS）亮起，我理解了网站上线背后的技术链路。使用 Caddy 服务器极大地简化了配置流程，让我能更专注于内容本身。这次实验不仅不仅让我拥有了一个属于自己的互联网角落，也为后续深入学习计算机网络原理打下了坚实的基础。
|