做个人网站这件事说难不难说简单也不简单。之前带团队新同学搭个人主页很多教程要么停在“创建一个仓库就能访问”这一步要么一上来丢给你一套 Jekyll 主题让人对着报错怀疑人生。这次我把自己在 GitHub 上构建部署个人网站的完整经验整理成一套保姆级教程覆盖两条路线一条是“简单动手即可配置”的零基础路线另一条是“有技术含量”的博客型站点路线。从仓库创建、环境准备、代码编写、部署上线到绑定自定义域名、排查 404 和构建失败一次性讲明白。本文默认你至少知道网页由 HTML/CSS/JS 组成如果你完全没接触过前端也不慌第 3 节会先从 GitHub 自带功能切入先看到效果再逐步理解原理。无论你是在校学生、独立开发者还是想沉淀技术博客的后端工程师跟着本文走完你都能拥有一个属于自己的、可通过公网访问、支持 HTTPS 的个人网站。1. 为什么用 GitHub 构建个人网站1.1 GitHub Pages 是什么GitHub Pages 是 GitHub 官方提供的静态网站托管服务核心功能就是把一个仓库里的静态文件通过固定链接发布到公网。你不需要购买云服务器也不需要配置 Nginx更不用维护数据库。只要把index.html、CSS、JS 这些文件提交到仓库GitHub 就会自动完成构建和托管。从技术本质上讲GitHub Pages 是一个自带 CDN 加速的静态资源托管平台。因为静态网站的访问不需要后端计算所以它的加载速度通常比传统服务器上的动态网站更快。配合 GitHub 的版本管理能力你对网站的每次修改都会留下提交记录出问题时可以随时回滚到上一个稳定版本。官方为 GitHub Pages 设置了一些使用限制例如仓库内容大小、构建次数和带宽配额都有上限。虽然个人网站在正常情况下很难触达这些边界但你必须清楚GitHub Pages 适合个人品牌展示、项目文档和技术博客不适合承载高并发的商业系统。1.2 适用场景与优势场景是否适合说明个人品牌主页 / 在线简历非常合适完全免费可绑定独立域名技术博客 / 产品文档非常合适支持 Jekyll 和 Markdown开源项目展示页非常合适和代码仓库天然联动需要后端接口的网站不合适Pages 只托管静态资源高并发商城 / 在线系统不合适有带宽和构建次数限制需要数据库的应用不合适没有服务端运行环境使用 GitHub Pages 还有一个隐性好处你会在不知不觉中熟练 Git 工作流。因为每一次内容更新都要走add-commit-push流程多提交几次后你对分支、远程仓库、版本回退这些概念会彻底形成肌肉记忆。1.3 开始前需要理解的概念仓库Repository存放你网站所有源文件的容器可以理解为一个远程文件夹。分支Branch默认分支叫mainGitHub Pages 可以直接从这个分支发布。提交Commit与推送PushCommit 是本地记录一次改动Push 是把本地记录上传到 GitHub。README仓库首页的说明文件用 Markdown 编写会展示在仓库主页。Jekyll一个基于 Ruby 的静态站点生成器GitHub Pages 原生支持可以直接通过它把 Markdown 文件渲染成网页。CNAME 文件GitHub Pages 用来识别自定义域名的一个配置文件。2. 环境准备与版本说明2.1 注册并配置 GitHub 账号如果你还没有 GitHub 账号先去官网完成注册。注册时需要注意用户名一旦确定会影响你的个人网站地址格式是https://用户名.github.io所以尽量选择一个正式、简短、利于传播的用户名。建议绑定常用邮箱并且开启两部验证避免账号被盗后仓库被恶意篡改。注册后进行邮箱验证否则很多仓库操作无法完成。部分网络环境下访问 GitHub 偶尔会出现加载缓慢或页面打不开的情况。这个问题我会在第 7 节的常见问题中单独说明这里先不要因为一次打不开就放弃多刷新几次或者更换一个网络环境再试。2.2 安装 Git 并配置基础信息Git 是提交代码的必备工具也是整个个人网站工作流的核心。安装方式根据你的操作系统选择Windows下载 Git for Windows 安装包一路 Next 即可。安装完成后打开 Git Bash。macOS终端执行brew install git没有 Homebrew 可以先安装 Homebrew。Linux使用sudo apt install gitDebian/Ubuntu或sudo yum install gitCentOS。安装完成后在终端中验证版本git --version接着配置全局用户名和邮箱这个信息会显示在你的提交记录上git config --global user.name 你的用户名 git config --global user.email 你的邮箱这里强调一点邮箱不一定要用 GitHub 注册邮箱但建议保持一致。GitHub 从 2025 年左右开始对提交记录中的邮箱隐私更敏感如果你不想暴露真实邮箱可以在 GitHub 设置中开启“Keep my email addresses private”然后用 GitHub 生成的noreply邮箱。2.3 配置 SSH 免密登录每次 push 都输入用户名密码很低效更推荐配置 SSH Key。配置后你的本地机器和 GitHub 之间会通过密钥对验证身份既安全又省事。打开终端执行ssh-keygen -t ed25519 -C 你的邮箱后面一路上按回车即可默认会在~/.ssh/目录生成密钥文件。然后查看公钥内容cat ~/.ssh/id_ed25519.pub把输出的内容复制进入 GitHub 的Settings-SSH and GPG keys-New SSH key粘贴保存。最后验证配置是否成功ssh -T gitgithub.com如果看到Hi your-name! Youve successfully authenticated说明 SSH 配置成功。接下来克隆、推送都可以通过 SSH 地址完成不再需要每次输入密码。2.4 本地编辑器与示例项目结构写代码的编辑器推荐 VS Code免费、插件生态丰富自带终端和 Git 面板。安装后建议安装两个插件Live Server用于本地预览网页GitLens用于查看提交历史。后续实战中我们会频繁使用这样一个项目结构my-personal-site/ ├── index.html ├── README.md └── assets/ ├── css/ │ └── style.css └── js/ └── main.jsindex.html是网站的入口文件浏览器默认会优先加载它assets目录用来放样式、脚本和图片资源。这个结构只是一个起点后面扩展 Jekyll 时会演化出更完整的目录体系。3. 零基础先跑通用 GitHub 自带主题上线3.1 创建 GitHub 仓库登录 GitHub 后点击右上角选择New repository。仓库名有两种选择如果你想创建个人主页User Site仓库名必须严格命名成用户名.github.io例如zhangsan.github.io。如果只是创建一个项目页面仓库名可以随便填访问地址会变成https://用户名.github.io/仓库名/。这里建议新手按个人主页方式创建这样访问路径最简单后面绑定域名也更干净。可见性选择Public如果你选了 Private免费版无法直接使用 Pages 服务。初始化时可以勾选Add a README file。3.2 在仓库设置中开启 Pages进入仓库后点击顶部Settings标签在左侧菜单中找到Pages。在Build and deployment区域Source选择Deploy from a branch然后选择main分支目录保持根目录/点击保存。这时候 GitHub 会自动为你的仓库生成一个gh-pages构建任务。等待一分钟后访问https://用户名.github.io如果页面没有报 404说明你的第一个个人网站已经上线了。因为仓库里目前只有一个 README页面会展示简单的 Markdown 渲染效果。接下来要做的是给它换一副主题外观。3.3 使用主题免写代码换肤GitHub Pages 提供了自动化页面生成器适合完全不熟悉代码的读者。在仓库根目录上传一张头像和一段个人简介即可生成。不过这种方式的定制空间非常有限。如果你对 Markdown 语法已经熟练更推荐直接编写index.md作为首页内容然后在_config.yml中配置 Jekyll 主题。比如在仓库中新建一个_config.yml文件写入title: 我的个人主页 description: 用 GitHub Pages 构建的个人网站 theme: jekyll-theme-caymanGitHub 会读取这个配置并自动使用cayman主题渲染页面。类似的主题还有jekyll-theme-slate、jekyll-theme-minimal、jekyll-theme-hacker等适合快速换肤。这里其实已经进入 Jekyll 的范畴了GitHub Pages 会在你每次 push 后自动执行 Jekyll 构建。所以即使你只想做一个最简单的个人主页也不要绕过 Jekyll 的基础概念下一节会帮你彻底打通。4. 手写 HTML/CSS做一个有技术含量的个人主页4.1 项目结构与首页 HTML自动主题虽然省事但想要做出一眼看上去“有技术含量”的个人主页还是需要自己动手写 HTML 和 CSS。我们以“程序员个人主页”为例设计一个包含首页 Hero、关于区、项目展示区和联系方式的一页式网站。先创建项目目录并在根目录编写index.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 hrefassets/css/style.css / /head body header classsite-header nav classnav span classlogolt;Dev /gt;/span ul lia href#about关于/a/li lia href#projects项目/a/li lia href#contact联系/a/li /ul /nav /header main classcontainer section classhero h1你好我是 span idtyped-text/span/h1 p一名专注于 Web 开发与个人网站构建的工程师喜欢把复杂问题拆成简单可执行的小步骤。/p a classbtn href#projects查看我的项目/a /section section idabout classsection h2关于我/h2 p这里可以写你的工作经历、技术栈、当前关注的方向以及你正在做的开源项目。内容不用太正式保持真实、简洁、有重点。/p /section section idprojects classsection h2项目/h2 div classgrid article classcard h3项目 A/h3 p一句话描述项目解决的问题以及它用到的核心技术。/p a href#GitHub 仓库/a /article article classcard h3项目 B/h3 p这句话可以强调项目上线后的效果例如访问量、下载量或用户反馈。/p a href#在线演示/a /article /div /section section idcontact classsection h2联系我/h2 p你可以通过 GitHub、邮箱或社交账号找到我。如有技术合作或内推机会欢迎随时交流。/p /section /main footer classsite-footer p© 2026 Your Name · Powered by GitHub Pages/p /footer script srcassets/js/main.js/script /body /html这段 HTML 结构重点在语义化header、main、section、footer都是 HTMl5 原生标签浏览器和搜索引擎都能正确识别。meta description对 SEO 有帮助建议不要省略。4.2 CSS 样式设计接下来创建assets/css/style.css整体采用深色主题和卡片式布局让页面更有“程序员风格”/* 文件路径assets/css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; background: #0f172a; color: #e2e8f0; line-height: 1.8; } .container { max-width: 960px; margin: 0 auto; padding: 0 20px; } .site-header { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #1e293b; } .nav { max-width: 960px; margin: 0 auto; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; } .logo { font-weight: bold; color: #38bdf8; } .nav ul { list-style: none; display: flex; gap: 24px; } .nav a { color: #cbd5e1; text-decoration: none; } .nav a:hover { color: #38bdf8; } .hero { padding: 120px 0 80px; text-align: center; } .hero h1 { font-size: 40px; margin-bottom: 20px; } #typed-text { color: #38bdf8; border-right: 2px solid #38bdf8; padding-right: 8px; } .btn { display: inline-block; margin-top: 24px; padding: 12px 32px; background: #38bdf8; color: #0f172a; text-decoration: none; border-radius: 6px; font-weight: bold; } .btn:hover { opacity: 0.85; } .section { padding: 60px 0; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; } .card { background: #1e293b; padding: 24px; border-radius: 10px; } .card a { color: #38bdf8; } .site-footer { text-align: center; padding: 40px 0; border-top: 1px solid #1e293b; color: #64748b; }关键点解释display: grid配合repeat(auto-fit, minmax(260px, 1fr))实现了响应式卡片布局窗口宽度变化时卡片会自动换列position: sticky让导航栏滚动时固定到顶部backdrop-filter是常见的毛玻璃效果现代浏览器都支持。这些代码在手机上也会自动适配不需要单独写移动端样式。4.3 增加 JavaScript 交互静态页面如果只有 HTML 和 CSS会显得比较单调。我们给 Hero 区域的文字加一个打字机效果让页面看起来更有动感// 文件路径assets/js/main.js const texts [前端开发工程师, 开源爱好者, 知识分享者]; let textIndex 0; let charIndex 0; const target document.getElementById(typed-text); function type() { if (charIndex texts[textIndex].length) { target.textContent texts[textIndex][charIndex]; charIndex; setTimeout(type, 80); } else { setTimeout(() { target.textContent ; charIndex 0; textIndex (textIndex 1) % texts.length; setTimeout(type, 200); }, 1600); } } type();这段脚本维护两个索引textIndex标记当前展示的是第几组文字charIndex标记当前打字到第几个字符。setTimeout实现逐字追加和停顿效果。整体逻辑放在DOMContentLoaded或script标签最后执行确保 HTML 渲染完成后获取元素。4.4 本地预览调试直接在浏览器双击打开index.html也能看到页面但这种方式在后续请求本地资源时可能遇到跨域问题。推荐使用 Python 自带 HTTP 服务或 VS Code 的 Live Server。在项目根目录执行python3 -m http.server 8000然后浏览器访问http://localhost:8000。修改代码后刷新页面即可看到效果。如果你用 VS Code右键index.html选择Open with Live Server它还会自动热更新保存代码后浏览器自动刷新。4.5 推送到 GitHub 并验证当本地页面效果满意后开始提交部署。在项目根目录执行git init git add . git commit -m feat: 初始化个人主页 git branch -M main git remote add origin gitgithub.com:你的用户名/你的仓库名.git git push -u origin main如果你创建的是用户名.github.io仓库并且已经在 Settings 中选好main分支发布push 完成后等待一两分钟访问https://用户名.github.io应该能看到你刚刚写的个人主页。此时一个“有技术含量”且完全由你掌控的个人网站已经上线了。后续修改内容只需要git add - commit - push三步GitHub 会自动重新构建并更新线上页面。5. 深度进阶用 Jekyll 搭建博客型个人网站5.1 Jekyll 核心原理手写 HTML 的方式适合展示静态主页但如果你计划长期更新技术博客每篇文章都写一个 HTML 文件显然不现实。此时需要 Jekyll一个将 Markdown 和 Liquid 模板渲染成静态 HTML 的站点生成器。Jekyll 的工作流程可以概括为你写 Markdown 格式的文章放在_posts目录中。文章头部包含layout、title、date等元信息称为 Front Matter。Jekyll 根据这些信息和模板布局打包输出一个完整的静态网站。GitHub Pages 在你 push 后自动执行 Jekyll 构建并把结果发布到 Pages。也就是说之后每次发博客你只需要提交一个.md文件不需要关心页面结构、导航栏、样式如何重复渲染——这些都由 Jekyll 的_layouts模板统一处理。5.2 本地安装 Jekyll 环境Jekyll 基于 Ruby所以本地环境需要先安装 Ruby。官方不建议直接使用系统自带 Ruby因为容易踩权限坑。macOS / Linux推荐用rbenv管理 Ruby 版本。Windows推荐下载 RubyInstaller安装时勾选Add Ruby executables to your PATH完成后在命令行验证ruby -v。然后安装 Jekyll 和 bundlergem install jekyll bundler jekyll -v如果这一步出现网络超时可以检查 RubyGems 源是否可用。国内用户可以将源切换到可访问的镜像站但日常建议以官方源为准避免依赖不一致。5.3 创建站点并理解目录结构在命令行中创建一个新站点jekyll new my-blog cd my-blog bundle install生成后的目录结构是 Jekyll 的默认模板重点目录如下my-blog/ ├── _config.yml # 全局配置 ├── _posts/ # 文章目录 ├── _layouts/ # 页面布局模板 ├── _includes/ # 可复用的碎片组件 ├── assets/ # 样式和静态资源 ├── index.md # 首页 └── Gemfile # 依赖清单_config.yml是 Jekyll 最核心的配置文件。默认配置已经够用我们稍作修改title: 我的开发博客 email: your-emailexample.com description: 记录 Web 开发、个人网站构建与工程实践 url: https://你的用户名.github.io github_username: 你的用户名 theme: minima注意url要改成你最终的线上地址。如果以后绑定独立域名url要同步改成域名。5.4 写第一篇文章在_posts目录中新建文章文件命名必须严格遵循YYYY-MM-DD-标题.md格式例如--- layout: post title: 我用 GitHub Pages 搭建个人网站的完整过程 date: 2026-01-01 10:00:00 0800 categories: [随笔] tags: [GitHub, Jekyll, 个人网站] --- 这是文章正文使用 Markdown 语法编写。 ## 为什么选择 GitHub Pages 因为免费、稳定、和代码仓库深度集成。写博客的过程本质上就是提交代码的过程。Front Matter 中的layout告诉 Jekyll 使用哪个布局模板title、date、categories、tags会用于页面标题和文章归档分类。正文部分全部是 Markdown比写 HTML 舒服太多。5.5 本地预览与部署上线在my-blog目录启动本地服务bundle exec jekyll serve访问http://localhost:4000预览博客效果。本地确认无误后把和你的 GitHub 仓库关联起来git init git add . git commit -m feat: 用 Jekyll 搭建个人博客 git branch -M main git remote add origin gitgithub.com:你的用户名/你的用户名.github.io.git git push -u origin main前提是你已经把仓库Settings - Pages的 Source 设置为Deploy from a branch分支选择main。push 完成后GitHub Actions 会自动执行 Jekyll 构建稍等片刻线上地址就能看到博客首页。6. 绑定自定义域名6.1 域名购买与解析准备用户名.github.io这个地址虽然能用但看起来不够专业。如果你有自己的域名推荐把它绑定到 GitHub Pages 上。购买域名后进入 DNS 管理控制台。GitHub Pages 支持两种解析方式使用CNAME记录把你自己的域名解析到用户名.github.io。使用A记录直接解析到 GitHub Pages 的官方 IP 地址。A 记录方式需要添加四条记录分别指向185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153如果你使用www子域名通常还需要添加一条 CNAME主机记录www 记录类型CNAME 记录值用户名.github.io注意这里用户名.github.io最后的点号在不同 DNS 服务商的要求不同有些平台会自动补全不用手动添加。6.2 在 GitHub 中配置自定义域名进入仓库Settings - Pages在Custom domain一栏输入你的域名点击Save。GitHub 会自动在仓库根目录创建一个CNAME文件内容就是你的域名。为了保险起见你也可以在仓库根目录手动创建CNAME文件www.your-domain.com文件的最终内容只需要一行域名不需要加https://。手动创建后每次切换分支或调整内容时不要误删这个文件否则自定义域名会失效。6.3 验证 HTTPS 和域名生效保存自定义域名后GitHub 会尝试自动为你的域名申请 HTTPS 证书这个过程通常需要几分钟到几十分钟。在设置页面如果Enforce HTTPS选项可勾选说明证书签发成功。验证域名解析是否生效可以使用系统自带的dig命令dig www.your-domain.com CNAME如果返回值中包含你的用户名.github.io说明解析已生效。接下来即使不输入www只要你配置了裸域名跳转用户也能直接访问你的主域名。7. 常见问题与排查思路问题现象常见原因解决思路访问页面返回 404仓库不是 Public检查仓库可见性访问页面返回 404首页文件不叫 index在仓库根目录创建 index.html访问页面返回 404发布分支选错检查 Pages Settings 中的部署分支构建失败YAML 语法错误查看 Actions 日志检查_config.yml样式丢失部署路径不带仓库名使用site.baseurl生成资源路径修改后线上不更新浏览器缓存强刷缓存 CtrlShiftR自定义域名不生效DNS 还没生效等待 1-24 小时检查 CNAME 记录7.1 访问页面返回 404首先确认仓库是否设置为 Public私有仓库无法直接用 Pages 服务。其次确认根目录是否有index.html或index.md这是静态网站的默认入口。如果首页文件放在子目录中可以设置相对路径跳转但不建议这样做。最后检查Settings - Pages中的Branch是否选择了正确的分支比如你有没有把文件推到main分支却在发布设置里选了gh-pages分支。7.2 GitHub Actions 构建失败进入仓库Actions标签页查看最后一次工作流的日志。常见问题是_config.yml中缺少必要的键值导致主题无法识别。YAML 文件缩进不正确Jekyll 解析失败。文章文件名格式不正确例如日期写成2026/01/01。使用了某个 GitHub Pages 不支持的 Jekyll 插件。定位到具体报错后先修本地文件重新提交推送。如果找不到问题可以用bundle exec jekyll build在本地复现构建过程本地没有报错再推送。7.3 样式和图片加载不出来静态资源加载失败最常见的原因是路径写错。GitHub Pages 的项目站点会有仓库名前缀此时/assets/css/style.css这种绝对路径会定位到域名根目录而不是项目目录。解决方案是使用 Jekyll 提供的baseurl机制。在_config.yml中设置baseurl为仓库名然后资源引用改成{{ site.baseurl }}/assets/css/style.css或者尽量使用相对路径assets/css/style.css但要注意这个写法会受页面嵌套层级影响。7.4 GitHub 访问不稳定的应对方案如果你所在网络环境下访问 GitHub 比较吃力切换到 SSH 协议通常比 HTTPS 协议更稳定。本地仓库切换远程地址git remote set-url origin gitgithub.com:用户名/仓库名.git同时可以使用 GitHub 官方命令行工具gh操作仓库避免频繁打开网页。另外如果访问确实受到网络波动影响优先检查本机 DNS 是否能正确解析github.com必要时把系统 DNS 切换为常见的公共 DNS再进行解析测试。这里特别强调不推荐使用任何不正规的所谓“加速工具”来绕过网络限制。最安全可靠的做法是在本地完整开发、测试只在关键时刻执行 push你也可以把仓库镜像同步到其他代码托管平台作为备份站点。GitHub 官方对仓库导入导出是开放的利用好 Git 分布式特性就能最大程度减少网络不稳定的影响。7.5 自定义域名解析不生效DNS 解析生效需要时间通常是几分钟到 24 小时。如果你刚配置完就访问先不要着急。检查CNAME记录是否填写正确A 记录的四个 IP 是否都已添加。如果设置了 HTTPS 强制跳转但证书还没签发成功页面可能显示不安全或无法访问等待证书签发后再测试。8. 工程化最佳实践与站点维护8.1 仓库结构设计即使是一个人维护的个人网站也应该有清晰的分支和目录规划。推荐这样做把main分支作为文章和源码的发布分支。如果是纯静态手写 HTML在主分支直接发布。如果使用构建工具生成dist目录用 GitHub Actions 构建后发布或显式创建gh-pages分支存放构建产物。在仓库根目录维护完整的README.md说明项目如何本地启动、如何部署。这样哪怕半年不更新你再打开仓库也能快速想起来整个项目是怎么组织和部署的。8.2 敏感信息与安全边界这是非常重要的一条不要把任何敏感信息放进个人网站仓库。具体的风险点包括.env文件、数据库连接串、API Key、密码、Token 都不要提交到仓库。即使仓库是 Private也要养成代码审查的习惯因为公开仓库一旦泄露密钥可能被恶意扫描工具立刻抓取造成不可控损失。建议在仓库根目录添加.gitignore文件# 忽略环境变量和敏感文件 .env *.pem *.key # 忽略系统文件 .DS_Store Thumbs.db如果发现密钥已经提交到历史记录中不要只删除再提交一次因为历史记录里仍然存在。需要重写 Git 历史或使用工具清理最稳妥的做法是立刻吊销泄露的密钥并重新生成。8.3 用 GitHub Actions 自动化部署当你后续使用 Vue、React、Vite 这类前端框架构建网站时手动构建再提交生成文件的方式非常低效。此时可以用 GitHub Actions 实现提交代码后自动构建并部署。下面是一份常见的静态站点自动部署配置示例注意版本号需要以 GitHub Actions 市场当时的版本为准# 文件路径.github/workflows/deploy.yml name: Deploy to GitHub Pages on: push: branches: [main] workflow_dispatch: permissions: contents: read pages: write id-token: write concurrency: group: pages cancel-in-progress: true jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkoutv4 - name: Setup Node uses: actions/setup-nodev4 with: node-version: 20 - name: Install deps run: npm ci - name: Build run: npm run build - name: Upload artifact uses: actions/upload-pages-artifactv3 with: path: dist deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Deploy id: deployment uses: actions/deploy-pagesv4这份工作流包含两个 Jobbuild负责拉取代码、安装依赖、执行构建并将产物上传为 Pages artifactdeploy负责把构建产物发布到 GitHub Pages。提交后你只需要push 代码剩下的构建和部署全部自动化完成。8.4 性能与 SEO 优化要点个人网站的性能优化没有想象中复杂从这几点入手就能获得明显提升图片使用 WebP 格式避免大尺寸 JPG/PNG 直接展示。将首屏必要的 CSS 内联减少请求数。给图片和 iframe 添加loadinglazy懒加载属性。合并和压缩所有 CSS/JS 文件减少 HTTP 请求体积。开启浏览器缓存设置静态资源的缓存时间。SEO 方面个人网站要重点关注每个页面都要有独立的title和meta description合理使用h1、h2层级为图片添加alt属性提交网站地图sitemap.xml到搜索引擎站长平台。GitHub Pages 对 HTTPS 和响应式布局有天然支持这两点对搜索排名有利。9. 总结与下一步学习路线按本文流程完整走一遍你现在应该已经拥有一个通过公网 HTTPS 访问的个人网站了。你可能掌握了两套方案一套是零基础用 GitHub 自带主题快速上线另一套是自己写 HTML/CSS/JS 和 Jekyll 模板构建一个具备博客功能、可持续更新的站点。同时你还学会了绑定自定义域名理解了 DNS 解析的基本原理也知道了遇到 404、构建失败和访问不稳定时该如何排查。下一步的学习方向有几个建议按优先级排序把当前个人主页的视觉风格好好打磨一下选一套顺眼的字体优化卡片间距和配色。尝试写 3 到 5 篇真实的技术文章在 Jekyll 博客中发布检验整个写作和发布流程是否顺畅。如果开始感到手动写 HTML 效率太低去学一下 Vue 或 React配合 GitHub Actions 走自动化部署路线。把仓库同步到其他代码托管平台作为备份研究一下多仓库管理和自动化同步让自己不依赖单一平台。个人网站最重要的不是技术有多炫而是你愿不愿意持续维护它。内容更新频率、访问速度和站内导航逻辑比一次性把所有功能都怼上去更重要。把今天搭好的页面当成一个长期资产之后每次学习到新技术都可以回过来改造它、升级它它就会慢慢变成你在互联网上真正有辨识度的名片。