Vingturbo

Posted on Sep 25

A project that I'm really satisfied with一个令我十分满意的项目

#automation #github #opensource #webdev

一个令我十分满意的项目

前段时间我想给个人网站找个友链聚合站，看了一圈发现都不太合适。

开往要求 20 篇文章或 10 篇原创，XXIIVV 要求独立域名。这些要求对于一个只是想分享点东西的普通人来说，门槛有点高。我就想，为什么不自己搞一个？

于是有了 SiteHub。

它是什么

一个个人网站聚合平台。你把你的网站提交上来，它帮你展示出去，让更多人看到。

核心原则：只要不违法，来者不拒。

技术上怎么做的

整个项目没有服务器，没有数据库，没有框架。

后端逻辑：纯 Bash 脚本 + jq + curl
数据存储：JSONL，按 URL 的 MD5 前两位分片
自动化：GitHub Actions，用户提 Issue，脚本自动解析、校验、入库、推送
前端：原生 HTML + 原生 CSS + 原生 JavaScript
托管：Cloudflare Pages + GitHub Pages

没有任何构建步骤，没有 node_modules，没有 npm install。打开就是能用。

我觉得最有意思的功能

自定义跳转动画。

默认情况下，点击卡片直接跳到目标网站。但如果站长填写了「跳转页 URL」，点击卡片时会先弹出一个 iframe，加载站长自己写的页面，播放一段动画，然后才跳转。

SiteHub 会把图标的坐标、尺寸、图标 URL、网站名、描述、主题色全部传给跳转页。站长用这些参数可以做任何想做的效果。

我自己给自己网站写的是「卡片上的文字逐字退格，再逐字打出欢迎语」的终端动画。

据我所知，友链聚合站里还没有第二个支持这个的。如果我错了，欢迎指正。

怎么提交

点这个链接，填表，提交：

https://github.com/Vingturbo/sitehub/issues/new?template=Apply_your_website_links.yml

几秒后自动回复，几分钟后前端刷新，你的网站就出现在列表里了。

最后

项目是 GPLv3 开源的，仓库在这里：

https://github.com/Vingturbo/sitehub

演示地址：

https://web-site-hub.pages.dev/

如果你有自己的网站，欢迎提交。如果你觉得这个项目有意思，点个 Star 我会很开心。

有问题或者建议，直接提 Issue。

A Project I'm Really Satisfied With

A while ago, I wanted to find a link aggregation site for my personal website. After looking around, I realized none of them were quite right.

Some required 20 articles or 10 originals, XXIIVV required an independent domain. These requirements are a bit high for an ordinary person who just wants to share some stuff. So I thought, why not make one myself?

That's how SiteHub came about.

What It Is

A platform to aggregate personal websites. You submit your website, and it helps showcase it so more people can see it.

Core Principle: As long as it's legal, anyone is welcome.

How It Works Technically

The whole project has no server, no database, no framework.

Backend Logic: Pure Bash scripts with jq and curl
Data Storage: JSONL, sharded by the first two characters of the URL's MD5
Automation: GitHub Actions; users submit issues, scripts automatically parse, validate, store, and push
Frontend: Native HTML, native CSS, native JavaScript
Hosting: Cloudflare Pages, GitHub Pages

No build steps, no node_modules, no npm install. Open it, and it just works.

My Favorite Feature

Custom Transition Animations.

By default, clicking a card takes you directly to the target website. But if the site owner provides a "redirect page URL," clicking the card will first pop up an iframe, load their custom page, play an animation, and then redirect.

SiteHub sends coordinates, dimensions, icon URL, site name, description, and theme color to the redirect page. The owner can use these parameters to create any effect they want.

For my own site, I made a terminal animation where the text on the card erases letter by letter and then types out a welcome message.

As far as I know, no other link aggregators support this yet. If I'm wrong, feel free to correct me.

How to Submit

Click this link, fill out the form, and submit:

https://github.com/Vingturbo/sitehub/issues/new?template=Apply_your_website_links.yml

You'll get an automatic reply in seconds, and after a few minutes, the front end refreshes and your site appears in the list.

Finally

The project is GPLv3 open source, repo is here: