A self-hosted, statically-generated microblog that mirrors your Telegram channel into a fast, searchable, and beautifully designed website built with Next.js, React, shadcn/ui, and Tailwind CSS.

简体中文

This is a complete wheel rebuild of BroadcastChannel created by @miantiao-me. The original works perfectly well, but I didn't like the UI, it's SSR on Astro (a framework I wasn't familiar with), and I'm a loyal SSG fanboy — static sites are easier to host anywhere, not just Cloudflare Pages or Vercel. So I rebuilt it from scratch in Next.js with DPlayer video playback, a Telegram-native image grid layout, Lunr.js full-text search, and a Twitter-like responsive feed timeline.

Is it necessary though? Absolutely not, but it's a fun rebuild to adhere with my personal aesthetic visual preference and also a way for me to learn Next.js v16.x.

1. Node.js >=22
2. pnpm >=10

pnpm install
pnpm dev

The development server starts on port 4321.

pnpm build
pnpm start

The build command runs pnpm sync --og-image --favicon automatically before next build, so all generated artifacts are created in a single step.

All configuration lives in a single file: src/lib/constant.ts. There are no .env files or runtime environment variables. Fork the repo, edit this file, deploy.

channel: 'your_channel',
siteUrl: 'https://tg.example.com',
telegramHost: 't.me',
locale: 'en',
timezone: 'UTC',

Leave any field as an empty string to hide it from the sidebar.

website: 'https://example.com',
twitter: 'username',
github: 'username',
telegram: 'username',
mastodon: 'mastodon.social/@username',
bluesky: 'username.bsky.social',

hideDescription: false,
reactionsEnabled: true,
pwa: true,
customBanner: '**Welcome!** [Source on GitHub](https://github.com/you/repo)',
customFooter: '',
rssBeautify: true,

This is completely optional. When cloudFlare.transform is true, the build-time sync rewrites static media paths from their default /media/… form to the prefixed version (/cdn-cgi/image/format=auto,quality=85/media/…). The rewrite happens at build time only — there is no runtime path conversion. If you are not deploying behind Cloudflare, leave this set to false and media paths will stay as plain /media/* URLs.

cloudFlare: {
  transform: false,
  transformPrefix: '/cdn-cgi/image/format=auto,quality=85/',
},

Most deployments should leave this empty since media is mirrored locally at build time.

seo: {
  title: 'My Telecast',
  description: 'Posts from my Telegram channel.',
  ogImage: '/og-auto.png',
  keywords: ['telegram', 'microblog', 'my-channel'],
  author: 'Your Name',
  noIndex: false,
  noFollow: false,
},

analytics: {
  googleAnalyticsId: '',
  umamiScriptUrl: '',
  umamiWebsiteId: '',
},

maxPages: 50,
mediaMirror: {
  directory: '/media',
  userAgent: 'TelecastStaticSync/1.0',
},

export const SITE_CONSTANTS: SiteConstantConfig = {
  channel: 'your_channel',
  locale: 'en',
  timezone: 'UTC',
  siteUrl: 'https://tg.example.com',
  telegramHost: 't.me',
  staticProxy: '',
  cloudFlare: {
    transform: false,
    transformPrefix: '/cdn-cgi/image/format=auto,quality=85/',
  },
  hideDescription: false,
  reactionsEnabled: true,
  pwa: true,
  website: 'https://example.com',
  twitter: 'username',
  github: 'username',
  telegram: 'your_channel',
  mastodon: '',
  bluesky: '',
  customBanner: '',
  customFooter: '',
  rssBeautify: true,
  seo: {
    title: 'My Telecast',
    description: 'Posts from my Telegram channel.',
    ogImage: '/og-auto.png',
    keywords: ['telegram', 'microblog'],
    author: 'Your Name',
    noIndex: false,
    noFollow: false,
  },
  analytics: {
    googleAnalyticsId: '',
    umamiScriptUrl: '',
    umamiWebsiteId: '',
  },
  maxPages: 50,
  mediaMirror: {
    directory: '/media',
    userAgent: 'TelecastStaticSync/1.0',
  },
}

pnpm sync [flags]

Both flags are used in the default build script in package.json:

"build": "pnpm sync --og-image --favicon && next build --webpack"

1. src/generated/static-snapshot.json — page data for all routes.
2. public/search/index.json — pre-built Lunr full-text search index.
3. public/media/* — locally mirrored media files.
4. public/og-auto.png — Open Graph image (when --og-image is passed).
5. public/favicon.ico, public/favicon.svg, public/icon-*.png — favicons (when --favicon is passed).

This project is licensed under AGPL-3.0.