1. 为什么你需要一个GitHub Pages站点？
如果你是一名开发者，或者正在学习编程，那么你大概率听说过GitHub。它不仅仅是一个存放代码的仓库，更是一个全球开发者的社交名片。但很多人不知道，GitHub还免费提供了一个极其强大的功能——GitHub Pages。简单来说，它允许你将仓库里的特定内容（比如HTML、CSS、JavaScript文件）直接发布成一个公开的网站，并且拥有一个yourusername.github.io的专属域名。
这听起来可能有点技术门槛，但实际用起来，它比租用虚拟主机、配置服务器要简单得多，而且是完全免费的。你不需要处理SSL证书（它自带HTTPS），不需要担心服务器宕机（由GitHub托管），也不需要为流量付费。对于个人来说，它的核心价值在于展示和连接。
想想看，当你在求职时，面试官或HR除了看一份PDF简历，还能看到一个由你亲手搭建、设计、维护的个人网站，上面清晰地陈列着你的项目、技术博客、作品集，甚至是一份交互式的在线简历。这种专业度和主动性，是任何一份静态简历都无法比拟的。它就是你个人品牌的数字基地。无论是分享一个开源项目、撰写技术文档、记录学习笔记，还是单纯想有一个地方存放自己的创作，GitHub Pages都是一个零成本、高自由度的绝佳起点。接下来，我会带你从零开始，一步步搭建属于你自己的这个“数字基地”。
2. 搭建前的核心概念与准备工作
在动手敲代码之前，花几分钟理解几个核心概念，能让你后面的操作事半功倍，少走很多弯路。
2.1 GitHub Pages的两种主要模式
GitHub Pages主要支持两种发布模式，你需要根据你的需求选择其一：
用户/组织站点：这是你的“主站”。它的仓库名必须是
<你的用户名>.github.io。例如，我的GitHub用户名是zhangsan，那么我的用户站点仓库就必须命名为zhangsan.github.io。这个站点将直接通过https://zhangsan.github.io访问。你在这个仓库的main分支（或master分支）根目录下推送的任何网页文件，都会直接成为你网站的内容。这是搭建个人博客或作品集首页最常用的方式。项目站点：这是为某个特定项目创建的独立页面。仓库名可以是任何名字，比如
my-awesome-project。你需要在这个仓库的设置中，启用GitHub Pages功能，并指定一个分支（通常是gh-pages分支或main分支下的/docs文件夹）作为源。这个站点的访问地址会是https://<你的用户名>.github.io/<仓库名>。它非常适合用来为开源项目创建独立的文档网站或Demo演示页。
注意：一个GitHub账户只能有一个用户/组织站点，但可以有无数个项目站点。对于初学者，我强烈建议从用户站点开始，因为它最简单，也最能代表你个人。
2.2 你必须准备好的三样东西
一个GitHub账号：这是前提。如果你还没有，去 github.com 免费注册一个。用户名尽量取一个专业、易记的，因为它会成为你网站域名的一部分。
本地开发环境：你需要在你的电脑上安装Git，这是与GitHub通信的工具。同时，一个趁手的代码编辑器也必不可少，比如Visual Studio Code (VSCode)，它轻量、免费且对前端开发非常友好。
基础的Web知识：你不需要是前端专家，但至少要对HTML、CSS和JavaScript有最基本的了解，知道它们分别是干什么的。如果完全零基础，建议先花一两个小时学习一下HTML标签（如
<h1>,<p>,<a>）和CSS选择器的概念。这能让你在自定义主题时更有底气。
2.3 工具安装与环境配置
让我们先把“战场”准备好。
安装Git：
- Windows：前往 git-scm.com 下载安装程序，一路“Next”即可。安装完成后，在任意文件夹右键，应该能看到“Git Bash Here”的选项。
- macOS：通常系统已自带，打开“终端”(Terminal)，输入
git --version检查。如果没有，安装Xcode Command Line Tools（在终端输入xcode-select --install）即可。 - Linux：使用包管理器安装，例如Ubuntu/Debian系：
sudo apt install git。
安装后，打开终端（Windows用Git Bash或CMD/PowerShell），配置你的用户名和邮箱，这信息会记录在你的每次提交中：
git config --global user.name "你的GitHub用户名" git config --global user.email "你的GitHub注册邮箱"安装代码编辑器：推荐直接下载安装 Visual Studio Code 。安装后，你可以安装一些提高效率的插件，比如“Live Server”（用于本地实时预览网页）、“GitLens”（增强Git功能）等。
3. 从零到一：创建并发布你的第一个页面
理论准备就绪，现在开始实战。我们将创建一个最简单的用户站点。
3.1 创建专属仓库
- 登录你的GitHub账号。
- 点击页面右上角的 “+” 图标，选择 “New repository”。
- 在 “Repository name” 输入框中，严格输入
<你的用户名>.github.io。例如，我的用户名是coder-li，我就输入coder-li.github.io。这一点至关重要，大小写也必须一致。 - 填写描述（可选），比如 “My personal blog and portfolio”。
- 选择仓库为Public（公开，私有仓库不支持GitHub Pages）。
- 勾选 “Initialize this repository with a README”，这会在仓库里创建一个初始的
README.md文件，方便我们后续操作。 - 点击 “Create repository”。
至此，你的网站“地基”已经打好了。这个仓库的main分支，就是你的网站根目录。
3.2 编写你的第一个HTML文件
现在，我们需要给这个网站添加内容。最直接的方式就是创建一个index.html文件，它是网站的默认首页。
- 在你的电脑上找一个合适的位置，新建一个文件夹，例如
my-github-page。 - 用VSCode打开这个文件夹。
- 在VSCode的资源管理器侧边栏，右键点击文件夹空白处，选择“新建文件”，命名为
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> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; line-height: 1.6; color: #333; background-color: #f9f9f9; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } .intro { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } a { color: #2980b9; text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <h1>你好，世界！</h1> <div class="intro"> <p>这是我的第一个GitHub Pages网站。</p> <p>我正在学习如何使用GitHub Pages来展示我的项目和想法。</p> <p>这是一个简单的开始，未来我会在这里添加我的<a href="#">项目作品</a>、<a href="#">技术博客</a>和<a href="#">个人简历</a>。</p> <p>欢迎常来看看！</p> </div> <p><small>最后更新于：<span id="current-date"></span></small></p> <script> // 一个简单的JavaScript，显示当前日期 document.getElementById('current-date').textContent = new Date().toLocaleDateString('zh-CN'); </script> </body> </html>这段代码包含了一个完整网页的基本结构：定义了字符集和视口（对移动端友好），内嵌了简单的CSS样式让页面看起来更舒服，以及一段JavaScript来动态显示日期。你可以自由修改其中的文字、样式和颜色。
3.3 使用Git将代码推送到GitHub
现在，我们需要把本地的index.html文件“同步”到刚才在GitHub上创建的仓库里。
初始化本地Git仓库：在VSCode中打开终端（Terminal -> New Terminal）。确保终端路径在你的项目文件夹（
my-github-page）下。输入以下命令：git init这会在当前文件夹创建一个本地Git仓库。
将文件添加到暂存区：告诉Git哪些文件需要被管理。
git add .这里的
.代表当前目录下的所有文件。如果只想添加特定文件，可以用git add index.html。提交更改：为这次添加创建一个“快照”，并附上说明。
git commit -m "Initial commit: add first index.html page"-m后面的信息是对本次提交的描述，请尽量写清楚。连接到远程GitHub仓库：将本地仓库和你GitHub上的在线仓库关联起来。你需要用到之前创建的仓库地址。
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git注意：将命令中的“你的用户名”替换成你的实际GitHub用户名。
推送代码：将本地的提交推送到GitHub远程仓库。
git branch -M main # 确保本地分支名是main（GitHub默认） git push -u origin main第一次推送需要输入你的GitHub用户名和密码（或Personal Access Token）。如果启用了双重验证，你需要使用Token作为密码。
3.4 访问你的网站并理解发布流程
推送完成后，稍等1-2分钟（GitHub需要一点时间构建和发布），然后在浏览器中访问https://你的用户名.github.io。
你应该能看到刚刚编写的页面了！恭喜你，你的个人网站已经上线了。
这里发生了什么？GitHub检测到你推送到你的用户名.github.io仓库main分支的代码，自动触发了Pages构建流程。它会将你的HTML、CSS、JS等静态文件托管在它的服务器上，并通过你专属的域名提供访问。之后，你每次向这个仓库的main分支推送新的更改，网站都会自动更新。
4. 进阶之路：使用静态网站生成器打造专业博客
手动编写每一个HTML页面对于个人博客来说效率太低了。这时，静态网站生成器（Static Site Generator, SSG）就成了我们的利器。它允许你用更高效的方式（比如写Markdown）来创作内容，然后自动生成完整的、优化过的静态网站。Jekyll是GitHub Pages官方原生支持且集成度最高的SSG。
4.1 为什么选择Jekyll？
- 无缝集成：GitHub Pages内置Jekyll支持。你只需要将Jekyll站点的源代码推送到仓库，GitHub会自动运行
jekyll build命令为你生成网站，无需任何额外配置。 - 简单易用：内容用Markdown书写，结构清晰。主题丰富，有大量现成的主题可以直接使用或作为起点。
- 博客功能原生：Jekyll天生为博客设计，轻松管理文章、分类、标签、分页等。
4.2 快速创建一个Jekyll站点
你不需要在本地安装Jekyll环境也能开始（虽然本地安装便于调试）。最简单的方法是直接Fork一个现成的Jekyll主题仓库。
- 访问一个流行的Jekyll主题网站，比如 jekyllthemes.org 。找一个你喜欢的主题，例如非常经典的 “Minimal Mistakes” 或 “TeXt”。
- 进入该主题的GitHub仓库页面（例如 Minimal Mistakes:
https://github.com/mmistakes/minimal-mistakes）。 - 点击右上角的 “Fork” 按钮，将这个仓库复制到你自己的GitHub账号下。
- Fork完成后，进入你账号下这个新仓库的 “Settings” -> “Pages”。确保发布源是
main分支下的/(root)。稍等片刻，你的新网站就基于这个主题上线了。 - 关键一步：为了将其变成你的个人站点，你需要将这个Fork来的仓库重命名为
<你的用户名>.github.io。在仓库的 “Settings” -> “General” -> “Repository name” 处修改。改名后，你的网站地址就会变成https://你的用户名.github.io。
4.3 深度定制你的Jekyll博客
Fork并改名后，你就拥有了一个功能完整的博客框架。接下来是将其变成你自己的。
1. 修改核心配置文件_config.yml：这是Jekyll站点的大脑。用VSCode在线编辑或克隆到本地后编辑这个文件。你需要重点关注以下配置：
title: 你的网站标题 email: 你的公开邮箱 description: >- # 网站描述，会显示在搜索引擎结果中 这里写一段关于你和你的网站的简介。 baseurl: "" # 对于用户站点，通常为空 url: "https://你的用户名.github.io" # 你的网站完整地址 # 社交链接 twitter_username: 你的Twitter github_username: 你的GitHub # 构建设置 theme: minimal-mistakes-jekyll # 主题名称，根据你Fork的主题而定 plugins: - jekyll-feed - jekyll-seo-tag # 强烈建议启用，优化SEO # 评论系统（如Disqus） disqus: shortname: your-disqus-shortname # 需要去Disqus注册获取修改后提交，网站会自动更新。
2. 撰写你的第一篇博客文章：在_posts目录下，新建一个Markdown文件。文件名格式必须为YYYY-MM-DD-文章标题.md，例如2023-10-27-welcome-to-jekyll.md。 文件开头需要有一段“Front Matter”来定义文章属性：
--- layout: single # 或 post，取决于主题 title: "欢迎来到我的博客" date: 2023-10-27 15:00:00 +0800 categories: [随笔] # 分类 tags: [开始] # 标签 --- 正文内容从这里开始，使用标准的Markdown语法。 你可以写代码块： ```python def hello(): print("Hello, GitHub Pages!")也可以插入图片：
将文件推送到仓库，它就会自动出现在你的博客列表里。 **3. 关于本地调试（可选但推荐）：** 如果你想在本地预览修改效果，避免频繁推送，可以在本地安装Jekyll环境。 - 确保已安装Ruby（Jekyll基于Ruby）。 - 在终端执行 `gem install bundler jekyll`。 - 克隆你的仓库到本地，进入目录，运行 `bundle install` 安装依赖。 - 运行 `bundle exec jekyll serve`，然后在浏览器打开 `http://localhost:4000` 即可实时预览。本地修改文件，页面会自动刷新。 ## 5. 内容规划与持续运营：让你的网站真正有价值 一个网站框架搭好了，但它还只是一个空壳。如何填充内容，让它为你代言，才是真正的挑战。 ### 5.1 规划核心板块 一个典型的个人开发者/技术爱好者站点，可以包含以下板块： - **首页 (Home)**：个人简介、最新动态、精选项目/文章展示。 - **关于 (About)**：详细的个人介绍，技能栈、经历、兴趣、联系方式。这里可以做得比简历更生动。 - **博客 (Blog)**：技术思考、学习笔记、项目复盘、行业见解的沉淀地。**坚持写作是提升最快的方式之一**。 - **项目 (Projects)**：清晰展示你的作品。每个项目应有：项目名、简短描述、技术栈、项目链接（GitHub）、在线Demo链接（如果可用）、关键亮点或解决的问题。 - **简历 (Resume/CV)**：可以提供PDF下载版，更鼓励设计一个**在线交互式简历**。利用HTML/CSS/JS，让简历可读性更强，甚至可以加入时间轴、技能雷达图等可视化元素。 - **其他**：如“演讲/分享”、“书单”、“工具箱”等，塑造更立体的个人形象。 ### 5.2 将GitHub Pages与你的工作流结合 - **项目文档**：为你重要的开源项目或课程大作业启用项目站点 (`gh-pages` 分支)，创建专业的文档。这能让你的项目显得更可靠、更易用。 - **技术简历的“活链接”**：在投递的纸质或PDF简历中，醒目地留下你的个人网站地址 (`https://yourname.github.io`)。面试官可以直观地看到你的代码风格、项目细节和思考过程。 - **学习记录仪**：用博客记录学习新技术（如“Spring Boot环境搭建与项目入门”、“Vue3项目实战踩坑记”）的过程。这不仅巩固知识，未来复习或帮助他人时也极其方便。从热搜词如“java简历”、“vue前端技术栈写简历上”、“嵌入式linux项目”可以看出，具体的、有深度的项目经验和技术总结，正是招聘方所看重的。 ### 5.3 一些实用的技巧与避坑指南 1. **自定义域名**：如果你有自己的域名（比如 `yourname.com`），可以在仓库的 “Settings” -> “Pages” -> “Custom domain” 中设置。设置后，GitHub会自动帮你配置CNAME记录，并强制启用HTTPS。这会让你的网站看起来更专业。 2. **处理404页面**：创建一个 `404.html` 文件放在根目录，可以自定义当用户访问不存在的页面时的提示，提升用户体验。 3. **图片等资源加载慢**：GitHub Pages的服务器在国外，国内访问图片多的大站可能较慢。可以考虑使用国内CDN（如七牛云、又拍云）存储图片，然后在网站中引用CDN链接。 4. **SEO优化**：确保每篇文章都有良好的标题、描述和关键词（通过Jekyll SEO Tag插件可以方便管理）。清晰的URL结构（由文章标题生成）也有助于搜索引擎收录。 5. **保持简洁与专注**：初期不要追求功能大而全。先保证核心板块（关于、博客、项目）内容优质、更新稳定。一个长期不更新、内容陈旧的网站，比没有网站更糟糕。 6. **版本控制你的网站**：你的整个网站源代码都在Git仓库里，这意味着你可以自由地回退到任何一个历史版本，尝试新的设计或功能而不怕搞砸。充分利用Git的分支功能进行开发和测试。 搭建GitHub Pages只是一个开始，它为你打开了一扇低成本展示自我、连接世界的大门。真正的价值在于你通过这个平台持续输出的内容、项目和思考。从今天起，把这个角落当作你的数字花园，定期耕耘，它终将回馈你意想不到的收获。
