从零搭建并维护个人主页

从零搭建并维护个人主页：GitHub Pages + PowerShell 完整教程

本文介绍如何使用 GitHub Pages 免费搭建个人主页，并通过 PowerShell + Git 在本地修改、提交和更新网站代码。

适合以下情况：

• 已经准备好一个 index.html
• 想把个人简介、项目经历、作品集或学习笔记发布到网页
• 想使用 用户名.github.io 作为个人主页地址
• 想在本地修改代码后同步到 GitHub
• 不熟悉 Git、PowerShell 或 GitHub Pages

本文使用以下通用示例：

GitHub 用户名：exampleuser
仓库名称：exampleuser.github.io
代码仓库：https://github.com/exampleuser/exampleuser.github.io
网站地址：https://exampleuser.github.io
本地目录：D:\Desktop\myweb

---

一、GitHub Pages 是什么

GitHub Pages 是 GitHub 提供的静态网站托管服务，可以免费发布：

• HTML
• CSS
• JavaScript
• 图片
• Markdown 生成的网站

对于个人主页，推荐使用如下仓库名称：

用户名.github.io

例如 GitHub 用户名是：

exampleuser

那么个人主页仓库应命名为：

exampleuser.github.io

对应的网站地址为：

https://exampleuser.github.io

个人主页仓库名称应与 GitHub 用户名保持一致。

---

二、准备网页文件

一个最基本的个人主页目录可以包含：

myweb
├─ index.html
├─ avatar.jpg
└─ background.png

其中：

• index.html：网页主页
• avatar.jpg：个人照片
• background.png：背景图片、校徽或其他装饰图片

1. 为什么必须叫 index.html

GitHub Pages 默认会寻找：

index.html

如果主页文件名是：

home.html

或：

个人主页.html

访问根网址时可能无法自动打开。

因此建议将主页文件统一命名为：

index.html

2. 图片路径必须使用相对路径

网页中引用头像时，应写成：

<img src="avatar.jpg" alt="个人照片">

引用背景图片时，应写成：

background-image: url("background.png");

不要写成本地绝对路径：

background-image: url("D:\Desktop\myweb\background.png");

因为 GitHub 服务器无法访问你电脑中的本地磁盘路径。

---

三、创建 GitHub Pages 仓库

1. 登录 GitHub

打开 GitHub 并登录自己的账号。

2. 创建仓库

点击右上角：

+ → New repository

仓库名称填写：

exampleuser.github.io

建议设置为：

Public

然后点击：

Create repository

最终仓库地址类似：

https://github.com/exampleuser/exampleuser.github.io

---

四、开启 GitHub Pages

进入仓库后，点击：

Settings

然后在左侧找到：

Pages

在 Build and deployment 中设置：

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

设置完成后保存。

如果 Save 按钮是灰色，通常说明当前设置已经生效，不需要重复保存。

发布成功后，页面会显示类似：

Your site is live at https://exampleuser.github.io/

此时点击：

Visit site

即可打开网站。

---

五、安装 Git

在使用 PowerShell 上传代码之前，需要先安装 Git。

1. 检查 Git 是否已经安装

打开 PowerShell，输入：

git --version

如果显示类似：

git version 2.45.1.windows.1

说明 Git 已经安装。

如果提示：

git 不是内部或外部命令

说明需要先安装 Git。

安装完成后，重新打开 PowerShell，再执行：

git --version

---

六、打开 PowerShell

在 Windows 中按：

Win + S

搜索：

PowerShell

然后打开：

Windows PowerShell

也可以进入目标文件夹，在地址栏输入：

powershell

然后按回车。

---

七、第一次把 GitHub 仓库下载到本地

假设希望将网站保存到：

D:\Desktop\myweb

首先进入桌面目录：

cd D:\Desktop

然后克隆仓库：

git clone https://github.com/exampleuser/exampleuser.github.io.git myweb

执行完成后，会生成：

D:\Desktop\myweb

进入该目录：

cd D:\Desktop\myweb

检查状态：

git status

如果显示：

On branch main

说明本地仓库已经准备完成。

---

八、将网页文件放入本地仓库

将以下文件放入：

D:\Desktop\myweb

例如：

D:\Desktop\myweb\index.html
D:\Desktop\myweb\avatar.jpg
D:\Desktop\myweb\background.png

最终目录类似：

myweb
├─ .git
├─ index.html
├─ avatar.jpg
└─ background.png

.git 文件夹是 Git 自动生成的隐藏目录，不要删除。

---

九、第一次提交代码

进入本地网站目录：

cd D:\Desktop\myweb

1. 查看文件状态

git status

新文件通常会显示为：

Untracked files

2. 添加所有文件

git add .

这里的点表示当前目录中的所有修改。

3. 提交修改

git commit -m "create personal homepage"

也可以写成：

git commit -m "创建个人主页"

4. 推送到 GitHub

git push origin main

