三步本地跑通 freeCodeCamp 教学网站：新手完整指南

三步本地跑通 freeCodeCamp 教学网站新手完整指南【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCampfreeCodeCamp 是知名免费编程学习网站背后的开源代码库它把上千道挑战题、学习进度体系和在线编辑器打包进一个可克隆的仓库。读完这篇你会先三步把站点跑在本地再看懂课程数据管线的关键设计最后绕开新人最容易卡住的 3 个坑。先看效果三步启动本地环境启动前你不需要懂任何代码只需要 Node 24、pnpm 10 和 Docker。第一步克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/fr/freeCodeCamp cd freeCodeCamp pnpm install第二步起数据库、配好环境变量然后启动docker compose -f docker/docker-compose.yml up -d cp sample.env .env pnpm start打开 http://localhost:8000你会看到和官网一致的学习平台左侧课程列表中间挑战卡片右侧代码编辑器和测试输出面板。开发登录默认就是开着的sample.env 里的 FCC_ENABLE_DEV_LOGIN_MODE随便点开一道题在编辑器里改代码、点运行测试当场跑给你看。到这一步课程网站就不再是个名词而是你手里能戳的系统。跑起来之后你还能拿它做什么别只把它当学习网站看这个仓库是一份工程化课程站点的完整样板至少四个方向可以立刻上手改课程内容一道挑战题就是 curriculum/challenges/english/blocks/ 下的一个 Markdown 文件front matter 里定义题目和测试改完重建即可生效——这是贡献成本最低的入口。拆进度体系登录、答题完成、证书发放全在 api 里进度判断集中在 api/src/utils/progress.ts顺着它能摸清楚进度条和证书是怎么算出来的。看多语言与测试管线仓库维护 12 种语言e2e/ 目录里 80 多个 Playwright 用例覆盖从登录到拿证书的完整链路是研究大型 monorepo 怎么做测试的现成教材。体验每日挑战tools/daily-challenges/ 提供种子脚本本地就能造出每日一题数据理解定时内容是怎么灌进数据库的。拆开看看三个关键设计决策课程是数据不是代码。内容分三层Markdown 挑战题、curriculum/structure/ 里定义区块和 superblock 顺序的 JSON、以及把两者编译成单一 curriculum.json 的构建步骤。为什么这么拆写课的人和写前端的人可以各干各的——前者只加文件后者只消费 JSON翻译则只是多摆一个语言文件夹。前后端拆开用 Turbo 串起来。client 是 Gatsby 站点8000 端口api 是 Fastify 服务3000 端口两者走 HTTP 通信根目录 turbo.json 规定 setup → build → develop 的执行顺序改动一个包不会连带另一个重新构建。拆成两个进程的原因也直白生产环境静态站点可以放 CDN而 API 要管会话扩容需求完全不同。数据库能从源码重灌。docker/docker-compose.yml 里的 MongoDB 自带副本集初始化seed 脚本负责把课程灌库并创建演示用户。好处是你本地库结构和生产一致不会被本地好好的一上线就报错这类问题咬到。新手最容易卡住的几点1. pnpm install 报 workspace 依赖找不到。现象freecodecamp/shared 之类的包解析失败。根因monorepo 用 pnpm 的 workspace:* 协议npm 和旧版 pnpm 都不认。解法corepack enable 切到 pnpm 10全程只用 pnpm 跑命令。2. 页面能开但搜索框没反应。现象搜索无结果也不报错。根因.env 里 Algolia 密钥是占位值服务端检测到占位符会静默置空。解法不调搜索就忽略它不影响学课要调试就填自己的密钥。3. 第一次 pnpm start 半天没动静。现象启动卡住十几分钟。根因setup 阶段要依次生成 i18n、搜索占位、外部课程数据Gatsby 首编还预留了 7168MB 内存。解法首次耐心等之后有 Turbo 缓存速度完全不是一个问题。玩出花样写一道自己的挑战题用 tools/challenge-helper-scripts/ 里的 create-next-challenge 脚本起个文件写完跑一遍 lint 和构建完整走通内容 → 校验 → 编译。重排学习路径打开 curriculum/structure/curriculum.json把两个 block 换个位置观察学习顺序如何跟着变。加一门语言照着 client/i18n/locales/ 的目录结构放一套翻译亲眼验证 i18n 管线如何生效。补一条端到端测试挑一个小功能写个 Playwright 用例放进 e2e/顺便搞懂那 80 多个既有用例是怎么组织的。收尾拆完这个仓库课程即数据、环境可重灌、测试分层这几件事就从概念变成了你亲手点过的按钮。现在就去克隆一份随便改一道挑战题的标题文字并让它显示在页面上——这是你进这个项目的第一步也是最值的一步。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考