企业官网建设流程全解析

这两年技术圈里，越来越多开发者开始关注“技能成长可视化”这个话题。很多人学前端、学后端、学工程化，今天刷一篇博客，明天看一个视频，学得很零散，回头一问又好像什么都没掌握。ConardLi 的 garden-skills 项目，正是从这个问题出发，把“技能”当成“花园”来经营，用一套结构化的方式记录、追踪和沉淀自己的技术能力地图。这篇文章会围绕 garden-skills 的核心思路、项目解析、本地运行方式，以及如何基于它构建属于自己的技能成长体系展开，内容偏实战，新手也能按步骤操作。

这个项目尤其适合四类人：正在规划前端学习路线的初学者、想把零散知识系统化的中高级开发者、需要做团队技术规划的前端负责人，以及关注开源项目组织方式、想做类似“技能地图”工具的技术爱好者。读完本文，你不仅会理解 garden-skills 的定位和设计逻辑，还能在本地跑起来，并基于自己的技术栈定制一份可长期维护的技能花园。

1. 背景与核心概念

1.1 为什么需要“技能花园”

先来说一个常见的场景。假设你是一名前端工程师，今天学了一个 Vue 组件通信技巧，明天研究了一下 Webpack 打包优化，后天又看了看 TypeScript 体操。三个月过去，你觉得自己好像什么都碰过，但面试官一问“你熟悉哪些前端性能优化手段”，你只能说出一两个零散的点，说不出一条完整的知识链路。

原因是缺乏沉淀和结构化。技能在没有被记录和整理之前，只是大脑里的短期记忆。短期记忆会随着时间快速衰减。garden-skills 想要解决的问题，就是让技能像花园里的植物一样，被分门别类地种下去，被持续浇水、修剪、观察，最终形成一片有秩序、可生长的知识生态。

把技能比作花园，是一个非常形象的说法。花园里有不同的区域：有的区域种花，有的区域种蔬菜，有的区域留给草坪。对应到技能体系中，就是不同的技术领域：基础语言、框架、工程化、性能优化、可视化、Node.js、团队协作等等。每一株植物有自己的生长周期，对应到技能点上，就是“未开始”、“学习中”、“已掌握”、“熟练应用”、“可教授他人”这样的状态。

1.2 garden-skills 是什么

garden-skills 是 ConardLi 维护的一个开源项目，它本质上是一个基于前端技术实现的“技能清单 / 技能地图”工具或内容仓库。项目的核心不是提供一个“标准答案式”的技能列表，而是倡导一种不断更新、不断演进的技能管理方法。

从项目名称来看，“garden”强调的是持续经营，“skills”强调技能本身。合在一起，就是“像照料花园一样照料你的技能树”。这种思想其实和知识管理里的“数字花园”（Digital Garden）概念一脉相承。数字花园不追求文章一定要写完、一定要完美，而强调不断编辑、不断生长、不断链接。garden-skills 把这种理念应用到了技术技能管理上。

Garden-skills 从工程实现上，通常包含两部分：

• 技能数据的组织方式：通过结构化文件维护技能分类、技能点、状态、资源链接等信息。
• 前端展示层：把结构化的技能数据渲染成可视化的页面，方便浏览和分享。

由于开源项目会不断迭代，具体目录结构以仓库为准。下面我会给出一种通用的数据组织和前端工程方式，帮助你理解整体思路。

1.3 garden-skills 解决的核心痛点

结合大量开发者的反馈，garden-skills 这类项目主要解决以下痛点：

从这里可以看出，garden-skills 不仅仅是一个“待办清单”，它背后是一套个人知识管理的实践方法论。

2. 项目核心功能与设计思想

2.1 技能的“生命周期”管理

在 garden-skills 中，每一个技能点都不是固定不变的，而是有生命周期的。

可以把技能状态设计为以下几个阶段：

• 未开始（seed / dormant）：表示这个技能点已经收录，但还没有投入学习。它像一颗种子，躺在土壤里等待时机。
• 学习中（growing / budding）：表示正在投入精力。
• 已掌握（blooming）：表示基本掌握了核心概念，能在实践中应用。
• 熟练（fruitful / evergreen）：表示可以灵活运用，能解决复杂问题，甚至能给别人讲解。

