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 工具安装与环境配置让我们先把“战场”准备好。安装GitWindows前往 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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classintro p这是我的第一个GitHub Pages网站。/p p我正在学习如何使用GitHub Pages来展示我的项目和想法。/p p这是一个简单的开始未来我会在这里添加我的a href#项目作品/a、a href#技术博客/a和a href#个人简历/a。/p p欢迎常来看看/p /div psmall最后更新于span idcurrent-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 # 确保本地分支名是mainGitHub默认 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环境。 - 确保已安装RubyJekyll基于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只是一个开始它为你打开了一扇低成本展示自我、连接世界的大门。真正的价值在于你通过这个平台持续输出的内容、项目和思考。从今天起把这个角落当作你的数字花园定期耕耘它终将回馈你意想不到的收获。