随着春节的临近，忙碌了一年的小伙伴们，是不是都已经踏上了回乡的列车？我呢也终于在春节前，完成了 HelloGitHub.com 的重构。 HelloGitHub.com 是我在 2017 年的时候用 Flask+jQuery 开发的网站，最初的想法很简单就是为了 方便管理和发布《HelloGitHub 月刊》 ，上线后这一用就是 5 年。 随着编程技术的不断发展，当年构建网站用的技术栈已经有些过时了，再加上之前网站的内容是围绕月刊而不是开源项目构建，很难再开发更多的功能，很大程度上限制了它的发展。所以我在 2022 年初的时候，决定彻底重构 HelloGitHub 网站，将它做成一个围绕开源项目的社区，用户可以在里分享、评论、打分开源项目，就像 开源项目的豆瓣 。 经过一年的努力，全新的 HelloGitHub.com 社区终于顺利上线，我是越用越顺手、越看越喜欢，虽然她入世未深还有很多不足之处，但俗话说的好＂丑媳妇总得见公婆＂，而且这不是快过年了嘛，也是时候介绍给大家认识了。 下面，就让我带大家走进这个专注于开源领域、类开源版豆瓣的开源社区——HelloGitHub 一、不破不立 我建立 HelloGitHub 的初衷很简单，就是想 让优秀的开源项目被更多人发现和喜欢 ，随着开源的蓬勃发展，优秀的开源项目如雨后春笋般层出不穷。每月一期的 HelloGitHub 月刊，每期收录的项目从第一期不到 20 个，现在已经提高到了近 40 个，但是就算是这样还是有很多 优秀的开源项目，会因为月刊的篇幅有限而无法入选 。 既然月刊限制了推荐开源项目的数量，那我就将月刊页面打散做成信息流的样子。这样虽然月刊收录的项目有限，但那些没有收录到月刊的开源项目，也能出现在 HelloGitHub 网站的首页，让更多人看到。 所以，我就把 HelloGitHub 网站的「首页」改成了信息流，这里不仅有月刊中的项目，还有未能入选月刊但同样优秀的开源项目。这样一来，用户不仅可以看到更多的开源项目，同时也 可以让没能入选月刊的开源项目，获得流量和关注 。 为了做出上述的功能，我需要将原本核心的月刊表和开源项目表进行重新设计。因为，之前 HelloGitHub 的数据都是围绕月刊，像 Star 数、链接等开源项目的信息，只能算是月刊内容的扩展项。现在要倒过来将月刊内容变成开源项目的扩展内容。 这就相当于 把月刊打散，最小单位从月刊改成开源项目 ，从而实现围绕开源项目的首页信息流，以及根据标签过滤开源项目、搜索等功能。 二、相辅相成 接下来，随着项目的独立「开源项目详情页」也就顺势而生，用户可以在这里查看更多关于该项目的信息，比如：项目评分、是否包含中文、主要的编程语言、是否活跃和开源协议等。 除此之外，还可以执行点赞、收藏、分享、访问项目、评论、评分等操作。 用户是社区的核心，用户对开源项目的评价是这个社区的价值所在。经过一番思考和调研，我又重新设计和修改了一版「详情页」， 突出了用户最常用的访问项目操作，最关心的评分，并将点赞、评分等操作变得更加醒目 。 如果将 GitHub 上的开源项目信息比作 产品成分表 ，那么 HelloGitHub 上的标题、附加描述、用户点赞、评论和评分就是 产品包装 。我认为大多数开源项目作者都是程序员，他们喜欢醉心于项目的研发，但不愿花力气去想宣传语、写文案、做推广。 既然如此，我就想出了一个组合： 你负责用代码改变世界，HelloGitHub 来为你带上奖章 。所以我做了「网站徽章」的功能，用户可以通过一键复制代码，将项目在 HelloGitHub 获得的点赞数展示出去，并且点击该徽章后可直接进入到开源项目的详情页，开源项目的潜在用户不仅可以方便地查看其它使用者的评价，还可以留下自己对开源项目的看法。 我经常说＂不懂编程的人也可以为开源做贡献＂， 在 HelloGitHub 一个点赞、一个评论、一个分享，都是在为你喜欢的开源项目做贡献 。 三、以旧换新 这次网站改版的幅度有些大，导致有的老用户刚进来有些懵，找不到之前用的功能了。其实旧功能一个都没有少，我只是将他们的入口整齐地放在了 header。 不仅如此，我还对旧网站的月刊、编程语言排行榜、文章等模块做了移动端适配。 以及一些细节优化，比如：月刊内的目录、期数选择、增加了详情页的入口等。 网站还增加了黑暗模式，需要登录后才能看到切换黑暗模式按钮，就在用户头像的旁边。 除此之外，这里还展示了用户等级和贡献值，下面介绍下获得贡献值的 2 种方式： 发布评论 分享项目 分享项目的按钮分别在首页「提交项目」和月刊「推荐」，现在分享开源项目时只要 输入想要分享的项目链接，就能立刻检测出项目是否被推荐过 ，不仅可以有效地防止项目重复推荐，还可以避免最后提交时才发现项目已经推荐过，白写推荐语的悲剧。 重头戏来了，通过「我的主页」可以进入到个人首页，这里有你的 贡献值动态、评论记录、收藏的项目 ，而且收藏夹不仅可以自己看，还可以支持「公开收藏夹」从而让更多人看到你精选的开源项目集。 四、群策群力 至此，HelloGitHub 社区的功能就介绍完毕了，下面聊一聊网站背后的技术栈、开发过程和贡献者们。 HelloGitHub 一共由 4 个项目组成： Geese：社区前端（Next.js+Tailwind CSS） Pangu：后端接口服务（FastAPI） Taichi：后台管理前端（Antd Pro） Sand：爬虫（Requests+rq） Taichi：后台管理 2022 年初，我下定决心要重构 HelloGitHub.com 的时候，做的第一件事是重启管理后台的 Taichi 项目，因为这样不会影响还在运行的网站。目标是将管理后台的功能做成前后端分离，并且实现用它制作并发布月刊。 Taichi 创建于 3 年前是网站的管理后台，用的还是老版的 Antd Pro V2，基本处于荒废的状态。一开始我和猴子在旧的项目上开发，进度十分缓慢。后来项目新来了一位叫 我是油条 的前端同学，贡献了几个功能后，开始吐槽项目的 antd pro 太老了，想要升级一下。 我同意了，但讲真的我根本没抱什么希望，思想上的巨人行动上的矮子我见多了，结果当天下午他就用 V5 将 Taichi 重写了一遍。虽说我被啪啪啪地打脸，但还是开心地笑出了猪声。这个沉寂了多年项目，终于要开足马力往前冲了！ 后面的三个月，我就专心写产品文档和接口，油条负责写前端，在 6 月份的时候，我如愿以偿地在 Taichi 上面制作并发布了《HelloGitHub》第 75 期月刊。 再次感谢 我是油条 让我在有生之年可以用 Taichi 出月刊。 Geese：社区前端 用新的管理后台发完月刊后，我又马不停蹄开始了新的项目：Geese 社区前端。 因为新社区也要做成前后端分离，再加上我想将部分页面（月刊）做成服务器端渲染(SSR)，所以最终就选择了基于 React 的 Next.js 框架。然后原子 CSS 框架在国外比较火，我一想反正我也不会 CSS，用哪个都得现学，索性就用最新、最流行的吧！所以最后项目的 采用了 TypeScript+Next.js+Tailwind CSS 技术栈 。 项目地址：github.com/HelloGitHub-Team/geese 万事开头难，我花了一周时间，边看 Next.js 和 Tailwind 的文档边搭建项目。 我自己一个人开发实在是太慢了，所以 7 月份的时候，我写了篇文章《求助！网站重构需要帮手》寻求帮助，众多大神纷纷伸出援助之手，有人贡献代码、有人修复 bug、有人帮忙部署。六个月后的 Geese 共有 400+ commit，7 位贡献者， 感谢各位的帮助，你们每一位都是我的英雄 ！ 这里要特别感谢 RJM1996(如故)和 zhangzhonghe(被雨水过滤的空气)两位贡献者，他们完成了项目收藏、评论、月刊等核心功能。没有你们的参与和支持，我无法顺利完成 Geese。 后端和数据处理 最后说一下数据这块，后端和爬虫这块由我一个人开发完成，没什么可说的。 主要的困难在数据处理这块，为了更好地介绍开源项目，我为项目增加了更多的相关信息，比如：标题、标签、官网和文档链接等。这些都需要人工一个个处理，这个时候我们熟悉的小鱼干就来帮忙啦！但架不住项目太多，目前还差 1500 多个项目没处理。 这些未处理的项目，因为信息不全所以没有详情页，这就是为什么 明明有的项目在月刊中，但是就是搜索找不到的原因 。现在网站一期的功能已经开发完，后面我会全力梳理已有的开源项目，争取在 3 月份的时候全部搞定！ 另外，因为登陆从之前的 GitHub 授权换成了微信授权，这是两套完全不同的用户系统，无法自动关联。所以老网站的用户数据需要人工迁移过来， 如果有用户想要将旧网站的收藏夹数迁移到新社区，请联系我 。 五、最后 随着，全新的 HelloGitHub.com 上线，网站也从之前单一的展示月刊内容，升级到了支持用户互动的开源社区。这是一个新的高度也是新的挑战，因为我没有运营过社区，就像五年前我没有做过站长一样。我有些忐忑，不停地刷新着网站，仿佛一切又回到了五年前，过往种种浮上心头：不破不立、相辅相成、群策群力，我的眼神逐渐变得坚定。 不忘初心，方得始终。HelloGitHub 会牢记初心，一如既往地给大家带来有趣、优秀的开源项目。 最后，感谢大家一路走来的支持和陪伴，我们年后见！ 以上就是本文的所有内容，如果您觉得这篇文章写得还不错，就请给我点一个赞，您的支持就是我更新的动力。