如何用Github Pages搭建自己的个人网站？

2 minute read

大家好，这是一份面向小白的 GitHub Pages 个人网站搭建指南。本指南将尽量避免复杂的专业术语，并提供两种主流的搭建方法，你可以根据自己的情况选择。

申明：dz本人并非xk大佬，所以仅会最简单的配置，所以这篇指南比较适合新手来练练。毕竟拥有个人网站是一个很酷的事😎 另外，可能需要你有一定（极少量）的github基础。

什么是 GitHub Pages？

简单来说，GitHub Pages 是全球最大的代码托管平台 GitHub 提供的一项免费服务。它允许你将代码仓库（Repository）直接变成一个静态网站，供任何人访问。

准备工作

在开始之前，你只需要准备两样东西：

科学上网：科学上网是一切的起点。
一个 GitHub 账号：如果没有，请前往 github.com 注册一个。记住你选择的用户名，它将成为你网站地址的一部分。
一台能上网的电脑：本指南将主要使用网页浏览器完成所有操作。

第一步：创建网站仓库（方法C除外，请先浏览一下方法C！）

这个仓库很特殊，它的名字必须遵循固定格式，这样 GitHub 才能识别并将其作为你的个人主页网站。

登录你的 GitHub 账号。
点击页面右上角的 + 号，在下拉菜单中选择 New repository (新建仓库)。
关键步骤：在 Repository name (仓库名称) 的输入框中，必须严格按照 你的用户名.github.io 的格式来填写。
- 例如，如果你的 GitHub 用户名是 octocat，那么你的仓库名就必须是 octocat.github.io。
- 请务必将 octocat 替换成你自己的用户名！
设为公开：确保仓库是 Public (公开) 的。私有仓库无法免费开启 Pages 服务。
添加初始化文件：勾选 Add a README file。这是一个好习惯，这个文件未来可以用来写网站的介绍。
点击 Create repository (创建仓库) 按钮。

恭喜！你的网站“空间”已经准备好了。接下来，我们要往里面添加内容。

第二步：选择一种方式添加网站内容

这里提供三种方法，你可以按需选择。

方法 A：直接创建一个网页（如果你以后想深入学习，并拥有一个非常个性化的网站，则推荐这个方法）

这种方法让你快速拥有一个“毛坯房”，你可以后续再学习 HTML 和 CSS 来装修它。

进入你刚才创建的 你的用户名.github.io 仓库页面。
点击 Add file (添加文件) -> Create new file (创建新文件)。
在文件命名框中，输入 index.html。index.html 是网站首页的默认文件名，必须是这个名字。

在下方的文件编辑区，复制并粘贴以下最简单的 HTML 代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网站</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>欢迎来到我的第一个个人网站。这里是使用 GitHub Pages 搭建的。</p>
</body>
</html>

你可以将 我的个人网站、你好，世界！ 等文字修改成你喜欢的内容。
页面拉到最下方，点击 Commit new file (提交新文件) 按钮。

完成！ 现在，等待 1-2 分钟，然后在浏览器中访问 https://你的用户名.github.io，就能看到你的第一个网页了！

方法 B：【推荐】使用现成主题模板 (如果你只是想拥有一个网站来进行分享，并不想深入研究或追求太多的个性化，则推荐这个方法)

这种方法让你直接套用一个设计好的模板来快速生成一个漂亮的博客或展示型网站。你只需要用简单的 Markdown 语法写文章即可。

进入你创建的 你的用户名.github.io 仓库页面。
点击仓库主页右侧菜单中的 Settings (设置)。
在左侧菜单中，选择 Pages。
在 “Build and deployment” 部分，你会看到 Source (源) 的选项，确保它被设置为 Deploy from a branch (从分支部署)。
向下拉，找到 Theme Chooser (主题选择器) 部分，点击 Choose a theme (选择一个主题)。
GitHub 会展示多个预设主题，比如 Cayman, Minimal, Dinky 等。你可以点击预览，选择一个你喜欢的风格。选好后，点击 Select theme (选择主题)。
点击选择主题后，GitHub 会自动在你的仓库里创建一个名为 _config.yml 的文件。这个文件是网站的“配置文件”。同时，它会用主题的样式来渲染你仓库里的 README.md 文件。

接下来，如何个性化你的网站？