完成后，代码就会上传到 GitHub。

稍等一两分钟后，访问：

https://exampleuser.github.io

即可看到个人主页。

---

十、配置 Git 用户信息

第一次提交时，Git 可能提示：

Author identity unknown

此时需要设置用户名和邮箱。

执行：

git config --global user.name "exampleuser"

再执行：

git config --global user.email "your-email@example.com"

查看配置：

git config --global --list

然后重新执行：

git add .
git commit -m "create personal homepage"
git push origin main

---

十一、以后如何修改网站

以后每次修改网站，流程基本相同。

第一步：进入网站目录

cd D:\Desktop\myweb

第二步：同步 GitHub 最新代码

git pull origin main

这一步用于把 GitHub 上的最新版本下载到本地，避免本地文件过旧。

第三步：修改代码

使用任意编辑器打开：

D:\Desktop\myweb\index.html

推荐使用：

• Visual Studio Code
• Notepad++
• Sublime Text
• Windows 记事本

修改完成后保存。

第四步：本地预览

双击：

index.html

浏览器会直接打开本地网页。

第五步：查看修改

git status

如果修改了 index.html，通常会显示：

modified: index.html

第六步：添加修改

git add .

第七步：提交修改

git commit -m "update homepage"

也可以写得更具体：

git commit -m "update project section"

第八步：推送到 GitHub

git push origin main

等待 GitHub Pages 自动部署完成。

---

十二、每次更新的标准流程

最常用的完整命令如下：

cd D:\Desktop\myweb

git pull origin main

git status

git add .

git commit -m "update homepage"

git push origin main

其中，修改 index.html 的操作应放在：

git pull origin main

和：

git add .

之间。

完整逻辑如下：

进入文件夹
→ 下载最新代码
→ 修改 index.html
→ 本地预览
→ 添加修改
→ 提交修改
→ 上传 GitHub

---

十三、检查远程仓库地址

可以执行：

git remote -v

正常应显示：

origin  https://github.com/exampleuser/exampleuser.github.io.git (fetch)
origin  https://github.com/exampleuser/exampleuser.github.io.git (push)

如果显示的是旧仓库地址，可以重新设置：

git remote set-url origin https://github.com/exampleuser/exampleuser.github.io.git

再次检查：

git remote -v

---

十四、仓库重命名后如何处理

假设原仓库地址是：

https://github.com/olduser/olduser.github.io

后来改成：

https://github.com/exampleuser/exampleuser.github.io

本地可能仍然连接旧地址。

进入本地目录：

cd D:\Desktop\myweb

修改远程地址：

git remote set-url origin https://github.com/exampleuser/exampleuser.github.io.git

检查：

git remote -v

确认后继续：

git pull origin main
git add .
git commit -m "update homepage"
git push origin main

---

十五、如何直接在 GitHub 网页中修改

除了 PowerShell，也可以直接在 GitHub 网页中修改少量内容。

进入仓库：

https://github.com/exampleuser/exampleuser.github.io

点击：

index.html

然后点击右上角铅笔图标：

Edit this file

修改完成后点击：

Commit changes...

填写提交说明，例如：

update homepage

然后再次点击：

Commit changes

GitHub Pages 会自动重新部署网站。

这种方式适合：

• 修改少量文字
• 修改链接
• 修改邮箱
• 修改颜色
• 修改一两篇文章条目

不适合大范围调整网页结构。

---

十六、网页没有更新怎么办

1. 等待部署

GitHub Pages 通常需要几秒到几分钟。

可以进入仓库：

Actions

查看：

pages build and deployment

如果显示绿色对勾，说明部署成功。

2. 强制刷新浏览器

Windows 浏览器中按：

Ctrl + F5

也可以按：

Ctrl + Shift + R

3. 使用无痕窗口

打开浏览器无痕模式，再访问：

https://exampleuser.github.io

可以避免旧缓存影响。

---

十七、常见问题及解决方法

问题一：网页显示 404

检查仓库根目录中是否有：

index.html

推荐统一使用小写：

index.html

问题二：头像或背景图片不显示

检查文件名是否完全一致。

HTML 中：

<img src="avatar.jpg">

仓库中的文件也必须叫：

avatar.jpg

以下文件名并不相同：

avatar.jpg
Avatar.jpg
avatar.JPG

GitHub Pages 区分大小写。

问题三：背景图片不显示

CSS 中应写：

background-image: url("background.png");

确保仓库中存在：

background.png

并且与 index.html 位于同一目录。

问题四：git push 提示没有权限

常见提示包括：

Permission denied

或：

Authentication failed

GitHub 通常不再支持直接使用账号密码进行 Git 推送。

可以使用：

• 浏览器登录授权
• Personal Access Token
• GitHub Desktop
• SSH 密钥

Windows 上首次执行：

git push origin main

通常会弹出浏览器登录窗口，登录 GitHub 并授权即可。

问题五：git pull 出现冲突