这种生命周期管理的好处是，每当你打开技能花园，就能一眼看出自己的精力应该放在哪里。对于“未开始”的技能，你可能暂时不需要关注；对于“学习中”的技能，应该分配固定时间；对于“已掌握”和“熟练”的技能，重点是复习和深化，而不是盲目地继续搜集新资料。

2.2 技能的“生态”分类

技能花园不是把所有东西堆在一起，而是有清晰的区域划分。一个典型的前端工程师技能分类可能包括：

1. 基础语言：HTML、CSS、JavaScript、TypeScript。
2. 框架与生态：React、Vue、Angular，以及对应的路由、状态管理、组件库。
3. 工程化：Webpack、Vite、Babel、ESLint、Prettier、Monorepo 工具。
4. 运行环境：浏览器原理、Node.js、Deno、Serverless。
5. 性能优化：加载性能、运行时性能、网络优化。
6. 可视化与图形：Canvas、SVG、WebGL、D3.js、ECharts。
7. 工程效率：调试、测试、CI/CD、自动化工具。
8. 软技能：代码评审、技术写作、沟通协作、技术规划。

当然，这只是一个参考。每个人的技术栈不同，合理的方式是基于自己的业务方向和目标岗位去裁剪。garden-skills 的价值在于给了你一个框架，让你可以把自己的技能点有秩序地放进去。

2.3 数据驱动的内容组织方式

garden-skills 适合采用“数据驱动”的方式组织内容。也就是说，技能数据不写死在页面上，而是通过结构化的数据文件（JSON、YAML、Markdown 等）来维护，前端负责读取数据并渲染。

这个设计的好处非常明显：

• 更新成本低：修改一个 JSON 字段，比改前端组件要快得多。
• 易于 Git 追踪：每次技能状态变化，都能通过 Git 历史看到。
• 便于自动化：未来可以接入 GitHub Actions，实现定时提醒、数据统计。
• 降低协作门槛：不会前端的同学也能通过编辑数据文件参与贡献。

3. 环境准备与本地运行

3.1 环境要求

要把 garden-skills 在本地跑起来，通常需要准备以下环境。需要注意，这里的版本只是通用建议，具体版本要求以你 clone 下来的仓库 README 为准。

如果你的电脑上没有安装 Node.js，可以去官网下载 LTS 版本。安装完成后，在命令行工具里运行下面的命令验证环境：

node -v npm -v

只要能看到版本号输出，就说明环境没问题。

3.2 克隆项目到本地

首先，把项目克隆到本地。如果你打算后续参与贡献，建议先 Fork 一份到自己仓库，再克隆自己仓库的地址。如果只想本地体验，直接克隆原始的仓库地址就行。假设你把项目放在~/workspace目录下：

cd ~/workspace git clone https://github.com/your-username/garden-skills.git cd garden-skills

这里把your-username替换成你自己的 GitHub 用户名。如果只是体验，也可以直接使用原始仓库的地址。

3.3 安装依赖并启动项目

进入项目目录后，先看一下项目结构。通常前端项目会有一个根目录，里面包含源代码、配置文件和依赖声明文件。

ls -la

典型的前端工程结构如下：

garden-skills/ ├── src/ │ ├── components/ # 组件目录 │ ├── data/ # 技能数据目录 │ ├── pages/ # 页面目录 │ └── App.tsx # 入口组件 ├── public/ ├── package.json ├── README.md └── tsconfig.json

安装依赖，可以用npm或pnpm。这里给出两种常用命令：

# 使用 npm npm install # 或者使用 pnpm（如果项目里有 pnpm-lock.yaml，优先使用 pnpm） pnpm install

安装完成后，运行本地开发服务：

npm run dev # 或者 pnpm run dev

启动成功后，命令行一般会输出一个本地地址，比如http://localhost:5173或http://localhost:3000。在浏览器中打开这个地址，就能看到 garden-skills 的界面了。

稍等几秒，页面会渲染出技能花园的完整视图。如果端口被占用了，项目一般会自动加一，比如从 5173 变成 5174，控制台也会有提示。

