About the author

Independent writing on tech and everyday life

Liam

Liam

Independent developer focused on frontend and full-stack engineering — documenting tech explorations and life here.

About this site

Xiaobailong Blog is a modern personal blog for frontend, backend, and engineering notes. Built as a pnpm TypeScript Monorepo: Nuxt SSR for readers, Vite+ Admin for authors, NestJS API for data and realtime; the same repo also ships a watermark-remover mini program, and video-parse. Beyond articles: bookmarks, guestbook, chat, search, and online donations.

Features

From reading to interaction — all in one place

Articles Markdown rendering, table of contents, dark mode, and RSSBookmarks Curated sites and tools organized by categoryBlogroll Friend links with fellow bloggers who share and recordGuestbook Public messages and replies with the author and visitorsChat room Realtime text, images, and AI assistant — sign in to joinSupport WeChat / Alipay donations to support ongoing writingSearch Full-text search across post titles and contentRSS Subscribe to latest posts via feed.xml

Ecosystem

Side tools and open-source extensions beyond the blog

Watermark remover mini program

Scan with WeChat to parse short-video share links and save watermark-free media

Watermark remover mini program QR code

Scan in WeChat

Tech stack

pnpm TypeScript Monorepo — blog web, admin, NestJS API, plus mini program / video-parse side apps

Blog frontend

Nuxt 4Vue 3.5Nuxt UITailwind CSS v4Piniamd-editor-v3Socket.io

Admin

Vite+Element PlusPiniaAxiosmd-editor-v3

API & data

NestJS 11Prisma 7MySQL 8.4RedisSocket.ioRabbitMQKafkaAliyun OSS

Side apps

uni-appEdgeOne Pages

Engineering

pnpm MonorepoTypeScript 6@blog/sharedVite+ (vp check)Vitest

Architecture

Decoupled multi-client stack — Nuxt SSR for readers, Admin SPA for authors, mini program sharing NestJS API and shared package types

  1. Clients

    • Nuxt 4 SSRReading & interaction (PC + H5)
    • Admin SPAContent ops & RBAC (PC only)
    • uni-app MPWatermark-remover WeChat mini program
  2. Edge / gateway

    • NginxHTTPS reverse proxy & static assets
    • HTTPS / CDNMedia via OSS CDN
  3. Services

    • NestJS APIREST + WebSocket + job queues
    • Nuxt SSRFrontend render under PM2
    • RabbitMQAsync watermark / crawl jobs
    • KafkaAPI request log event stream
    • EdgeOneVideo share-link parsing
  4. Data & shared

    • MySQL 8.4Primary DB (on-host)
    • RedisCache · tokens · online count
    • OSSImages & attachments
    • @blog/sharedCross-app DTOs / constants

Request flows

  • Browser → Nginx → Nuxt SSR first paint → NestJS API (useFetch / CSR)
  • Browser → Nginx static Admin → NestJS API (JWT Bearer)
  • Mini program → NestJS API; video-parse on EdgeOne, proxied by API

Start exploring

Record and share here

Read the latest posts, leave a message, or connect with the author