如果本地和 GitHub 同时修改了同一部分代码，可能出现：

CONFLICT

对于初学者，比较稳妥的方式是先备份本地 index.html，然后执行：

git fetch origin
git reset --hard origin/main

再将备份中的修改重新复制回来。

注意：

git reset --hard

会丢弃本地未提交修改，执行前必须备份。

问题六：提示当前目录不是 Git 仓库

如果执行：

git status

提示：

fatal: not a git repository

说明当前目录中没有 .git 文件夹。

先确认路径：

cd D:\Desktop\myweb

再执行：

dir -Force

检查是否存在：

.git

如果没有，重新克隆仓库：

cd D:\Desktop
git clone https://github.com/exampleuser/exampleuser.github.io.git myweb

问题七：提交时显示没有变化

如果执行：

git commit -m "update homepage"

提示：

nothing to commit, working tree clean

说明 Git 没有检测到文件变化。

可能原因：

• 修改后没有保存
• 修改的是另一个目录中的文件
• 修改内容与原文件相同
• 当前 PowerShell 不在正确目录

可以执行：

pwd

检查当前路径。

---

十八、推荐使用 Visual Studio Code

进入网站目录：

cd D:\Desktop\myweb

如果已经安装 VS Code，可以执行：

code .

这会直接用 VS Code 打开整个网站目录。

修改完成后按：

Ctrl + S

保存。

然后回到 PowerShell：

git add .
git commit -m "update homepage"
git push origin main

---

十九、推荐的目录结构

网站文件较多时，推荐使用以下结构：

myweb
├─ index.html
├─ css
│  └─ style.css
├─ images
│  ├─ avatar.jpg
│  └─ background.png
├─ files
│  └─ resume.pdf
└─ README.md

此时 HTML 中头像路径写为：

<img src="images/avatar.jpg" alt="个人照片">

如果 CSS 写在 index.html 内，背景路径可以写为：

background-image: url("images/background.png");

如果 CSS 位于 css/style.css，背景路径可以写为：

background-image: url("../images/background.png");

---

二十、添加简历下载链接

可以将简历文件放入：

files/resume.pdf

然后在网页中添加：

<a href="files/resume.pdf" target="_blank">
  查看个人简历
</a>

也可以使用下载属性：

<a href="files/resume.pdf" download>
  下载个人简历
</a>

---

二十一、添加论文 DOI 或外部链接

可以写成：

<a
  href="https://doi.org/10.xxxx/xxxxx"
  target="_blank"
  rel="noopener noreferrer"
>
  10.xxxx/xxxxx
</a>

其中：

target="_blank"

表示在新标签页中打开。

rel="noopener noreferrer"

用于提高外部链接打开时的安全性。

---

二十二、完整操作示例

假设现在需要修改项目列表。

首先打开 PowerShell：

cd D:\Desktop\myweb

同步最新版本：

git pull origin main

使用 VS Code 打开：

code .

修改 index.html，保存后回到 PowerShell：

git status

添加修改：

git add .

提交：

git commit -m "update project list"

推送：

git push origin main

等待 GitHub Pages 部署，然后访问：

https://exampleuser.github.io

强制刷新：

Ctrl + F5

---

二十三、一键更新脚本

可以在网站目录中创建：

update.ps1

内容如下：

Write-Host "正在同步远程仓库..."
git pull origin main

Write-Host "正在添加修改..."
git add .

$message = Read-Host "请输入本次提交说明"

if ([string]::IsNullOrWhiteSpace($message)) {
    $message = "update homepage"
}

Write-Host "正在提交修改..."
git commit -m "$message"

Write-Host "正在推送到 GitHub..."
git push origin main

Write-Host "操作完成。"

以后修改网页后，在 PowerShell 中执行：

cd D:\Desktop\myweb
.\update.ps1

如果提示 PowerShell 禁止运行脚本，可以继续使用前面的手动命令。

---

二十四、命令速查

首次克隆

cd D:\Desktop
git clone https://github.com/exampleuser/exampleuser.github.io.git myweb
cd myweb

检查仓库

git status
git remote -v

每次修改前

git pull origin main

修改完成后

git add .
git commit -m "update homepage"
git push origin main

修改远程地址

git remote set-url origin https://github.com/exampleuser/exampleuser.github.io.git

查看网站

https://exampleuser.github.io

强制刷新

Ctrl + F5

---

总结

使用 GitHub Pages 搭建个人主页，核心流程只有三步：

准备 index.html
→ 上传到 用户名.github.io 仓库
→ 开启 GitHub Pages

后续维护网站时，PowerShell 中主要使用以下命令：

git pull origin main
git add .
git commit -m "update homepage"
git push origin main

掌握这套流程后，就可以长期维护自己的：

• 个人主页
• 学术主页
• 项目展示页
• 课程主页
• 求职简历主页
• 个人作品集

整个托管过程免费，网页内容也可以随时更新。