Project：搭建 Github 主页

从零构建个人网站并发布到互联网

你将拥有一个 github.io 结尾的、属于自己的网址

项目概览

这是一个综合性实践项目——你将从零开始，只使用 HTML，亲手构建一个多页面个人网站

项目起点

  • 你已经学了 HTML 核心标签
  • 你知道怎么描述 HTML 需求
  • 现在要把它们用起来

项目终点

  • 一个以 github.io 结尾的个人网址
  • 包含四个页面的完整网站
  • 任何人都能通过网址访问

项目目标

目标一：巩固 HTML

系统性地运用讲义中的所有 HTML 核心元素——文本、链接、图片、列表、表格、表单。

目标二：实践真实流程

体验从本地开发到线上发布的完整流程，不是练习题，是真实可访问的网站。

目标三：收获个人作品

创建一个可以长期维护和分享的在线个人主页——你踏入 Web 世界的第一个作品集。

Part 1: 本地构建

在你的电脑上创建网站的全部内容和结构。

文件结构

创建 my-homepage 文件夹，包含 index、about、portfolio、contact 四个 HTML 页面。

逐页构建

首页展示个人信息，关于页用表格展示技能，作品页嵌入视频，联系页包含完整表单。

文件结构

创建一个项目文件夹，包含四个 HTML 页面和一个图片文件夹

my-homepage/
├── index.html        ← 网站首页
├── about.html        ← 关于我
├── portfolio.html    ← 作品/爱好页
├── contact.html      ← 联系方式
└── images/           ← 存放所有图片
所有页面必须有：标准 HTML5 结构（DOCTYPE + html + head + body）、语义化标签骨架（header + main + footer）、导航栏（header 内含 nav，链接所有四个页面）、页脚版权信息。

首页要求

index.html：回答"我是谁，我在做什么"

元素用途
<h1>页面主标题
<p>段落文本
<strong>强调重要内容
<em>斜体强调
<img>图片（带 alt 属性）
<hr>水平分隔线
<section>内容分区
<ul>无序列表

关于页

about.html：展示你的背景与技能

必用元素

  • <article> — 独立内容块
  • <h2> — 二级标题
  • <table> — 表格展示技能
  • <thead>, <tbody>
  • <a target="_blank" rel="noopener"> — 外部链接

选做元素

<aside>
  <p>趣闻或推荐内容</p>
</aside>

添加一个 <aside> 标签，写一些趣闻或推荐。

作品页

portfolio.html：展示你引以为豪的事情

元素用途
<article>作品展示块
<h2>作品标题
<ol>有序列表（项目步骤）
<ul>嵌套列表（分类）
<iframe>嵌入视频展示项目
<a href="#id">锚点链接（页面内跳转）
提示：用 <ol> 列出项目步骤，用 <ul> 列出分类标签，用 <iframe> 嵌入视频或地图展示你的作品。

联系页

contact.html：告诉别人如何找到你

联系链接

<a href="mailto:you@email.com">
  发邮件
</a>

<a href="tel:1234567890">
  打电话
</a>

表单元素

  • <form>
  • <label>
  • 多种 <input> 类型
  • <select>
  • <textarea>
  • <button>
加分项：用 <iframe> 嵌入一个地图，展示你的位置。

Part 2: 发布上线

将本地网站免费发布到互联网——任何人都能通过网址访问。

注册与建仓

注册 GitHub 账号，创建 username.github.io 仓库——用户名决定网址。

上传与访问

上传所有my-homepage/文件夹里的文件到 username.github.io 仓库里，等待 1-2 分钟部署，通过 https://username.github.io 访问。

注册建仓

两步准备工作：注册 GitHub 账号 + 创建代码仓库

第一步：注册 GitHub

访问 github.com 创建免费账号。

注意：你的用户名将成为网站地址的一部分。例如：octocat.github.io

第二步：创建仓库

在 GitHub 上创建一个新的、公开的（Public）代码仓库。

用户名：octocat
仓库名：octocat.github.io

仓库名必须是：
你的用户名 + .github.io

上传文件

三步把本地文件上传到 GitHub

上传步骤：

1. 进入你创建的仓库页面
2. 点击 "Add file" → "Upload files"
3. 将 my-homepage 文件夹里的所有文件拖拽到上传区域
4. 在提交信息中输入 "Initial commit"
5. 点击 "Commit changes" 按钮

本地文件夹

my-homepage/
├── index.html
├── about.html
├── portfolio.html
├── contact.html
└── images/

GitHub 仓库

username.github.io/
├── index.html
├── about.html
├── portfolio.html
├── contact.html
└── images/

访问网站

等待一两分钟让 GitHub 完成部署，然后在浏览器中输入你的网址

你的网站地址：

https://你的用户名.github.io

部署等待

上传完成后，等待 1-2 分钟让 GitHub 完成自动部署。期间可以刷新页面查看。

后续更新

要修改网站内容，只需在 GitHub 仓库中编辑或上传新文件，1-2 分钟后自动生效。

恭喜！你已经成功将个人主页发布到互联网上了！这是你踏入 Web 世界的第一个作品。

打不开怎么办

上传后访问白屏、404、图片裂开——这四种情况覆盖了 90% 的新手故障

症状一：访问显示 There isn't a GitHub Pages site here（404）

大概率是 Pages 没启用。进仓库 Settings → Pages，确认 Source 指向你的默认分支（main）和根目录 /，保存后等 1-2 分钟。

症状二：页面打开了但一片空白

通常是 index.html 文件名拼错或没传到仓库根目录。GitHub Pages 只认根目录下的小写 index.html，检查文件名没有多余空格、大小写一致。

症状三：图片显示成裂图（broken image）

GitHub 服务器对路径大小写敏感，Photo.jpg 和 photo.jpg 是两个文件。核对 src 路径与实际文件名完全一致，并确认 images 文件夹连同图片一起上传了（不能只传 HTML）。

症状四：CSS 没生效，样式全乱

检查 <link rel="stylesheet" href="style.css"> 的路径是否正确、文件是否上传。按 F12 打开 Network 面板，红色的请求就是没加载到的资源。

通用排查法：在浏览器按 F12 → Network 面板 → 刷新页面 → 凡是标红的请求都是加载失败的资源，对照上面的清单逐一修。

练习清单

本地构建

  • 已创建项目文件夹 my-homepage
  • 已创建四个 HTML 文件
  • 已创建 images 文件夹
  • 所有页面都有导航栏和页脚
  • index.html 包含所有必需元素
  • about.html 包含表格和外部链接
  • portfolio.html 包含 iframe 和锚点
  • contact.html 包含完整表单

发布上线

  • 已注册 GitHub 账号
  • 已创建 username.github.io 仓库
  • 已上传所有文件到仓库
  • 已成功访问网站

项目总结

你学会了什么

  • 创建多页面网站的文件结构
  • 使用语义化 HTML 标签构建页面
  • 实现各种 HTML 元素和功能
  • 将网站发布到 GitHub Pages
  • 拥有自己的个人网站地址

下一步建议

  • 学习 CSS 美化你的网站
  • 添加更多内容和页面
  • 学习 JavaScript 添加交互功能
  • 定期维护和更新你的个人主页

本章学习完毕

你已经从零构建了一个完整的个人网站并发布到互联网。下一章，我们将学习 CSS3 基础语法，让你的网站从朴素变精美。

下一章：CSS3 基础语法 →

1 / 17