1. 项目概述一个面向开发者的技能图谱仓库最近在GitHub上看到一个挺有意思的项目叫antfu/skills。乍一看名字你可能会以为这是一个关于“技能”的教程合集或者学习路线图。但点进去之后你会发现它其实是一个个人技能的可视化仪表盘或者说是一个用代码和数据来动态展示开发者技术栈与熟练度的“数字名片”。这个项目的核心价值在于它提供了一种结构化、自动化、可量化的方式来管理并展示你的技能树。对于开发者尤其是活跃在开源社区、需要建立个人技术品牌的朋友来说这远比一份静态的简历或LinkedIn个人资料要生动和直观。它把“我会什么”、“我擅长什么”这个模糊的概念变成了一个可以通过提交代码、更新配置文件来实时维护的“活”的资产。我自己也维护着一个类似的个人主页深知手动更新技术栈、调整熟练度进度条是多么繁琐且容易过时。antfu/skills项目巧妙地解决了这个问题。它本质上是一个基于Vite构建的静态网站其数据源是一个结构化的YAML配置文件。你只需要在这个配置文件里按照一定的格式列出你的技能项、分类、熟练度以及相关的图标或链接项目就能自动生成一个美观、交互式的技能展示页面。这不仅仅是展示更是一种对自身能力的持续梳理和反思。2. 核心设计思路与技术选型解析2.1 为什么选择“配置即数据”的架构antfu/skills最核心的设计哲学是“关注点分离”。它将“数据”你的技能信息和“表现层”网页如何渲染这些数据彻底分开。数据层 (skills.yml) 所有关于技能的信息都存储在一个YAML文件中。YAML格式对人类友好结构清晰易于手动编辑和版本控制。你不需要懂任何前端框架只需要像写清单一样用缩进和键值对来描述你的技能。表现层 (Vite Vue 3) 项目使用现代化的前端技术栈来读取这个YAML文件并将其渲染成网页。Vite提供了极快的开发体验和构建速度Vue 3的响应式系统和组件化能力使得构建这种动态展示界面变得非常简单。这种设计的优势非常明显维护成本极低 你想更新技能打开YAML文件改几个字提交网站就自动更新了。完全不需要触碰前端代码。可移植性强 你的技能数据是独立的。未来即使你想换一个展示框架或者将数据导入其他平台这个YAML文件就是最纯净的数据源。专注于内容 作为使用者你只需要关心“我有什么技能”这个核心问题而不是被“这个按钮怎么摆”、“那个动画怎么做”所困扰。2.2 技术栈的深度考量Vite, Vue 3 与 UnoCSS项目作者 Anthony Fu 是 Vite 和 Vue 生态的核心成员这个项目的技术选型也充分体现了现代前端开发的“最佳实践”。Vite 作为构建工具 相比于传统的 WebpackVite 在开发阶段基于原生 ES 模块实现了秒级的热更新。对于这种内容驱动、需要频繁调整数据并预览效果的场景Vite 的快速反馈循环体验是无与伦比的。在构建生产版本时它又基于 Rollup 进行高效的打包输出优化的静态文件。Vue 3 与script setup 项目使用了 Vue 3 的组合式 API 和script setup语法糖。这使得组件逻辑更加紧凑和清晰。例如处理技能数据过滤、排序的逻辑可以用computed属性非常优雅地实现代码的可读性和可维护性很高。UnoCSS 作为原子化 CSS 引擎 这是项目在样式上的一个亮点。UnoCSS 允许你直接在 HTML/模板中使用简短的、功能性的类名来定义样式如text-blue-500,p-4。在这个项目中它被用来快速构建响应式布局和微调样式。它的按需生成特性确保了最终打包的 CSS 体积最小化只包含你用到的样式。注意 虽然项目使用了这些较新的技术但它的架构并不复杂。即使你对 Vue 3 或 UnoCSS 不熟悉也完全不影响你使用它。因为你 99% 的时间只会和那个 YAML 配置文件打交道。2.3 技能数据的结构化设计我们来看看skills.yml文件是如何设计的。这是整个项目的灵魂。categories: - name: Languages skills: - name: JavaScript level: 5 description: My primary programming language for both frontend and backend. url: https://developer.mozilla.org/en-US/docs/Web/JavaScript icon: vscode-icons:file-type-js-official这是一个典型的技能项结构。我们来拆解每个字段的意图categoriesname: 用于对技能进行分组如“编程语言”、“前端框架”、“工具”等使展示更有条理。skills.name: 技能的名称。skills.level:核心字段代表熟练度通常用 1-5 的数字表示。这个数字会直接映射到 UI 上的进度条长度或星星数量。如何定义这个等级项目没有硬性规定这完全取决于你的个人标准。例如你可以定义1了解概念3能在项目中应用5精通能解决深层次问题。skills.description: 可选的描述可以写得更具体比如“擅长使用 Vue 3 组合式 API 构建大型应用”。skills.url: 可以链接到该技术的官方文档、你写的相关博客或一个代表性的项目增加可探索性。skills.icon: 使用图标来可视化技能。项目通常集成Iconify你可以使用来自几十个图标集的数百万个图标格式如前缀:图标名。这种结构既保证了灵活性你可以为任何技能添加丰富的信息又保持了简洁性最基本的只需要name和level。3. 从零开始部署你的个人技能页3.1 环境准备与项目初始化假设你已经在本地安装了 Node.js (推荐 18 版本) 和 Git并且有一个 GitHub 账号。Fork 与克隆 首先访问https://github.com/antfu/skills点击右上角的 “Fork” 按钮将这个仓库复制到你自己的 GitHub 账户下。然后将你 Fork 后的仓库克隆到本地git clone https://github.com/你的用户名/skills.git cd skills安装依赖 项目使用pnpm作为包管理器你也可以用npm或yarn但pnpm速度更快且是作者推荐。npm install -g pnpm # 如果未安装 pnpm先全局安装 pnpm install这个命令会读取package.json安装所有必要的依赖包括 Vite、Vue、UnoCSS 等。启动开发服务器pnpm dev执行后终端会输出一个本地服务器地址通常是http://localhost:5173。在浏览器中打开它你就能看到项目的默认页面了。此时你对skills.yml文件所做的任何修改保存后都会在页面实时热更新让你立刻看到效果。3.2 核心配置编辑skills.yml文件现在打开项目根目录下的skills.yml文件。你可以先清空里面的示例内容从头开始构建你自己的技能树。第一步规划你的技能分类在动手写之前建议先在脑子里或纸上做个简单的规划。常见的分类有Languages(编程语言)Frontend(前端框架/库)Backend(后端技术)Databases(数据库)DevOps Tools(开发运维与工具)Design(设计)Soft Skills(软技能) – 是的这个模板也完全可以展示非技术技能第二步编写第一个分类让我们从“编程语言”开始categories: - name: Programming Languages skills: - name: Python level: 4 description: 用于数据分析、自动化脚本和后端开发。 # 从 https://icon-sets.iconify.design/ 查找图标 icon: vscode-icons:file-type-python url: https://www.python.org/ - name: TypeScript level: 5 description: 现代前端开发的基石享受其类型系统带来的开发体验。 icon: vscode-icons:file-type-typescript-official url: https://www.typescriptlang.org/ - name: Go level: 3 description: 正在学习用于构建高性能的 CLI 工具和微服务。 icon: devicon:go保存文件回到浏览器你应该立刻能看到“Programming Languages”这个分类下面列出了 Python、TypeScript 和 Go 三项技能并且有对应的进度条根据 level 值和图标。第三步丰富内容与图标技巧图标Icon 这是让页面变得美观的关键。项目使用了 Iconify。访问 Iconify 图标集 你可以搜索任何技术名词比如 “vue”, “react”, “docker”, “aws”。找到喜欢的图标后注意看它的标识符格式是集合前缀:图标名。例如logos:vue来自 Logos 集合simple-icons:github来自 Simple Icons 集合专门用于品牌 Logo。描述Description 不要只写“我会XXX”。尝试写得具体、有场景。例如不说“会使用 Docker”而说“使用 Docker 容器化部署 Node.js 和 Python 应用编写多阶段构建优化镜像体积”。这能更好地传达你的经验深度。等级Level 诚实评估。这是一个给自己看的“能力地图”过于夸大或贬低都没有意义。可以定一个自己的标准并保持所有技能评估尺度一致。3.3 个性化定制与样式调整基础数据填充完成后你可能想让它看起来更“像你自己的”。修改站点信息 打开index.html你可以修改title标签里的内容以及一些 meta 标签中的描述这会影响浏览器标签页显示的名字和搜索引擎摘要。 更常见的配置在src/config.ts或src/constants.ts这样的文件中具体位置取决于项目版本。你可能在这里找到站点标题、描述、主题色等配置项。修改它们以匹配你的个人品牌。调整布局与组件 项目的 UI 组件通常位于src/components/目录下。例如你可能想修改SkillCategory.vue来改变每个分类卡的样式或者修改SkillItem.vue来调整每个技能项的渲染方式比如把进度条改成星星。这需要一些 Vue 组件开发的基础知识。简单调整 如果你只是想改颜色、间距可以查看组件内的style部分或使用的 UnoCSS 类名。UnoCSS 的类名是自解释的比如p-4是 padding: 1remtext-xl是字体加大。进阶修改 如果你想改变数据结构比如为技能添加“开始学习日期”字段你需要同时修改 YAML 中的数据格式、以及读取并展示这个数据的 Vue 组件逻辑。部署到 GitHub Pages (或任何静态托管服务) 这是让你的技能页面被公众访问的关键一步。构建 在项目根目录运行pnpm build。这个命令会执行优化并将最终生成的静态文件HTML, CSS, JS输出到dist目录。部署最简单的方式 使用 GitHub Actions。项目很可能已经配置好了.github/workflows/deploy.yml这样的工作流文件。你只需要确保你的仓库设置中Settings - Pages - Build and deployment - Source选择为GitHub Actions。之后每次你向main或master分支推送代码Action 会自动运行pnpm build并将dist目录的内容部署到 GitHub Pages。手动部署 将dist文件夹里的所有内容复制到你任何静态托管服务如 Vercel, Netlify, Cloudflare Pages的项目根目录下即可。这些平台通常提供与 GitHub 仓库的自动集成关联后也能实现自动部署。4. 高级用法与扩展思路4.1 实现技能数据的动态化与自动化静态的 YAML 文件很棒但如果我们能让部分数据“活”起来岂不是更酷这里有一些思路从 GitHub API 获取数据 你可以写一个简单的脚本比如用 Node.js定期调用 GitHub API获取你的仓库语言统计、最近的贡献记录等信息然后自动更新skills.yml中相关技能的level或description。例如根据你过去一年在 JavaScript 和 TypeScript 仓库的代码提交比例动态调整这两项技能的等级。// 伪代码示例一个简单的更新脚本 import { Octokit } from octokit; import fs from fs; import yaml from js-yaml; const octokit new Octokit({ auth: 你的GitHub Token }); // 1. 获取用户仓库的语言分布 // 2. 解析数据计算权重 // 3. 读取现有的 skills.yml // 4. 根据新数据更新对应技能的 level // 5. 写回 skills.yml // 6. 提交更改到仓库触发自动部署你可以把这个脚本放在 GitHub Actions 的定时任务schedule里每周或每月自动运行一次。集成博客或项目数据 如果你的博客有 RSS或者你的项目有一个集中的列表文件也可以编写脚本解析这些内容提取技术关键词来丰富或验证你的技能列表。4.2 设计更复杂的技能关系图谱目前的展示是简单的分类列表。你可以扩展它以展示技能之间的关系。技能依赖关系 在skills.yml中为每个技能项增加一个prerequisites字段列出需要先掌握的技能。然后在前端你可以使用一个力导向图库如 D3.js 或 vis-network来可视化这些依赖关系形成一个真正的“技能树”或“学习路径图”。时间轴视图 为技能增加startedAt(开始学习时间) 和lastUsed(最后使用时间) 字段。这样你可以生成一个技能掌握程度随时间变化的时间轴视图直观地展示你的技术成长轨迹。熟练度雷达图 将不同分类的技能等级汇总用雷达图来展示你在各个技术领域的综合能力轮廓。这非常适合在简历摘要中提供一个快速的“能力快照”。这些扩展需要你修改数据结构和前端组件难度有所增加但能极大提升这个“数字名片”的信息维度和表现力。4.3 将其集成到个人门户网站antfu/skills本身是一个独立的页面。但通常我们会希望它作为个人网站的一个板块存在。作为子页面/子路由 如果你的个人网站是用 Nuxt.js、Next.js 或 Astro 等框架构建的你可以将skills这个项目作为一个独立的“应用”嵌入。一种常见做法是将构建后的dist文件夹内容放在你主站点的某个目录下如/static/skills/然后通过一个 iframe 或者直接链接过去。更优雅的方式是将skills的 Vue 组件直接封装成你主站项目的一个组件或页面。微前端方式 如果你的技术栈支持可以考虑使用微前端架构将技能页面作为一个独立的微应用加载。但这对于个人项目来说可能过于复杂。最简单的链接 在个人网站的导航栏添加一个“Skills”链接直接指向部署好的antfu/skills页面。虽然体验上有点跳转但实现成本为零。5. 常见问题与实战避坑指南在实际使用和模仿这个项目的过程中我遇到并总结了一些典型问题。5.1 配置与开发环境问题Q1: 运行pnpm dev后页面空白或报错检查Node版本 确保你的 Node.js 版本符合项目要求查看package.json中的engines字段或.nvmrc文件。使用node -v检查版本过低可能导致依赖无法正确安装。清除依赖重装 删除node_modules文件夹和pnpm-lock.yaml/package-lock.json文件然后重新运行pnpm install。依赖安装冲突是常见问题。检查端口占用 Vite 默认使用 5173 端口。如果该端口被其他程序占用会导致失败。你可以通过pnpm dev --port 3000指定另一个端口。Q2: 图标不显示或者显示为一个方框确认图标标识符 这是最常见的原因。务必从 Iconify 官网复制完整的图标 ID格式必须是集合前缀:图标名。注意大小写和拼写。检查网络 开发模式下图标是从 Iconify 的 CDN 动态加载的。如果你的网络环境访问该 CDN 不稳定可能会导致图标加载失败。可以考虑将常用图标本地化。本地化图标集 如果追求稳定性和速度可以安装iconify-json/系列包如iconify-json/mdi到本地并在 Vite 配置中设置使用本地图标。这会在构建时将图标打包进项目但会增加构建体积。5.2 内容与部署问题Q3: 如何客观地评估自己的技能等级Level这是一个没有标准答案但至关重要的问题。我的建议是建立一个可解释的内部标准例如Level 1 (了解) 读过文档知道基本概念能写简单的 “Hello World”。Level 2 (入门) 能在指导下完成小任务理解核心 API 的一部分。Level 3 (熟练) 能独立使用该技术完成常规项目需求能查阅文档解决大部分问题。Level 4 (精通) 深刻理解其原理和最佳实践能解决复杂问题能对他人进行指导能阅读部分源码。Level 5 (专家) 能参与核心贡献如提交重要 PR 到开源项目对该技术生态有影响力能设计基于该技术的复杂架构。关键点 保持一致性和诚实。这个等级是给你自己看的成长标尺不是吹嘘的资本。Q4: 部署到 GitHub Pages 后页面样式错乱或资源404检查 base 路径 这是静态项目部署到子路径时最常见的问题。如果你的页面访问地址是https://你的用户名.github.io/仓库名/那么在你的 Vite 配置文件 (vite.config.ts) 中必须设置base: /仓库名/。否则所有 JS、CSS 文件都会从根目录寻找导致404。// vite.config.ts export default defineConfig({ base: process.env.NODE_ENV production ? /你的仓库名/ : /, // ... 其他配置 })检查 Actions 日志 去你的仓库的 Actions 标签页查看最新的部署工作流运行日志。构建错误或部署失败的原因通常会在日志中清晰显示。清除浏览器缓存 有时只是浏览器缓存了旧版本的资源强制刷新CtrlF5或打开无痕窗口试试。5.3 维护与更新策略保持技能树的“活力”定期回顾 设定一个日历提醒比如每季度回顾一次你的skills.yml。问自己过去三个月我用到了哪些新工具对哪些技术的理解加深了哪些技术已经生疏了然后相应地进行增、删、改。项目驱动更新 每完成一个重要的个人或工作项目就花10分钟更新一下技能树。把项目中用到的核心技术、遇到的挑战和解决方案提炼成对技能等级和描述的更新。这能让你的技能树成为一份动态的“项目成果映射”。版本化你的能力 你可以利用 Git 的版本控制功能。每次大的技能树更新都做一次有意义的提交如 “feat: 添加云原生技能并更新K8s等级至4”。这样你的技能演进历史本身就成了一份宝贵的学习和成长记录。最后我想分享一点个人体会。像antfu/skills这样的项目其价值远不止于生成一个好看的页面。它强迫你以一种结构化的方式去思考、梳理和量化自己的知识体系。这个过程本身就是一种极好的学习和复盘。当你看着那张由你自己定义、自己维护的技能图谱逐渐丰满和清晰时获得的成就感和方向感是任何静态简历都无法给予的。它不再是一个需要被动填写的表格而是一个伴随你职业生涯共同成长的、活生生的数字伴侣。