5

忙活了一年的开源社区,终于赶上了春节前的末班车! - 削微寒

 1 year ago
source link: https://www.cnblogs.com/xueweihan/p/17061030.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

忙活了一年的开源社区,终于赶上了春节前的末班车!

759200-20230118200027542-499987244.jpg

随着春节的临近,忙碌了一年的小伙伴们,是不是都已经踏上了回乡的列车?我呢也终于在春节前,完成了 HelloGitHub.com 的重构。

HelloGitHub.com 是我在 2017 年的时候用 Flask+jQuery 开发的网站,最初的想法很简单就是为了方便管理和发布《HelloGitHub 月刊》,上线后这一用就是 5 年。

759200-20230118210230101-939132268.png

随着编程技术的不断发展,当年构建网站用的技术栈已经有些过时了,再加上之前网站的内容是围绕月刊而不是开源项目构建,很难再开发更多的功能,很大程度上限制了它的发展。所以我在 2022 年初的时候,决定彻底重构 HelloGitHub 网站,将它做成一个围绕开源项目的社区,用户可以在里分享、评论、打分开源项目,就像开源项目的豆瓣

759200-20230118195844524-1965062621.png

经过一年的努力,全新的 HelloGitHub.com 社区终于顺利上线,我是越用越顺手、越看越喜欢,虽然她入世未深还有很多不足之处,但俗话说的好”丑媳妇总得见公婆“,而且这不是快过年了嘛,也是时候介绍给大家认识了。

地址:https://hellogithub.com

下面,就让我带大家走进这个专注于开源领域、类开源版豆瓣的开源社区——HelloGitHub

一、不破不立

我建立 HelloGitHub 的初衷很简单,就是想让优秀的开源项目被更多人发现和喜欢,随着开源的蓬勃发展,优秀的开源项目如雨后春笋般层出不穷。每月一期的 HelloGitHub 月刊,每期收录的项目从第一期不到 20 个,现在已经提高到了近 40 个,但是就算是这样还是有很多优秀的开源项目,会因为月刊的篇幅有限而无法入选

既然月刊限制了推荐开源项目的数量,那我就将月刊页面打散做成信息流的样子。这样虽然月刊收录的项目有限,但那些没有收录到月刊的开源项目,也能出现在 HelloGitHub 网站的首页,让更多人看到。

759200-20230118195848764-751769041.png

所以,我就把 HelloGitHub 网站的「首页」改成了信息流,这里不仅有月刊中的项目,还有未能入选月刊但同样优秀的开源项目。这样一来,用户不仅可以看到更多的开源项目,同时也可以让没能入选月刊的开源项目,获得流量和关注

759200-20230118195853481-1931517148.png

为了做出上述的功能,我需要将原本核心的月刊表和开源项目表进行重新设计。因为,之前 HelloGitHub 的数据都是围绕月刊,像 Star 数、链接等开源项目的信息,只能算是月刊内容的扩展项。现在要倒过来将月刊内容变成开源项目的扩展内容。

这就相当于把月刊打散,最小单位从月刊改成开源项目,从而实现围绕开源项目的首页信息流,以及根据标签过滤开源项目、搜索等功能。

759200-20230118195857551-1351435102.png

二、相辅相成

接下来,随着项目的独立「开源项目详情页」也就顺势而生,用户可以在这里查看更多关于该项目的信息,比如:项目评分、是否包含中文、主要的编程语言、是否活跃和开源协议等。

759200-20230118195901714-20828370.png

除此之外,还可以执行点赞、收藏、分享、访问项目、评论、评分等操作。

759200-20230118195906303-539527169.png

用户是社区的核心,用户对开源项目的评价是这个社区的价值所在。经过一番思考和调研,我又重新设计和修改了一版「详情页」,突出了用户最常用的访问项目操作,最关心的评分,并将点赞、评分等操作变得更加醒目

759200-20230118195911070-975988131.png

如果将 GitHub 上的开源项目信息比作产品成分表,那么 HelloGitHub 上的标题、附加描述、用户点赞、评论和评分就是产品包装。我认为大多数开源项目作者都是程序员,他们喜欢醉心于项目的研发,但不愿花力气去想宣传语、写文案、做推广。

既然如此,我就想出了一个组合:你负责用代码改变世界,HelloGitHub 来为你带上奖章。所以我做了「网站徽章」的功能,用户可以通过一键复制代码,将项目在 HelloGitHub 获得的点赞数展示出去,并且点击该徽章后可直接进入到开源项目的详情页,开源项目的潜在用户不仅可以方便地查看其它使用者的评价,还可以留下自己对开源项目的看法。

759200-20230118195915225-2036754997.png

我经常说“不懂编程的人也可以为开源做贡献”,在 HelloGitHub 一个点赞、一个评论、一个分享,都是在为你喜欢的开源项目做贡献

三、以旧换新

这次网站改版的幅度有些大,导致有的老用户刚进来有些懵,找不到之前用的功能了。其实旧功能一个都没有少,我只是将他们的入口整齐地放在了 header。

759200-20230118195918521-1619948552.png

