0成本搭建个人网站！GitHub Pages保姆级教程，让你10分钟上线个人专属空间
不用买服务器，不用懂复杂的域名解析，更不用花一分钱——GitHub Pages就能帮你实现！
作为GitHub官方提供的静态网站托管服务，它不仅免费稳定，还支持自定义域名和多种美化主题，零基础小白跟着步骤走，10分钟就能搞定上线。今天这篇保姆级教程，从准备工作到实操步骤，再到避坑指南，全给你整理好了！
先搞懂：GitHub Pages到底是什么？
简单说，GitHub Pages是一个“免费的网站托管工具”，能直接把你存放在GitHub仓库里的HTML、CSS、JS等静态文件，变成可公开访问的网站。
核心优势戳中刚需：
✅ 完全免费：无服务器费用、无托管费用，终身可用
✅ 操作简单：不用写复杂代码，可视化操作就能完成部署
✅ 稳定可靠：依托GitHub全球服务器，访问速度有保障，还自动配置SSL证书（https加密）
✅ 用途广泛：个人博客、作品集、简历展示、项目文档都能放
准备工作：2件事搞定，缺一不可
开始操作前，先把基础准备好，都是零门槛的步骤：
1. 注册并登录GitHub账号
GitHub是全球最大的代码托管平台，注册完全免费：
打开浏览器访问 github.com，点击右上角“Sign up”
输入邮箱、设置用户名（重点！后续网站地址会用到，建议简洁好记）、密码，完成邮箱验证即可
2. 准备网站文件（小白可直接抄作业）
需要准备HTML、CSS、JS等静态文件，要是还没做，教你1分钟搞个测试页：
打开电脑自带的记事本
复制粘贴下方代码：
<html> <head> <meta charset="UTF-8"> <title>我的第一个GitHub Pages网站</title> </head> <body> <h1>恭喜！网站部署成功啦！</h1> <p>用GitHub Pages搭网站真的超简单～</p> </body> </html> |
最后点击「文件」-「另存为」，文件名改成 index.html，保存类型选「所有文件」（避免存成.txt文本），随便存个好找到的文件夹就行。
核心步骤：5步上线你的网站（多图预警！）
这部分是重点，每一步都配了操作指引，跟着点就行，不用慌！
Step1：创建专属仓库（命名是关键！）
仓库是用来存放网站文件的地方，命名必须严格遵守规则，否则网站打不开！
登录GitHub后，点击右上角「+」号，选择「New repository」（新建仓库）
按要求填写信息：
Repository name（仓库名）：必须是以「.github.io」结尾，比如你想要介绍自己，就填introduction.github.io（字母、符号都不能错，包括小数点），推荐是直接以个人用户名加「.github.io」，这样你的访问地址就很简洁直接是「https://你的用户名.github.io」，如果自定义名称，比如「introduction.github.io」，那么访问地址就得是「https://你的用户名.github.io/introduction.github.io」
Description（描述）：可选，比如写“我的个人介绍网站”
Visibility（可见性）：务必选「Public」（免费版GitHub仅支持公开仓库部署）
·其他默认即可，最后点击「Create repository」创建
📸 操作截图参考：
Step2：上传网站文件（拖拽就能搞定）
仓库建好后，把刚才准备的index.html文件传上去：
进入新建的仓库，点击右上角「Add file」，选择「Upload files」
把index.html文件（如果有CSS、图片文件夹，要一起拖）直接拖到浏览器的上传区域，保持文件目录结构不变（否则样式或图片可能失效）
拉到页面底部，在「Commit changes」框里可写个备注（比如“第一次上传网站文件”），然后点击「Commit changes」完成上传
📸 操作截图参考：
Step3：开启GitHub Pages部署（关键一步！）
文件上传完还不能访问，需要开启部署功能：
在仓库页面顶部，点击「Settings」（设置）——如果没看到，点顶部的下拉菜单就能找到
在左侧菜单栏找到并点击「Pages」（拉到下方“Code and automation”区域就能看到）
在「Build and deployment」（构建和部署）区域设置：
Source（来源）：选「Deploy from a branch」
Branch（分支）：选仓库默认的主分支（一般是main或master），Folder（文件夹）选「/root」（根目录）
点击「Save」保存，然后耐心等1-2分钟
📸 操作截图参考：
✅ 成功标志：刷新页面后，看到绿色提示「Your site is published at https://你的用户名.github.io」，就说明部署成功了！
Step4：访问你的网站
直接点击提示里的「visit website」，或者复制链接「https://你的用户名.github.io」到浏览器，就能打开你的专属网站啦！
⚠️ 小提醒：如果打不开，大概率是缓存问题，清除浏览器缓存再试，或者再多等几分钟（GitHub同步需要时间）。
Step5：后续更新内容（超省心）
想修改网站内容的话，不用重新建仓库：
修改本地的index.html文件（或其他文件）
重复Step2的上传步骤，把修改后的文件重新上传，GitHub会自动覆盖原有文件并重新部署
等待1-2分钟后刷新网站，就能看到更新后的内容啦！
进阶技巧：让你的网站更有格调
基础网站上线后，还能做这些优化，瞬间提升质感：
1. 一键换主题（不用写代码）
GitHub Pages支持Jekyll主题，直接选就能用：
进入仓库「Settings」-「Pages」
找到「Theme chooser」（主题选择器），点击「Choose a theme」
浏览喜欢的主题，点击「Select theme」确认，GitHub会自动应用并部署
📌 推荐主题：Minimal Mistakes（简约大气）、Beautiful Jekyll（新手友好）、Al-Folio（学术/作品集专用），都是GitHub上热门的免费主题。
2. 自定义域名（告别.github.io后缀）
想让网站地址更专业（比如www.yourname.com），可以自定义域名：
先在域名服务商（比如阿里云、腾讯云）购买一个域名
在GitHub仓库根目录新建一个名为「CNAME」的文件，里面只写你的域名（比如www.xiaoming.com）
在域名服务商后台添加CNAME记录，指向你的GitHub Pages地址（你的用户名.github.io）
小白避坑指南：3个最容易踩的坑
很多人部署失败，都是忽略了这些小细节，记好就能避开：
❌ 仓库名错误：必须是以「.github.io」，不能有空格、错字，也不能少写.io后缀
❌ 文件位置错：index.html必须放在仓库根目录，不能嵌套在文件夹里，否则会出现404错误
❌ 只支持静态网站：GitHub Pages不能部署带后端的动态网站，只能放HTML、CSS、JS等静态文件
最后：你的专属网站，还能这么用
上线后别浪费这个免费空间，这些用法超实用：
👨💻 程序员：放项目文档、技术博客、作品集，求职时给面试官发链接，比简历更直观
🎨 设计师/创作者：展示作品合集，方便客户查看
📝 学生：做个人简历网站，记录学习心得，提升求职竞争力
🌟 兴趣爱好者：分享追星、手账、旅行攻略等内容，打造专属兴趣空间
看到这里，是不是觉得搭个人网站超简单？其实GitHub Pages的核心就是“简单、免费、稳定”，不用被“代码”“部署”这些词吓到，跟着步骤一步步点，10分钟就能拥有自己的专属网站。
赶紧动手试试吧！如果操作中遇到问题，欢迎在评论区留言～ 成功上线的小伙伴，也可以把你的网站链接分享在评论区，互相参观呀！
🔖 收藏本文，下次修改网站时直接对照步骤来！
❤️ 觉得有用的话，别忘了点赞+在看+转发给需要的朋友～