修改网站标题和描述：
- 回到你的仓库主页，你会看到一个 _config.yml 文件，点击进入并编辑它。
- 你可能会看到 theme: jekyll-theme-minimal (这取决于你选的主题) 和 title: 你的用户名.github.io 以及 description: ...。
- 你可以把 title 和 description 的值修改成你想要的网站名称和简介。例如：
```
title: 张三的博客
description: 一个记录学习和生活点滴的地方
```
- 修改后，记得拉到页面底部点击 Commit changes (提交更改)。
修改网站主页内容：
- 回到仓库主页，找到并点击 README.md 文件进行编辑。
- 你在这里写下的所有内容，都会按照 Markdown 格式显示在你的网站主页上。你可以用它来写一个详细的自我介绍。
- 简单的 Markdown 语法：
  - # 一级标题 (标题前加#号)
  - **加粗文字**
  - [链接文字](https://www.google.com)
  - - 列表项1
  - - 列表项2
- 修改完成后，同样提交更改。

访问你的网站：

和方法A一样，在浏览器中访问 https://你的用户名.github.io。每次你提交更改 (Commit) 后，GitHub 都需要 1-2 分钟的时间来重新生成你的网站，请耐心等待刷新。

方法 C：【最高效】直接 Fork 一个完整的网站模板

这种方法是目前最流行、也是成果最显著的一种。你可以直接将一个设计精美的、功能完善的成品网站模板完整地复制（Fork）到自己的账号下，然后只需要修改里面的个人信息和文章内容，就能拥有一个非常棒的个人网站。但是你需要耐心阅读模板作者的说明文档（通常是README.md文件）。dz我就是采用的这种方法

寻找一个心仪的模板

GitHub 上有海量的开源 Pages 模板。你可以在 GitHub 通过搜索关键词找到它们：

这里推荐几个在初学者中非常受欢迎且文档完善的模板，你可以先看看它们的预览效果：

Minimal Mistakes: 功能极其强大，高度可定制，适合博客和作品集。（预览和介绍）
Academic Pages: 主要面向学者和研究人员，用于展示论文、项目和简历。（预览和介绍）
Beautiful Jekyll: 一个简洁漂亮的博客模板。（预览和介绍）

Fork 模板仓库到你的账号

我们以一个简洁的模板为例。当你找到喜欢的模板后：进入该模板的 GitHub 仓库页面->点击页面右上角的 Fork 按钮->在弹出的页面中，直接点击 Create fork。这会把整个项目完整地复制一份到你的 GitHub 账号下。

【关键】 重命名你的新仓库

这是本方法中最重要的一步，目的是为了激活 GitHub Pages 的主页服务。

Fork 操作完成后，页面会自动跳转到你自己的账号下的同名仓库（例如 你的用户名/beautiful-jekyll）。
点击这个新仓库的 Settings (设置) 标签。
第一个设置项就是 Repository name (仓库名称)。请务必、必须 将其修改为 你的用户名.github.io。
注意：如果你的账号下已经存在一个名为 你的用户名.github.io 的仓库（比如你之前尝试过方法A或B），你需要先将旧的仓库删除或改名，才能使用这个名字。
点击 Rename (重命名) 按钮。

修改核心配置文件 _config.yml

现在，这个网站在名义上已经是你的了，但里面的内容还是模板作者的。我们需要修改它的“灵魂”——配置文件。

回到你刚刚重命名好的 你的用户名.github.io 仓库主页。
在文件列表中找到 _config.yml 文件，点击进入并编辑它。

仔细阅读并修改。每个模板的配置文件都不一样，但通常包含以下内容，你需要根据自己的情况进行修改：

  # 基础信息
  title: 张三的个人主页                  # 网站标题
  author: 张三                          # 你的名字
  email: zhangsan@example.com           # 你的邮箱
  description: >-                       # 网站描述，会显示在搜索引擎结果中
    这是一个通过 Fork 模板搭建的个人网站，
    用于记录学习和生活。

  # 社交链接
  twitter_username: your_twitter_id     # 你的推特ID
  github_username: your_github_id       # 你的GitHub ID
  linkedin_username: your_linkedin_id   # 你的领英ID

  # 网址配置 (非常重要!)
  # 对于你的个人主页(username.github.io)，下面两项通常这样配置：
  url: "https://你的用户名.github.io"     # 网站的完整地址，把“你的用户名”换成你自己的
  baseurl: ""                         # 留空即可

强烈建议：花几分钟时间阅读一下仓库里的 README.md 文件。原作者通常会在这里详细说明每个配置项的作用和修改方法。
修改完成后，拉到页面底部，点击 Commit changes (提交更改)。

查看你的网站

和前两种方法一样，在你提交了更改后，GitHub Pages 需要 1-2 分钟来重新构建你的网站。

之后，在浏览器中访问 https://你的用户名.github.io，你就能看到一个焕然一新、功能完善、属于你自己的个人网站了！后续你只需要按照模板的说明，在 _posts 文件夹里写文章，或者修改 about.md 等页面文件，就可以不断丰富你的网站内容。

常见问题 (FAQ)

1. 为什么我的网站打不开，显示 404 Not Found？

检查仓库名称：确保你的仓库名严格为 你的用户名.github.io，一个字母都不能错。
检查主页文件：如果你使用方法A，请确保你的主页文件名为 index.html。
等待时间：首次创建或每次更新后，网站都需要一点时间部署，通常是1-2分钟，有时可能更长。
检查部署状态：在仓库的 Settings -> Pages 页面，可以看到你网站的部署状态。如果显示绿色对勾并提示 “Your site is live at…“，说明部署成功。如果是黄色或红色，则说明配置有误，可以根据提示进行修改。

2. 如何发布新文章？（如果使用方法B或C） 在仓库里创建一个名为 _posts 的文件夹。然后在这个文件夹里创建新文件，文件名必须遵循 年-月-日-文章标题.md 的格式，例如 2025-06-27-my-first-post.md。用 Markdown 语法在里面写文章内容即可。

3. 我可以绑定自己的域名吗？ 完全可以。这是一个进阶操作。你需要在你的域名提供商（如阿里云、GoDaddy）那里设置 CNAME 解析，然后在 GitHub Pages 的设置中添加你的自定义域名。具体可以参考 GitHub 官方文档。

4. 我想进一步美化网站怎么办？ 这就需要学习一些前端基础知识了，主要是 HTML（负责网页结构）和 CSS（负责网页样式）。网上有非常多免费的入门教程，例如菜鸟教程、W3Schools 等。

建议

过程中你一定会遇到很多的困难，多问问AI！最后成功时你一定会很有成就感的🤓
可以参考一些资料（不如问AI）

官方核心文档 (最权威)

当你遇到棘手的问题时，官方文档永远是第一选择。虽然可能有些技术化，但信息最准确。

GitHub Pages 官方文档
- 链接: https://docs.github.com/zh/pages
- 说明: GitHub 官方的中文文档，涵盖了从创建到配置自定义域名、问题排查等所有方面的内容。是所有资料中最核心的。
Jekyll 官方文档
- 链接: https://jekyllrb.com/docs/
- 说明: GitHub Pages 在后台使用 Jekyll 来生成静态网站。如果你使用了方法B或C，并想深入了解文章、布局、数据文件等高级用法，Jekyll 文档是你的必读之选。

Markdown 语法学习（必需）

无论是写文章还是修改页面，Markdown 都是你最常使用的工具。它非常简单，花10分钟就能学会。

Markdown 官方中文入门指南
- 链接: https://www.markdownguide.org/basic-syntax/
- 说明: 官方的 Markdown 指南，清晰地展示了所有基础语法，并提供实时预览。
菜鸟教程 - Markdown 教程
- 链接: https://www.runoob.com/markdown/md-tutorial.html
- 说明: 中文的综合性教程，内容全面，排版清晰，非常适合国内用户快速上手。

前端基础入门 (HTML & CSS)（可选）

如果你想对网站的样式和结构进行更深度的定制，学习一些前端基础知识是必经之路。

MDN Web Docs (Mozilla 开发者网络)
- 链接: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web
- 说明: 这是学习 Web 技术的“黄金标准”，内容权威、严谨且有完整的中文翻译。从这里开始学习 HTML 和 CSS 是非常好的选择。
freeCodeCamp (免费编程训练营)
- 链接: https://www.freecodecamp.org/learn/2022/responsive-web-design/
- 说明: 一个完全免费的互动式学习平台。它的“响应式网页设计”课程通过边学边练的方式，让你从零开始掌握 HTML 和 CSS，非常有趣。

Git 与 GitHub 入门（可选）

虽然本指南主要使用网页操作，但学会使用 Git 在本地电脑上管理网站会极大提高效率。

GitHub Desktop
- 链接: https://desktop.github.com/
- 说明: 如果你对命令行感到恐惧，GitHub Desktop 是一个完美的图形化工具。它让你通过点选按钮就能完成代码的克隆(Clone)、提交(Commit)、推送(Push)等操作。
Pro Git (中文版)
- 链接: https://git-scm.com/book/zh/v2
- 说明: 最经典的 Git 学习书籍，有免费的在线中文版。内容非常深入，适合想彻底搞懂 Git 工作原理的同学。
猴子都能懂的 Git 入门
- 链接: https://backlog.com/git-tutorial/cn/
- 说明: 一个非常有趣的图文教程网站，用猴子的比喻来解释 Git 的各种概念，对初学者极其友好。

Share on

X Facebook LinkedIn Bluesky

Qiyu Chen