用GitHub Pages免费搭建个人网站：从零到部署完整指南

如果你今年想做个人网站又不想一上来就买域名、租服务器、搞备案那我建议你认真看一下 GitHub Pages。它免费、稳定、支持自定义域名最关键的是很多人以为它只能托管技术文档实际上完全可以用它搭出一个有技术含量、又足够好看的个人主页。本文就围绕“用 GitHub 构建个人网站主页”这条主线讲清楚原理、两条可行路线一条零基础直接套模板一条手动写代码、部署流程和常见坑即使你之前没接触过 Git按步骤操作也能跑通。关于 2026 年再来看这件事我的判断是个人网站的需求并没有消失只是变轻了。老一辈个人站长需要服务器和数据库现在普通开发者、设计师、学生需要的只是一个低成本、可维护、能展示的线上门牌。GitHub Pages 恰好卡在这个需求点上它没有复杂的运维概念却能让你真实地体会到“代码推送—自动构建—线上生效”的完整流程。所以它不仅是免费托管也是一种很合适的工程入门实践。这篇文章会给你两条路。第一条偏轻松适合零基础读者直接从 GitHub 官方模板创建个人主页改改文字就能上线第二条偏硬核适合想做技术简历型页面的读者从零写一个 HTML/CSS 页面再通过 Git 推到 GitHub 仓库理解背后的部署机制。两条路都会落到同一个交付物一个你可以发给别人看的 https://用户名.github.io 链接。1. 为什么用 GitHub 构建个人网站先看清适用场景在开始动手之前先做一个判断。GitHub Pages 本质上是一个静态网站托管服务它只能托管 HTML、CSS、JavaScript 这类静态文件不能运行 Java、Python、PHP 这类后端程序。这意味着它适合展示不适合做复杂业务系统。适合用 GitHub Pages 的场景包括个人简历主页展示项目经历、技能、联系方式。团队或项目介绍页开源项目的 landing page。轻量博客通过 Jekyll 或 Hexo 生成静态博客。文档站点很多开源项目用 GitHub Pages 放文档。作品集设计师、摄影师、前端开发者的作品展示。不适合用 GitHub Pages 的场景包括需要用户注册登录的 Web 应用。需要服务器端数据库的网站。需要处理支付、敏感信息、文件上传的动态系统。对大陆访问速度有强要求的业务站点。这里有一个经常被忽略的细节GitHub Pages 提供的是免费托管但免费不代表无限制。官方对带宽和空间有软性限制建议仓库大小保持在 1GB 以下发布的站点也要控制体积。对个人主页来说完全够用但不要把它当网盘用。如果单从成本角度比较GitHub Pages 和传统服务器方案的差异非常明显对比项GitHub Pages传统云服务器费用免费公开仓库按年付费几十到几百元不等部署Git 推送即生效需要连接服务器上传代码运维无需维护服务器需要处理环境、安全、备份支持语言静态资源 Jekyll任意后端语言自定义域名支持需自行配置 DNS支持需自行配置 DNS备案不涉及使用国内服务器必须备案从这张表可以看到GitHub Pages 的优势不是“功能更强”而是“维护成本更低”。如果你现阶段只需要一个展示型主页它确实值得优先考虑。2. GitHub Pages 的核心概念与工作原理这里需要建立几个基础概念。第一静态网站。静态网站就是浏览器拿到什么文件就显示什么内容的网站没有服务器端的程序渲染。你写一个index.html访问者就能看到这个文件里的内容。GitHub Pages 托管的就是这类文件但它多做了一步支持 Jekyll 静态站点生成器可以把 Markdown 文件、模板、配置自动生成 HTML。第二仓库命名规则。这是新手最容易踩的第一个坑。如果你想发布的个人主页是https://用户名.github.io那么你创建的仓库名必须严格等于用户名.github.io注意这里的用户名是你 GitHub 账号的用户名不是显示昵称也不是邮箱。这个规则是硬性的用其他名字创建的仓库默认无法直接映射到你的个人主页域名。第三发布分支。GitHub Pages 在构建站点时会从你仓库的某个分支读取文件。默认情况下你可以选择从main分支发布也可以指定docs文件夹。2026 年的 GitHub 界面仍然保留这两个选项但最常见、最推荐的做法是使用独立分支发布或者直接在仓库根目录放网站文件。第四构建流程。当你把代码推送到 GitHub 仓库后GitHub Actions 会自动触发一个 Page build 任务。它会在云端跑一次 Jekyll 构建然后生成新的静态文件并部署。这个流程对用户是透明的但如果你构建失败GitHub 会向你绑定的邮箱发送通知。这里要特别说明 GitHub Pages 和普通文件夹托管的区别。如果你只是想在 GitHub 上放几个 HTML 文件然后通过链接访问其实有更简单的方式直接把文件 push 到仓库点击文件页面GitHub 会在页面上提供 Preview 功能。但这种方式只能临时预览不适合作为正式对外发布的网站。Pages 的价值在于它给了你一个稳定的、可以自定义域名、可以绑定 HTTPS 的正式发布通道。用一个类比来理解GitHub 仓库是源文件目录Pages 是构建产物目录两者之间的桥梁就是 Git 推送。你只需要维护源文件剩下的部署交给 GitHub。3. 前期准备注册、环境配置与仓库创建环境准备分两部分一个是 GitHub 账号一个是本地 Git 工具。如果你已经在用 GitHub可以直接跳到 3.2 小节。3.1 注册 GitHub 账号打开 GitHub 官网点击右上角的 Sign up。注册过程需要你设置用户名、邮箱、密码。这里的用户名要慎重因为它会出现在你的个人主页域名里也就是用户名.github.io。建议使用英文、数字、连字符不要起太随意的名称。注册完成后尽量完成邮箱验证。未验证邮箱的账号在创建仓库、推送代码、使用 Actions 时可能遇到限制。建议同时开启双重认证虽然多一步验证但能大幅降低账号被盗风险毕竟你以后会把个人主页和代码都放在这里。3.2 安装并配置 GitGit 是 GitHub 的本地协作工具负责把代码推送到远程仓库。不同操作系统的安装方式不同这里以通用场景说明。Windows 用户可以到 Git 官网下载安装包安装时一路默认即可。macOS 用户如果安装了 Homebrew可以用brew install gitLinux 用户使用对应发行版的包管理器比如 Ubuntu/Debiansudo apt update sudo apt install git安装完成后打开终端检查版本git --version能看到版本号说明安装成功。接下来需要配置用户信息这个步骤必须做否则后面的提交会报错git config --global user.name 你的GitHub用户名 git config --global user.email 你注册GitHub时用的邮箱注意这里的邮箱建议和 GitHub 账号邮箱保持一致这样你的提交记录才能正确关联到账号。配置完成后可以用git config --list检查。3.3 验证本地环境为了简化后续流程可以提前验证 Git 能正常连接 GitHub。这一步需要你在 GitHub 上生成一个 Personal Access Token用于 HTTPS 推送时的身份验证。生成路径是GitHub 右上角头像 → Settings → Developer settings → Personal access tokens → Tokens (classic) → Generate new token创建 token 时勾选repo权限即可生成后务必保存因为它只显示一次。有了 token 后本地推送时把密码替换成 token 即可。这里还有一个高效做法配置 Git 凭据管理器让 Git 记住你的 token避免每次推送都输入。Windows 默认自带 Git Credential ManagermacOS 可以启用 osxkeychainLinux 可以使用git credential store。具体命令git config --global credential.helper store设置后第一次推送时输入一次用户名和 token之后会自动保存。这是一种安全性和便捷性的平衡考虑到部分开发者不熟悉 SSH 密钥配置token 方式对新手更友好。3.4 在 GitHub 创建仓库登录 GitHub点击右上角“”号选择 New repository。在 Repository name 一栏输入用户名.github.io注意大小写和实际用户名保持一致。Visibility 选择 Public因为 GitHub Pages 免费服务要求公开仓库。创建成功后仓库页面会显示几条远程地址信息包括 HTTPS 和 SSH。对于新手我建议使用 HTTPS 地址配合上面配置的 token操作链路最短。如果你此时只是想先看效果不打算在本地建文件夹可以先不管这些命令直接跳到第 4 节。但如果你选择手动构建第 5 节会用到这些信息。4. 零基础路线官方模板快速搭建个人主页这个方案适合完全不想碰代码的读者或者时间紧、只想要一个像样主页的场景。GitHub 官方提供了一些 Jekyll 模板你不需要了解 Jekyll 的底层逻辑只需要在网页上完成几次点击。第一步创建一个和自己用户名匹配的个人主页仓库名称必须是用户名.github.io这一步和第 3.4 小结一致。第二步进入仓库页面点击 Add file → Create new file。GitHub 会打开一个在线文件编辑器。这里如果你粘贴一段 HTML 代码并保存为index.htmlGitHub 就会把这个文件作为主页内容。但更快速的方式是在本地准备一个 HTML 文件用截图工具或代码编辑器写完内容再上传到仓库。对于零基础用户我推荐一个更省事的路径直接创建一个index.html把下面的示例代码粘贴进去!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title /head body h1你好我是你的名字/h1 p这是用 GitHub Pages 搭建的个人主页。/p p点击这里访问我的 GitHuba hrefhttps://github.com/你的用户名GitHub/a/p /body /html注意替换你的用户名。保存文件时文件名称必须是index.html不要写成index.html.txt。第三步进入仓库 Settings → Pages。在 Branch 区域把 None 改为 main点击 Save。等待一分钟后访问https://用户名.github.io就能看到页面。这个方案几乎不需要任何技术基础但它有很多限制。首先你只能在线编辑调试体验差其次页面样式基本靠浏览器默认样式谈不上设计感最后如果你需要多个页面在线编辑器会非常低效。所以我会建议即使你是零基础也尽量走下面的手动构建路线体验会更完整。5. 有技术含量路线手动编写主页并部署这一节是本文的核心。我们会在本地创建一个网站项目用 HTML 和 CSS 写一个有个人风格的主页然后用 Git 推送到 GitHub 并部署上线。5.1 项目结构设计在本地找一个目录新建一个文件夹建议命名规范和 GitHub 仓库名一致。进入文件夹后创建以下文件my-site/ ├── index.html ├── css/ │ └── style.css └── assets/ └── avatar.jpg说明index.html网站入口文件浏览器默认读取这个文件。css/style.css样式表控制页面颜色、布局、字体。assets/放图片、头像、文件等静态资源。这个结构虽然简单但已经是小型静态网站的标准骨架了。一个人主页不必复杂但清晰的项目结构会让后续维护变得轻松。5.2 编写首页 HTML打开index.html写入下面的代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content我的个人主页展示项目与联系方式 title张三的个人主页/title link relstylesheet hrefcss/style.css /head body header classsite-header div classcontainer img srcassets/avatar.jpg alt头像 classavatar h1张三/h1 p classsubtitle前端开发 / 开源爱好者 / 技术写作者/p /div /header main classcontainer section classcard h2关于我/h2 p你好我是张三一名热爱技术的开发者。这个网站由 GitHub Pages 免费托管用来展示我的项目和想法。/p /section section classcard h2代表性项目/h2 ul lia hrefhttps://github.com/你的用户名/project1项目一个人工具集/a/li lia hrefhttps://github.com/你的用户名/project2项目二前端组件库/a/li lia hrefhttps://github.com/你的用户名/project3项目三技术博客/a/li /ul /section section classcard h2联系方式/h2 p邮箱a hrefmailto:yourmailexample.comyourmailexample.com/a/p pGitHuba hrefhttps://github.com/你的用户名你的用户名/a/p /section /main footer classsite-footer div classcontainer p© 2026 张三 · Powered by GitHub Pages/p /div /footer /body /html这里解释几个关键点。meta namedescription是页面描述会影响搜索引擎展示摘要属于基础的 SEO 优化。link relstylesheet hrefcss/style.css用来引入外部样式文件。class属性是 CSS 选择器的钩子样式表通过类名来控制元素外观。用语义化标签如header、main、footer对可访问性和 SEO 都有好处。5.3 编写 CSS 样式创建css/style.css文件写入下面的代码/* 文件路径my-site/css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f5f7fa; } .container { max-width: 720px; margin: 0 auto; padding: 16px; } .site-header { background: linear-gradient(135deg, #24292e, #4a545c); color: #fff; padding: 48px 0; text-align: center; } .avatar { width: 96px; height: 96px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; margin-bottom: 12px; } .subtitle { opacity: 0.85; font-size: 16px; margin-top: 8px; } .card { background: #fff; border-radius: 12px; padding: 24px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .card h2 { font-size: 20px; margin-bottom: 10px; border-left: 4px solid #24292e; padding-left: 12px; } .card ul { margin-left: 20px; } a { color: #0366d6; text-decoration: none; } a:hover { text-decoration: underline; } .site-footer { text-align: center; padding: 32px 0; color: #666; font-size: 14px; }这份样式做的核心事情有三个让页面整体宽度控制在 720px 并居中这是最常见的博客排版方案给头部背景加上渐变让页面视觉上不那么单调用圆角卡片的方式组织内容符合当前主流设计审美。如果你没有头像图片可以先在assets目录随便放一张图片或者暂时把img标签删除。5.4 在本地初始化 Git 并连接远程仓库在项目目录下执行git init git add . git commit -m feat: 初始化个人主页然后添加远程仓库。远程仓库地址可以在你的 GitHub 仓库页面找到通常是git remote add origin https://github.com/你的用户名/你的用户名.github.io.git git branch -M main git push -u origin main第一次推送时Git 会要求输入 GitHub 用户名和密码。密码位置输入之前生成的 Personal Access Token不是你的登录密码。这是因为 GitHub 出于安全考虑已经不再支持 HTTPS 方式下的账号密码认证。推送成功后打开仓库 Settings → Pages分支选择main保存。等待一两分钟访问https://用户名.github.io即可看到你的手工主页。5.5 如何验证部署成功验证方式分三层。第一层看 GitHub Actions 的构建状态在仓库页面上方点击 Actions 标签能看到pages build and deployment这个工作流的执行记录。如果显示绿色对勾说明构建成功。第二层直接刷新你的个人主页。如果页面和本地预览一致说明部署链路已经通。第三层检查网页控制台。按 F12 打开开发者工具如果 Console 没有明显报错说明资源加载正常。如果头像不显示注意文件名和路径是否一致。6. 进阶配置自定义域名、Jekyll 主题与 SEO当基础个人主页上线后接下来这些配置能让你从“能打开”走向“更专业”。6.1 绑定自定义域名如果你有自己的域名可以把它绑定到 GitHub Pages。这是国外服务商很常见的做法国内域名涉及备案问题需要你根据实际情况评估。操作路径把自定义域名的 CNAME 记录解析到用户名.github.io。然后在仓库 Settings → Pages → Custom domain 一栏输入你的域名点击 Save。GitHub 会尝试自动为你启用 HTTPS这可能需要一些时间但通常几分钟内完成。同时建议在仓库根目录创建一个CNAME文件内容就是你的域名例如www.example.com这个文件的作用是防止 GitHub Pages 在将来构建时丢失自定义域名配置。不过请注意是否添加这个文件取决于你的域名状态如果你没有自定义域名完全不需要关注这一节。6.2 使用 Jekyll 主题如果你希望个人主页具备博客能力比如写 Markdown 文章、自动生成文章列表可以考虑在项目中引入 Jekyll。GitHub Pages 原生支持 Jekyll你只需要在项目根目录创建一个_config.yml文件然后按照 Jekyll 的规范写文章。一个最简配置title: 我的个人主页 description: 使用 GitHub Pages 与 Jekyll 搭建 markdown: kramdown theme: minima创建_layouts/default.html和_posts/2026-01-01-first-post.md等目录结构后Github 会自动构建博客页面。但需要注意theme: minima是 Jekyll 默认主题如果自定义程度很高可能需要选择其他主题或直接关掉主题。对普通读者我的建议是先别急着用 Jekyll。如果你已经在纯 HTML/CSS 阶段跑通了再加一层静态站点生成器学习曲线会平缓很多。反过来如果一开始就用 Jekyll 模板你可能会被目录结构和 Liquid 语法绕晕。6.3 SEO 基础配置静态网站的 SEO 优化不需要特别复杂。保证每个页面有唯一的title、description图片添加alt属性使用语义化 HTML 标签这三点已经能打败很多没有优化的页面。如果未来要写文章还可以引入sitemap.xml但这不是必须项。对于 2026 年的个人网站我更推荐把精力放在内容和链接上保持内容更新频率在 GitHub 仓库写入清晰的 README在社交平台贴上你的主页链接。搜索引擎收录是一个长期过程不要指望刚部署完第二天就出现在搜索结果前列。7. 常见问题与排查方法在新手实际操作中以下问题出现概率很高这里整理成表格供你快速排查。问题现象可能原因排查方式解决方案访问用户名.github.io显示 404仓库名不匹配或 Pages 未开启检查仓库名是否为用户名.github.io查看 Settings → Pages重命名仓库或按规则创建仓库页面一直显示旧版本浏览器缓存或 CDN 缓存强制刷新CtrlShiftR等待几分钟后再刷新Actions 构建失败Jekyll 配置错误或文件名不规范点击 Actions 里的失败记录查看日志根据日志检查_config.yml或文件目录头像显示不出来图片路径错误F12 查看 Network看图片请求状态确认assets/avatar.jpg是否存在Git 推送时认证失败使用密码而非 token查看推送错误提示输入 Personal Access Token推送后页面没有更新未推送到正确的分支检查git branch和远程分支状态使用git push -u origin main推送GitHub 打开很慢或打不开本地网络环境导致访问不稳定切换网络环境或稍后重试不要使用来路不明的第三方工具避免账号风险上面最后一条需要特别强调如果 GitHub 访问不稳定优先排除本地网络问题。比如公司网络可能限制了对 GitHub 的访问可以尝试切换 Wi-Fi、使用移动热点、等待网络恢复。任何时候都不建议下载来源不明的所谓“GitHub 加速器”或“GitHub 镜像”这类工具可能窃取你的账号 token也违反平台使用规则。8. 最佳实践与工程建议个人网站虽然小也应该用工程化的思路维护否则时间一长就会陷入“改一个按钮半天找不到文件”的窘境。第一提交信息规范。不要每次提交都写update建议使用类似feat: 新增项目展示区、fix: 修复移动端样式错位、docs: 更新联系方式这样的语义化提交信息。这样在回看历史时能快速定位每一条变更目的。第二目录结构预留扩展空间。起步阶段就可以把文件分成css、assets、js三个目录即使初期没有 JS 文件也能接受。后续加功能时不需要大规模重构。第三图片等资源优化。GitHub Pages 对仓库体积有限制不要直接上传几 MB 的高清图片。建议使用图片压缩工具或者使用在线图床然后在页面里引用链接。头像和背景图尽量裁剪成合适尺寸。第四环境变量和敏感信息。和个人主页无关但如果你以后在同一个账号下管理其他项目要注意不要把 API Key、数据库密码、token 提交进仓库。GitHub 有自动化扫描机制推到公开仓库的敏感信息会被判定为泄露事件。第五加强账号安全。GitHub 账号是你所有代码资产的入口务必开启双重认证不要使用弱密码。如果是公司电脑还要注意 token 的权限分配尽量使用 fine-grained token 限定仓库范围。第六关于备案问题。如果你的目标读者主要在中国大陆希望把网站放在更近的服务节点GitHub Pages 并不适用。这时候建议考虑国内云服务商但那样通常需要域名备案时间成本会明显增加。根据需求选择适合的平台不要因为免费就盲目套用。9. 总结与下一步学习方向现在你已经掌握了用 GitHub 构建个人网站主页的完整路径注册账号、配置 Git、创建规范仓库、选择模板或手动编写代码、推送部署、进阶配置和排错。相比买服务器自己搭建这套方案省去了运维环节却保留了最核心的“Git 推送—自动构建—线上生效”工作流对理解现代网站部署方式非常有帮助。下一步你可以按自己的兴趣选择方向如果你喜欢写文章学习 Jekyll 或 Hexo把当前主页扩展成博客。如果你喜欢样式设计继续完善 CSS学习 Flexbox、Grid 和响应式布局。如果你对部署流程感兴趣了解 GitHub Actions尝试在每次推送后自动执行测试和部署。如果你想把它变成简历可以增加项目展示、时间线、下载简历文件等功能。对已经上线的页面有一个小提醒不要把它当成一次性的作业。个人网站最大的价值在于长期更新和积累过半年回看你会发现页面和项目列表的变化本身就是技术成长的记录。建议先收藏本文跟着第 5 节的路径在你的电脑上完成一次完整的构建部署。当你亲眼看到自己的网站在公网被访问时那种成就感会推动你继续完善下去。