零代码搭建个人网站：GitHub Pages 免费部署教程

m0_46230270

26人浏览 · 2026-09-19 12:56:02

m0_46230270 · 2026-09-19 12:56:02 发布

如何根据 GitHub 个人主页项目搭建属于自己的个人网站

请添加图片描述

很多同学希望拥有一个可以展示个人简介、教育背景、研究方向和项目经历的个人网站，但又不想从零开始学习复杂的前端框架和服务器部署。

本文基于一个纯静态 GitHub Pages 个人主页项目，带你从 Fork 仓库开始，搭建一个属于自己的个人 GitHub 网站。

一、项目介绍

本文使用的个人主页项目仓库是：

https://github.com/Sammir-z/Sammir.github.io

项目采用纯静态网页架构，不需要购买服务器，也不需要配置数据库或登录系统。网页内容通过 HTML、CSS、JavaScript、Markdown 和 YAML 文件组织，并使用 GitHub Pages 免费发布。

二、项目技术特点

不需要前端构建工具，直接使用静态文件即可运行。
个人信息与页面结构分离，修改 Markdown 和 YAML 文件即可更新内容。
支持 GitHub Pages 免费部署。
支持桌面端和移动端响应式布局。
可以添加自己的 GitHub 项目、论文、奖项和技能。
不包含用户登录、注册、后台管理和数据库。

三、准备工作

开始之前，需要准备：

一个 GitHub 账号
Git
Python 3，用于本地预览
一个代码编辑器，例如 VS Code

四、Fork 项目仓库

打开项目仓库：

https://github.com/Sammir-z/Sammir.github.io

点击右上角的 Fork，将项目复制到自己的 GitHub 账号下。

Fork 完成后，仓库地址会变成：

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

五、复用本项目（Reuse this website）

下面的步骤对应 README 中的 Reuse this website 部分。

设置自己的仓库名称

如果希望使用 GitHub Pages 的根域名，建议把仓库重命名为：

你的用户名.github.io

例如用户名是 alice，仓库名应修改为：

alice.github.io

部署后的网站地址就是：

https://alice.github.io/

如果不修改仓库名称，则使用项目站点地址：

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

例如：

https://alice.github.io/Sammir.github.io/

六、克隆到本地

在项目保存目录打开 PowerShell 或终端，执行：

git clone https://github.com/你的用户名/你的仓库名.git
cd 你的仓库名

以用户名 alice、仓库名 alice.github.io 为例：

git clone https://github.com/alice/alice.github.io.git
cd alice.github.io

七、修改个人信息

项目中的个人内容主要位于 contents 目录：

contents/
├── config.yml
├── home.md
├── projects.md
├── experience.md
├── publications.md
└── awards.md

1. 修改全局配置

打开 contents/config.yml，可以修改网站标题、首页文案和版权信息：

title: Alice | Personal Portfolio
page-top-title: Alice
top-section-bg-text: Build, learn, share.
hero-name: Alice
hero-role: Software Engineer · AI Enthusiast
home-subtitle: Alice
copyright-text: '&copy; Alice 2026. All Rights Reserved.'

2. 修改个人简介和教育背景

打开 contents/home.md，填写自己的个人简介、研究方向、教育经历和技术兴趣。

3. 修改项目经历

打开 contents/projects.md，将示例项目替换为自己的 GitHub 项目。

每个项目建议包含：

项目名称
项目定位
核心功能
技术栈
GitHub 仓库地址

项目链接示例：

<a class="project-link" href="https://github.com/你的用户名/你的项目" target="_blank" rel="noreferrer">
  View repository
</a>

4. 修改研究和工程经历

打开 contents/experience.md，可以填写实习经历、科研项目、开源贡献、工程能力和项目指标。

5. 修改论文和奖项

contents/publications.md：填写论文、技术报告或研究成果。
contents/awards.md：填写奖学金、竞赛奖项和其他荣誉。

八、替换头像和背景图

网站图片位于：

static/assets/img/

主要文件包括：

photo.png：头像
background.jpeg：首页背景
favicon.ico：浏览器标签页图标

替换图片后，如果文件名保持不变，通常不需要修改 HTML；如果文件名改变，需要同步修改 index.html 或 static/css/main.css 中的路径。

请注意：

不要上传身份证、联系方式、住址等敏感材料。
不要上传密码、API Key 或数据库连接信息。
使用头像和背景图前，确认自己拥有合法使用权。

九、本地运行和预览

由于网页会通过 fetch 加载 Markdown 和 YAML 文件，不建议直接双击 index.html，否则浏览器可能因为 file 协议限制导致内容无法加载。

在仓库根目录运行：

python -m http.server 4173

然后打开浏览器访问：

http://127.0.0.1:4173/

如果 python 命令不可用，也可以尝试：

py -m http.server 4173

停止本地服务时，在终端按 Ctrl + C。

十、开启 GitHub Pages

将代码推送到自己的仓库后，打开：

Settings → Pages

在 Build and deployment 中设置：

Source：Deploy from a branch
Branch：main
Folder：/ (root)

点击 Save，等待 GitHub Pages 完成部署。

部署完成后，GitHub 会在 Pages 设置页面显示网站地址。根据仓库名称不同，访问地址可能是：

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

或者：

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

十一、提交并发布更新

修改完成后，在项目根目录执行：

git add .
git commit -m "update personal portfolio"
git push origin main

推送完成后，GitHub Pages 会自动重新部署。如果页面没有立即变化，可以使用 Ctrl + F5 强制刷新，或检查 GitHub 仓库的 Actions 和 Settings → Pages 部署状态。

十二、项目目录结构

.
├── contents                  # 个人信息和页面区块
├── index.html                # 页面结构
├── static
│   ├── assets/img             # 头像、背景和图标
│   ├── css                    # Bootstrap 和主题样式
│   └── js                     # Markdown/YAML 加载逻辑
└── tests                     # 内容与隐私回归检查