3.4 构建生产版本

如果你想把 skill garden 部署到 GitHub Pages 或其他静态服务器，通常需要执行构建命令。构建后的文件会输出到dist目录。

npm run build

构建完成后，检查一下dist目录：

ls -la dist/

dist目录里的文件就是纯静态资源，可以上传到任意静态服务器，或者通过 GitHub Pages 发布。

构建命令细节可能因项目而异，比如有些项目需要先配置base路径才能部署到 GitHub Pages 子路径。这点在使用时注意看 README 的部署说明。

4. 数据与配置结构解析

4.1 技能数据的基本结构

garden-skills 的实际数据格式以仓库为准，但为了帮助你快速理解，我会给出一种通用的、可扩展的结构设计。一个技能分类可以表示为：

{ "category": "前端基础", "description": "所有前端工程师都需要掌握的基础能力", "skills": [ { "name": "HTML", "status": "blooming", "level": 3, "resources": [ "https://developer.mozilla.org/zh-CN/docs/Web/HTML" ], "notes": "重点关注语义化、SEO 和可访问性。" }, { "name": "CSS", "status": "growing", "level": 2, "resources": [], "notes": "需要强化 Flex 和 Grid 布局能力。" } ] }

4.2 字段说明

• category：技能分类名称。这个字段决定了在花园界面中，技能出现在哪个区域。
• description：分类描述，用于帮助阅读者理解这个分类的范围。
• skills：技能点数组。
  • name：技能名称。
  • status：技能状态。可以是seed（未开始）、growing（学习中）、blooming（已掌握）、evergreen（熟练）。
  • level：熟练度的数值化表示，比如 1 到 5。
  • resources：学习资源链接数组。
  • notes：个人备注，比如对这个技能的心得、待解决问题、下一步计划。

4.3 使用 TypeScript 类型约束数据

如果项目使用 TypeScript，你可以为上面的数据定义一个类型，让编辑器能自动补全和类型检查：

// 文件路径：src/types/skill.ts export type SkillStatus = 'seed' | 'growing' | 'blooming' | 'evergreen'; export interface Skill { name: string; status: SkillStatus; level: number; resources?: string[]; notes?: string; } export interface SkillCategory { category: string; description: string; skills: Skill[]; }

定义好类型后，在渲染组件中读取数据时，就能得到提示：

import type { SkillCategory } from '../types/skill'; import data from '../data/skills.json'; const categories: SkillCategory[] = data;

这样做的好处是可以减少低级错误。写错一个状态值，TypeScript 会立刻给出提示，而不是等渲染页面时才发现问题。

4.4 技能状态的展示逻辑

前端页面根据status字段决定每个技能点的展示样式。例如：

• seed：灰色，表示种子阶段。
• growing：黄色或绿色，表示正在生长。
• blooming：粉色或蓝色，表示开花阶段。
• evergreen：深绿色，表示常青、稳定。

这部分逻辑通常封装在组件中。下面是一个简单的 React 示例，供参考：

// 文件路径：src/components/SkillBadge.tsx import type { SkillStatus } from '../types/skill'; const statusMap: Record<SkillStatus, string> = { seed: '未开始', growing: '学习中', blooming: '已掌握', evergreen: '熟练' }; export function SkillBadge({ status }: { status: SkillStatus }) { return ( <span className={`badge badge-${status}`}> {statusMap[status]} </span> ); }

这里需要说明的是，具体组件的写法、样式类名都会因项目而异。上面代码的核心思路是：通过一个映射表把状态值转换为用户可读的中文文案，再结合 CSS 类名做视觉区分。如果你要改造自己的版本，可以参考这个思路，但不要直接照搬类名。

5. 实战：从 Fork 到自定义技能花园

接下来，我们动手把 garden-skills 变成自己的“技能花园”。整个流程分为五步。

5.1 第 1 步：Fork 并克隆仓库

先在 GitHub 上打开 garden-skills 仓库，点击右上角的 Fork 按钮，把它复制到自己的账号下。Fork 的作用是创建一个独立副本，你可以自由修改，而不影响原始仓库。