不仅如此,我还对旧网站的月刊、编程语言排行榜、文章等模块做了移动端适配。

759200-20230118195921837-772125705.png

以及一些细节优化,比如:月刊内的目录、期数选择、增加了详情页的入口等。

759200-20230118195925438-1879154328.png

网站还增加了黑暗模式,需要登录后才能看到切换黑暗模式按钮,就在用户头像的旁边。

759200-20230118195928328-1224000185.png

除此之外,这里还展示了用户等级和贡献值,下面介绍下获得贡献值的 2 种方式:

分享项目的按钮分别在首页「提交项目」和月刊「推荐」,现在分享开源项目时只要输入想要分享的项目链接,就能立刻检测出项目是否被推荐过,不仅可以有效地防止项目重复推荐,还可以避免最后提交时才发现项目已经推荐过,白写推荐语的悲剧。

759200-20230118195932794-1310093770.png

重头戏来了,通过「我的主页」可以进入到个人首页,这里有你的贡献值动态、评论记录、收藏的项目,而且收藏夹不仅可以自己看,还可以支持「公开收藏夹」从而让更多人看到你精选的开源项目集。

759200-20230118195936142-725237541.png

四、群策群力

至此,HelloGitHub 社区的功能就介绍完毕了,下面聊一聊网站背后的技术栈、开发过程和贡献者们。

759200-20230118195940665-1570170195.png

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 重写了一遍。虽说我被啪啪啪地打脸,但还是开心地笑出了猪声。这个沉寂了多年项目,终于要开足马力往前冲了!

759200-20230118195944615-190155404.png

后面的三个月,我就专心写产品文档和接口,油条负责写前端,在 6 月份的时候,我如愿以偿地在 Taichi 上面制作并发布了《HelloGitHub》第 75 期月刊。

759200-20230118195949509-842135607.png

再次感谢我是油条让我在有生之年可以用 Taichi 出月刊。

Geese:社区前端

用新的管理后台发完月刊后,我又马不停蹄开始了新的项目:Geese 社区前端。

因为新社区也要做成前后端分离,再加上我想将部分页面(月刊)做成服务器端渲染(SSR),所以最终就选择了基于 React 的 Next.js 框架。然后原子 CSS 框架在国外比较火,我一想反正我也不会 CSS,用哪个都得现学,索性就用最新、最流行的吧!所以最后项目的采用了 TypeScript+Next.js+Tailwind CSS 技术栈

项目地址:https://github.com/HelloGitHub-Team/geese

万事开头难,我花了一周时间,边看 Next.js 和 Tailwind 的文档边搭建项目。

759200-20230118195955839-1776321438.png

我自己一个人开发实在是太慢了,所以 7 月份的时候,我写了篇文章《求助!网站重构需要帮手》寻求帮助,众多大神纷纷伸出援助之手,有人贡献代码、有人修复 bug、有人帮忙部署。六个月后的 Geese 共有 400+ commit,7 位贡献者,感谢各位的帮助,你们每一位都是我的英雄

759200-20230118200013413-154114334.png

这里要特别感谢 RJM1996(如故)zhangzhonghe(被雨水过滤的空气)两位贡献者,他们完成了项目收藏、评论、月刊等核心功能。没有你们的参与和支持,我无法顺利完成 Geese。

后端和数据处理

最后说一下数据这块,后端和爬虫这块由我一个人开发完成,没什么可说的。

主要的困难在数据处理这块,为了更好地介绍开源项目,我为项目增加了更多的相关信息,比如:标题、标签、官网和文档链接等。这些都需要人工一个个处理,这个时候我们熟悉的小鱼干就来帮忙啦!但架不住项目太多,目前还差 1500 多个项目没处理。

759200-20230118200017859-968967675.png

这些未处理的项目,因为信息不全所以没有详情页,这就是为什么明明有的项目在月刊中,但是就是搜索找不到的原因。现在网站一期的功能已经开发完,后面我会全力梳理已有的开源项目,争取在 3 月份的时候全部搞定!

另外,因为登陆从之前的 GitHub 授权换成了微信授权,这是两套完全不同的用户系统,无法自动关联。所以老网站的用户数据需要人工迁移过来,如果有用户想要将旧网站的收藏夹数迁移到新社区,请联系我

随着,全新的 HelloGitHub.com 上线,网站也从之前单一的展示月刊内容,升级到了支持用户互动的开源社区。这是一个新的高度也是新的挑战,因为我没有运营过社区,就像五年前我没有做过站长一样。我有些忐忑,不停地刷新着网站,仿佛一切又回到了五年前,过往种种浮上心头:不破不立、相辅相成、群策群力,我的眼神逐渐变得坚定。

不忘初心,方得始终。HelloGitHub 会牢记初心,一如既往地给大家带来有趣、优秀的开源项目。

最后,感谢大家一路走来的支持和陪伴,提前祝大家春节快乐,我们年后见!

以上就是本文的所有内容,如果您觉得这篇文章写得还不错,就请给我点一个赞,您的支持就是我更新的动力。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK