技术栈

前端：Next.js
后端：Hono
数据库：PostgreSQL
部署：Vercel
Video parse API: Twitter API
统计：Umami
Rate limiter: upstash

关于 hono

一开始这个项目后端用的是 Next.js 自带的 API routes，后来体验了一下 Hono 之后就全面切换到 Hono 了。我觉得 Hono 有以下优点：

对 FastAPI 开发者来说特别友好，框架逻辑非常类似，上手非常快
内置中间件配置有现成的中间件，开箱即用，比如身份验证、限流等
路由系统直观清晰，API 路由的实现非常简单

举个栗子，用 Hono 给 /api/v1/ 加身份验证就很简单直观：

import { Hono } from 'hono'
import { handle } from 'hono/vercel'
import { setupMiddleware } from '../middleware'
import { ApiService } from '../services/api-service'
const app = new Hono().basePath('/api')
// Middleware configuration
setupMiddleware(app)
// Public endpoints
app.get('/hello', (c) => c.json({ message: 'Hello, World!' }))
// Protected endpoints
app.get('/analytics', ApiService.handleAnalytics)
app.post('/twitter/parse', ApiService.handleTwitterParse)

export const GET = handle(app)
export const POST = handle(app)

相比之下，Next.js 的 API routes 如果从头开始配置，至少需要：

单独写个 middleware.ts 文件
得自己实现中间件
middleware.ts 里设定配置

例如：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { checkAuth } from '@/lib/middleware/auth'
import { checkRateLimit } from '@/lib/middleware/rate-limit'

export async function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/api/public')) {
    return NextResponse.next()
  }
  // 1. Authentication verification
  const authError = await checkAuth(request)
  if (authError) return authError
  // 2. Rate limit check for API routes
  if (request.nextUrl.pathname.startsWith('/api')) {
    const rateLimitError = await checkRateLimit(request)
    if (rateLimitError) return rateLimitError
  }
  return NextResponse.next()
}
export const config = {
  matcher: '/api/:path',
}

当然这里不是说 Hono 比 Next.js 优越，主要是它的设计理念跟我的代码风格更契合，用起来更顺手。

Twitdown 代码已经开源到 github 上： ultrasev/twitdown，非常欢迎提 issue 和 pr。

SEO

做这个网站，除了方便自己下载视频之外，其实还有一个目的是为了测试下 SEO（search engine optimization）技巧。

糊个网站是很简单的事，但让网站在搜索引擎中排名靠前，就需要做很多优化工作。最近在看《SEO 实战手册》，了解了一些技巧，正尝试着在各个项目中实践一下。

作为 SEO 小白，很多工作都是让 Cursor 做的，比如界面的 metadata，网站的 robots.txt，sitemap.xml。网站上线之后用 AITDK 测试了一下，效果还不错，title, description, keywords, openGraph, twitter card，该配置的地方都配置了。

PV 测试

上线之后，就看 SEO 的效果如何了。这里先留个坑，后面会补充记录几个时间点，看看 PV 分别达到 10、100、1000 要耗费多少时间。

这里的 PV 值指的是连续多日内的平均 PV，偶尔一次的 PV 不能算。

PV	时间	耗时（天）
10	2025-01-19	5
100	?	?
1000	?	?

twitdown.com 这个域名是今天在 cloudflare 上刚注册的，先买了一年，耗资 $10.5，看看运行一段时间后，PV 能达到多少。如果访问量实在上不去，估计后续就不再续费了，毕竟类似的项目太多了😂。

测试结果记录

2025-01-19: 被一位大佬在自己网站上分享了之后，从 01-19 开始就有一些用户。感谢大佬🙏。

优化

UI 非常依赖于开发者的经验与审美，不能仅靠 Cursor 来生成“更好看的 UI”，但目前来看，Cursor 的经验与审美是优于我的。
SEO 持续优化，如果在 twitter, reddit 等平台上推广一下，我觉得 PV 应该会涨的很快，目前我想测试一下关键词及描述语的极限在哪里。

做了个 Twitter 视频下载网站 - twitdown.com

技术栈

关于 hono

SEO

PV 测试

测试结果记录

优化

Comments