然后克隆自己账号下的仓库：

git clone https://github.com/<your-username>/garden-skills.git cd garden-skills

克隆完成后，为原始仓库添加一个 upstream 源，方便以后同步上游更新：

git remote add upstream https://github.com/ConardLi/garden-skills.git git remote -v

添加 upstream 后，你仍然可以定期拉取原始项目的新内容，保持自己的分支跟上社区节奏。

5.2 第 2 步：创建自己的分支

不要直接在 main 分支上修改。建议为自定义技能库创建一个独立分支：

git checkout -b feat/my-skill-garden

分支命名可以按照你的习惯，但建议见名知意。feat/my-skill-garden表示这是一个新功能：我的技能花园。

5.3 第 3 步：修改技能数据

根据项目使用的数据格式，修改技能数据文件。如果项目使用src/data/skills.json，你可以打开这个文件，把里面的技能内容替换成自己的。

不需要一次性把所有技能写全。刚开始可以只维护一个精简版，比如先写 3 到 5 个分类，每个分类 3 到 5 个技能点。重点是把流程跑通，之后再逐步补充。

一个建议是：把状态设置为seed的技能也写进去。这相当于“预定了一个坑”，能提醒自己未来这里有什么作业要做。

修改完数据后，启动开发服务：

npm run dev

在浏览器里刷新页面，检查你的技能数据是否正常渲染。

5.4 第 4 步：定制页面样式

如果你觉得默认样式不够有个人特色，可以修改全局样式文件。通常前端项目的全局样式会放在src/styles或src/index.css中。简单的方式是修改主题色：

