别再用简历了：用 GitHub Pages 打造你的个人名片
摘要：本文介绍了如何零成本使用GitHub Pages快速搭建个人主页。通过创建username.github.io仓库并上传HTML文件，无需服务器即可发布网站。文章提供了5种现成模板（亮色/暗色/普通/赛博朋克/像素风格），可直接使用或二次开发，并展示了如何通过_config.yml自定义配置。作者建议从简单模板开始，逐步迭代个性化功能，将GitHub Pages打造成互联网名片。该方法特别适
目录
序言
如果你也想搞一个看起来牛逼哄哄的个人首页，但又不想买服务器、不想配环境、不想折腾一堆乱七八糟的东西——
那 GitHub Pages 可能真的挺适合你。
它的逻辑很简单：
你写代码 → 推上去 → 就有人能访问你的网站了。
没有运维，没有部署焦虑，也不用半夜起来看机器是不是挂了。
甚至你可以一边写 README，一边顺手把“个人官网”也给做了。
这篇文章就带你用最少的成本，搞一个属于自己的在线名片。
GitHub 页面快速入门
官方文档：https://docs.github.com/en/pages/quickstart
你可以使用 GitHub Pages 来展示一些开源项目、主持博客甚或分享你的简历。
1. 在任何页面的右上角，选择"+"号然后单击“新建存储库”
2. 输入 username.github.io 作为存储库名称
将 username 替换为你的 GitHub 用户名。 例如，如果用户名为 octocat，则存储库名称应为 octocat.github.io。
比如这里，作者的名字是KasperLund，但用户名是QwQzy，那么仓库名就是qwqzy.github.io。
创建仓库的时候注意状态要设置为公开！
3. 写入一段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>
</head>
<body>
<h1>你好，世界！</h1>
<p>欢迎来到我的第一个个人网站。这里是使用 GitHub Pages 搭建的。</p>
</body>
</html>
注意这里必须是index.html，如果你没有CDN的话，建议把JS,CSS,HTML都放到index.html中：
4. 选择部署分支
在仓库名称下，单击 “Settings”。
在边栏的“代码和自动化”部分中，单击“ Pages”。
在“生成和部署”的“源”下，选择“从分支进行部署”。
访问 username.github.io 以查看新网站。 请注意，对站点的更改在推送到 GitHub 后，最长可能需要 10 分钟才会发布。
然后访问我们的个人主页：
更改标题和说明
默认情况下，站点的标题为 username.github.io。 可通过编辑存储库中的 _config.yml 文件来更改标题。 您还可以为您的网站添加说明。
在仓库中新建一个_config.yml文件，写入以下配置：
theme: jekyll-theme-minimal
title: Octocat's homepage
description: Bookmark this to keep an eye on my project updates!
但我个人感觉没必要，我们完全可以在html的head中写上自己的标题，并且通过CSS设置样式，甚至可以通过写JS去设置一些交互动画。
多种风格主页：直接拿去用就行
在正式开始搭建之前，我先做了几套“现成可用”的个人主页模板。
一共准备了 5 个不同风格的 index.html，你可以直接下载下来用，也可以当成基础再去二次魔改：
- 亮色风格：干净、克制，适合简历型展示
- 暗色风格：更偏开发者气质，看起来比较“稳”
- 普通风格：基础款，结构清晰，适合起步
- 赛博朋克风格：偏炫酷路线，适合想“有点东西”的主页
- 像素风格：复古一点，偏趣味展示，玩具感很强
这些页面我都已经把样式和动画尽量做完整了，基本是“开箱即用”的状态。
你不需要理解里面所有 CSS 是怎么写的，也不用从零开始搭结构，直接挑一个喜欢的风格放到 GitHub Pages 上就能跑起来。
当然，如果你想折腾，也完全可以把它当作起点去改，比如：
- 换配色
- 改布局
- 加自己的项目模块
- 或者干脆拼成一个“多风格切换系统”
总之思路很简单：
先跑起来，再慢慢变成你自己的东西。
这些模板我也会放在仓库里，大家可以自由下载、修改、甚至重写成你自己的版本。
暗色风格
亮色风格
普通风格
像素风格
赛博风格
定制你的专属风格
如果你已经不满足于“直接用现成模板”，那其实还可以再往前走一步：做一个完全属于你自己的主页风格。
说白了就是——不只是选一个模板，而是让它长成“你的样子”。
这次我做的这 5 套风格，其实并不是纯手搓出来的，而是用 Claude Code + Skill 一点点拼出来的。
流程也没什么玄学：
先用 Claude Code 把页面结构、动画逻辑、交互方式跑出来，然后再用 Skill 把一些常用能力模块化（比如布局、主题切换、动效封装之类的），最后就是不断“拼装 + 微调”。
你可以很轻松地把亮色、暗色、赛博朋克、像素风这些主题拆开、重组，甚至混搭成新的风格。
比如：
- 赛博朋克 + 暗色 = 更极致的“开发者战斗界面”
- 像素风 + 亮色 = 偏轻松的个人展示页
- 或者干脆做一个“主题切换按钮”，一键换世界
如果你愿意折腾一点，这部分其实才是 GitHub Pages 最有意思的地方——
它不只是“发布一个页面”，而是让你可以不断迭代自己的“线上形象”。
老东家skills地址：https://github.com/anthropics/skills/tree/main/skills
结尾
其实做到这里，GitHub Pages 已经不只是一个“技术练手项目”了。
它更像是你在互联网上的一张小名片，一个随时可以点开的自我介绍。
不用太复杂，也不用追求多完美。能跑起来，有点样子，再慢慢加东西，就已经足够了。
如果你愿意折腾一点点细节，比如动画、主题切换、交互效果，那它甚至可以变成一个挺“有存在感”的个人主页。
欢迎大家去访问我的 GitHub 主页，也可以直接把这些模板拉下来自己改改。
尤其是在校的兄弟姐妹们，其实真的可以试试——
做一个会动的个人主页，放上自己的项目、兴趣、甚至随便写点介绍，确实挺酷的。
还有一些小初高的朋友们也可以玩玩看，说不定在同学面前还能“展示一波小小的技术震撼”。
总之就是一句话：
不用等你“很厉害了”才去做主页，有主页这件事，本身就会让你慢慢变得更厉害一点。
openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)