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

news2024/10/6 18:32:32

3e3c2d682aaaf529eb11efb3fa532145.jpeg

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

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

8ac0f22517ee9d6697545b1bf3a1aca9.png

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

ec3a3e9fb411d37529945b5424ca08db.png

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

地址:https://hellogithub.com/

下面,就让我带大家走进这个开源项目的豆瓣社区——HelloGitHub

一、不破不立

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

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

528d2f943920bde2dabf7941652ee9bf.png

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

5a82261db5e857082ba9372e6642b4d0.png

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

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

1534a4a4c296b47c3702ba06067e2e76.png

二、相辅相成

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

87072bc1543ca91d2ef40e560c8be89d.png

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

2970379f4a1271cd571225bf1053643e.png

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

7177d300632ddaa780e0d2bd3a6a5dee.png

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

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

ba16d9352642362bc66666ab6eb9a805.png

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

三、以旧换新

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

28b97b2650735155b5c2b02d32c1f164.png

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

3eacf4906efea8a49878c6f4d6d1ecc3.png

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

0f21970f0bf9f8d8fa306b5aa751f837.png

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

8dafc1d3430246a832bd4d84a3bec100.png

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

  1. 发布评论

  2. 分享项目

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

91d1424e3227f3693fb1e58625e13a36.png

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

e52061ae3f11731b5bc50d71546a864b.png

四、群策群力

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

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

4071c8761730cb37d49413a07a533c03.png

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

678e3683082f78b36ee4e1680f0cfe62.png

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

Geese:社区前端

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

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

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

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

c420d6ad64e89295feffefc5dbfde832.png

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

eeeebdff5c9718ad646ee0cc8b3d9a80.png

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

后端和数据处理

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

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

1dee6b8f9c22ac7767af1083a00edfa7.png

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

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

五、最后

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

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

最后,感谢大家一路走来的支持和陪伴,我们年后见!

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

- END -

点击阅读原文直达社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/173284.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL34道练习题

1、取得每个部门最高薪水的人员名称(要求显示部门编号、人员名称和薪资) 第一步:查询每个部门的最高薪资 SELECT deptno,max(sal) as maxsal FROM emp GROUP BY deptno; 第二步:把上面查询结果当做临时表t&#xff0…

Pagoda panel宝塔面板

宝塔面板是干什么的?有哪些典型的功能作用?宝塔面板是开发的服务器管理工具,是一家专业从事服务器相关软件和服务研发的公司。宝塔的愿景是让用户更容易使用服务器。宝塔面板是一款服务器管理软件,支持Windows和Linux系统,服务器…

【SpringCloud18】SpringCloud Alibaba Nacos服务注册和配置中心

1.Nacos简介 1.1为什么叫Nacos 前四个字母分别为Naming和Configuration的前两个字母,最后的s为Service 1.2 是什么 一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台Nacos:Dynamic Naming and Configuration ServiceNacos就是注册中心 配置中心…

简单双向LSTM模型实战项目

前言 数据来自于kaggle比赛Ventilator Pressure Prediction,数据背景介绍请看官方说明代码来自于当前排名第一的团队Shujun, Kha, Zidmie, Gilles, B,他们在获得第一名的成绩以后发了一篇博客,提供了他们在比赛中使用的模型,包括…

[C/C++]对象指针

对象指针 1.对象指针变量 和基本类型变量一样,对象在初始化之后也会在内存中占有若干字节的内存空间。因此在程序中,我们可以通过对象名或对象的地址来访问该对象。对象指针变量就是一个用于保存对象在内存中存储空间首地址的指针变量,它与普…

Python Matplotlib 中如何用 plt.savefig 存储图片

目录前言正文前言 plt.show()展示图片的时候,截图进行保存,图片不是多么清晰 如何保存高清图也是一知识点 函数包名:import matplotlib.pyplot as plt 正文 主要功能:保存绘制数据后创建的图形。使用此方法可以将创建的图形保…

MobaXterm的安装与使用

安装: 分为开箱即用和逐步配置版本,这里选择开箱即用的版本,网址如下: MobaXterm Xserver with SSH, telnet, RDP, VNC and X11 - Home EditionFree X server for Windows with tabbed SSH terminal, telnet, RDP, VNC and X11-forwarding - Home Editionhttps://mobaxterm.m…