/* 文件路径：src/styles/index.css */ :root { --color-primary: #2f855a; --color-bg: #f7fafc; --color-card: #ffffff; }

这种修改方式风险低、见效快，不需要深入组件内部。

5.5 第 5 步：提交并部署

本地确认没问题后，提交代码：

git add . git commit -m "feat: 自定义我的技能花园" git push origin feat/my-skill-garden

如果你使用的是 GitHub 仓库，并且项目配置了 GitHub Pages 或支持静态部署，可以按照 README 的部署说明发布。常见的做法是在仓库设置中打开 GitHub Pages，选择对应分支；或者通过gh-pages包自动发布。

执行部署命令前，建议先检查分支名和发布脚本，避免发布错误内容到线上。

npm run deploy

有些项目会在 package.json 中配置好deploy脚本，如果没有，就参考 README 手动配置。

5.6 如何长期维护技能数据

长期维护是技能花园的核心。如果你把技能数据提交到 GitHub 仓库，那么每次更新技能状态，都是一次 Git 提交。这样你就拥有了一份完整的成长时间线。

建议维护频率：

1. 每周更新一次：把本周学到的技能点补充进去，更新状态和备注。
2. 每月复盘一次：审视整份技能地图，删除与方向无关的技能，补充新的目标。
3. 每季度大整理一次：调整分类结构，优化资源链接，重写过时的笔记。

你会发现，这种定期维护的习惯，比一次性的“大计划”有效得多。

6. 常见问题与排查思路

6.1 依赖安装失败

如果使用 npm 时安装很慢或者超时，可以切换为国内镜像源：

npm config set registry https://registry.npmmirror.com

用 pnpm 的话：

pnpm config set registry https://registry.npmmirror.com

6.2 启动端口占用

本地启动时提示端口被占用。解决方法有两个：

第一种是找到占用进程并关闭，Linux / macOS 下可以用：

lsof -i :5173

找到进程 ID 后kill <PID>。

第二种是让项目自动切换端口。大多数现代前端脚手架已经内置了这个能力，直接看控制台提示的新端口即可。

6.3 页面展示正常但技能数据未更新

修改了技能 JSON 文件，页面却没变化。这类问题通常有三个原因：

1. 修改了错误的文件：确认你编辑的数据文件确实是被页面引用的文件。
2. 浏览器缓存：强制刷新页面，比如 macOS 下用Cmd + Shift + R，Windows 下用Ctrl + Shift + R。
3. Dev Server 未检测到文件变更：重启一下npm run dev。

6.4 构建后部署到 GitHub Pages 样式丢失

如果项目部署到https://username.github.io/repo-name/这种子路径，而构建脚本没有设置base，静态资源路径就会错误，导致样式丢失。

解决方法是修改前端项目的构建配置，把 base 设置为仓库名。以 Vite 为例：

// 文件路径：vite.config.ts export default defineConfig({ base: '/garden-skills/', // ...其他配置 })

注意，这个值要根据你的仓库名和部署路径修改，不同项目配置方式差异很大。改完配置后，重新构建并部署。

7. 工程与学习最佳实践

7.1 用版本管理沉淀技能成长轨迹

技能花园不建议只停留在本地笔记里，最好纳入 Git 管理。每次状态变化都产生提交记录，这能让你在几个月后回看时，准确知道自己每个阶段在学什么、投入了多少精力。

推荐的提交规范：

7.2 给技能点设置清晰的“验收标准”

这是很多技能清单类项目容易忽视的一点。很多人的技能列表写着“掌握 React”，但这个表述太模糊，很难判断到底掌握了没有。更合理的做法是给关键技能点添加验收标准。

比如：

• HTML 语义化的验收标准：能说出 article、section、aside、nav 的使用场景；能给现有页面重构出语义清晰的骨架。
• Flex 布局的验收标准：不查文档，能实现 7 种常见布局（水平居中、垂直居中、圣杯布局等）。
• Webpack 的验收标准：能从头配置一个支持 TypeScript、CSS Modules、静态资源处理的最小构建，并解释每个 loader 的作用。

把验收标准写进notes字段，技能状态就不会变成“自我感觉良好”。

7.3 借助 GitHub Actions 实现自动化提醒

如果你想让技能花园更智能，可以配置一个 GitHub Actions 定时任务。比如每周一早上自动打开一个 Issue，提醒你更新技能状态。

下面是一个简单的工作流示例：

# 文件路径：.github/workflows/weekly-reminder.yml name: Weekly Skill Reminder on: schedule: - cron: '0 1 * * 1' jobs: create-issue: runs-on: ubuntu-latest steps: - uses: actions/github-script@v6 with: script: | await github.rest.issues.create({ owner: context.repo.owner, repo: context.repo.repo, title: '🌱 本周技能花园维护提醒', body: '请检查你的技能数据，更新状态并补充本周新学内容。' })

生成每周提醒后，你只需要在 Issue 里贴一条简短的更新摘要，再顺手改一下技能数据，就能把“定期复盘”这个习惯真正落地。

7.4 从“收藏癖”转向“精熟导向”

不少开发者喜欢搜集资源，GitHub Star 一大堆，浏览器收藏夹几十个文件夹，但真正点开学习的很少。garden-skills 强调的“技能有生命周期”，本质上是对这种“收藏癖”的修正。

建议把学习资源分成三类：

1. 入门资源：用来快速建立概念，学完就标记为已完成。
2. 练习资源：用来动手实践，适合放在技能点的resources中。
3. 参考资源：遇到问题时再查的文档，不需要从头到尾阅读。

只有把资源和技能点挂钩，收藏夹才能真正成为你的“知识后花园”。

8. 总结与行动建议

写到这里，我们已经把 garden-skills 的核心思想、项目结构、本地运行流程、数据定制方法、常见问题和可持续维护的最佳实践都梳理了一遍。你可以先 clone 一份仓库跑起来，浏览界面，理解项目如何组织技能数据；然后把数据文件替换成自己的技能清单，从 5 个技能点起步，先跑通修改、提交、构建、部署的完整闭环；再逐步扩展分类和技能点，设置验收标准，让技能花园慢慢生长起来。

下一步，你可以去研究 ConardLi 的其他开源项目和技术文章，看看他在工程化和知识管理方面还有哪些沉淀。也可以思考如何把技能花园推广到团队——比如在前端小组内维护一份公共技能地图，用来设计培训计划、规划知识分享主题。garden-skills 给你的不只是一个 GitHub 仓库，更是一套“把学习当长期投资”的实践方式。真正的技能成长不在于收藏了多少文章，而在于你给自己的花园浇了多少次水。