Java面试题(2),这是一篇会一直更新的博客!欢迎大家留言~

Java面试题第二篇1. 并发的三大特性2、线程池、解释线程池参数3、BeanFactory和ApplicationContext有什么区别?4、描述一下Spring Bean的生命周期5、Spring的几种Bean的作用域6、单例Bean是线程安全的吗?7、Spring框架用到了哪些设计模式8、Spring事务的…

Magic Leap CEO:我们的目标是再回到消费级AR市场

相比于几年前,Magic Leap在CEO换人后经历了一系列变化,其中更明显的变化,就是这家公司似乎变得更低调、更务实。此前,Magic Leap的内容库包括了大量趣味、娱乐的AR应用,而现在则主要改成B端解决方案,随着ML…

小程序商城源码代码分析

微信平台开发直播插件后,许多传统的商家开始加入小程序商城源码开发的队伍中,以此来自主管理自己的产品。下文,小编将为大家盘点一下小程序商城源码的优势,以及代码分析。 一、小程序商城源码有什么优势? 1、拓展私域…

定时任务中将redis数据存入数据库相关问题

我的GitHub:Powerveil GitHub我的Gitee:Powercs12 (powercs12) - Gitee.com皮卡丘每天学Java觉得昨天晚上只是分析和解决问题,很多人可能不知道出bug的场景,今天决定重现bug,让代码改回错误代码,重现看到一…

科研快报|PacBio 16S全长测序探究游离唾液微生物群失调在牙周病中的潜在作用

背景介绍唾液是口腔中最重要的介质。唾液中游离细菌的生态失调可能与牙周病的发生、发展、预后和复发有关,但这种潜在的关系尚不清楚。本研究的目的是探讨游离唾液微生物群在不同牙周状态下的潜在作用,它们对非手术牙周治疗的反应,以及治疗后…

年后旺季,服装实体店如何利用微信做新款宣传?

每年过完大年开工后,我们服装的旺季就来临了,对于很多服装店铺来说,无疑是一个必须把握的大好机会。就拿这几天的天气来说,广东最高温度达到了26度,很多人又把自己春夏的衣服拿出来了,而年后气温必然回暖&a…

Swin Transformer代码实战篇

🍊作者简介:秃头小苏,致力于用最通俗的语言描述问题 🍊往期回顾:CV攻城狮入门VIT(vision transformer)之旅——近年超火的Transformer你再不了解就晚了! CV攻城狮入门VIT(vision transformer)之旅——VIT原…

列表元素 有序列表 无序列表 定义列表 ol: ul: dl: dd: dt:

目录列表元素有序列表无序列表定义列表列表元素 有序列表 ol: ordered list 表示整个列表 li: list item 表示单个列表,列表的子元素 reversed: 导则 列表的写法: 但实际开发中一般不用type来设置列表的序,而是用css 把大象装冰箱分几步…

SpringBoot 项目

不得不佩服 Spring Boot 的生态如此强大,今天我给大家推荐几款 Gitee 上优秀的后台开源版本的管理系统,小伙伴们再也不用从头到尾撸一个项目了,简直就是接私活,挣钱的利器啊。SmartAdmin我们开源一套漂亮的代码和一套整洁的代码规…

2.4、进程通信

整体框架 1、什么是进程通信? 顾名思义,进程通信就是指进程之间的信息交换。 进程是分配系统资源的单位(包括内存地址空间), 因此各进程\color{red}各进程各进程拥有的内存地址空间相互独立\color{red}内存地址空间相互独立内存…

知识分享-商业数据分析业务全流程

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

力扣sql简单篇练习(二)

力扣sql简单篇练习(二) 1 从不订购的客户 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 1.2 示例sql语句 # 一个人也是有可能下多个订单的 SELECT name Customers FROM Customers WHERE id not in(SELECT distinct Customerid FROM Orders)1.3 运行截图 2 删除重…

【LINUX修行之路】工具篇——Vim的使用及配置

🍿本节主题:vim的使用 🎈推荐阅读:回溯算法 、C入门(上篇) 💕我的主页:蓝色学者的主页 文章目录一、前言二、文本编辑器和IDE三、选择vim的理由四、vim操作模式4.1普通模式(command …