Frontend · Backend · Vue.js

A Personal Site Rebuilt After Five Years Mirrors a Decade-Long Journey from Mechanic to Full-Stack Engineer

By 航栈 · Aug 18, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

The technical arc — from patching SEO into a multi-page Vue 2 build to running a typed monorepo with native SSR — maps the real-world upgrade path many solo developers face when a side project outgrows its original stack. The career backstory also surfaces a less-documented entry route into software: vocational retraining through UI design, not a CS degree.

Summary

The old site ran on Vue 2, Webpack 4, ThinkPHP 5, and MySQL, serving as a live lab for every new skill picked up over five years. A custom multi-page Webpack build injected server-side SEO metadata into PHP templates, a pragmatic compromise that kept pages indexed without a full SSR rewrite. The new stack moves to Nuxt 4, Vue 3, NestJS, Fastify, Prisma, and a pnpm/Turborepo monorepo, with SSR handled natively and API responsibilities cleanly split behind Nginx.

The upgrade is framed as a ten-year checkpoint. Starting as a 300-yuan-a-month mechanic's apprentice, the builder borrowed money to study UI design, taught himself HTML/CSS/JS after hours, and clawed through unemployment and startup pressure into frontend lead and full-stack roles. Each site feature and update log became a timestamp on that progression.

The piece is less a technical tutorial than a record of what a self-built site absorbs over time: half-finished posts, solved bugs, and the emotional weight of deleting code that once took all night to write.

Takeaways

— A Vue 2 + Webpack 4 multi-page app injected SEO metadata by placing compiled HTML into ThinkPHP MVC views, avoiding a full SSR migration.

— The new frontend runs Nuxt 4 with Vue 3 and TypeScript; SSR, Open Graph, and JSON-LD structured data are now part of a single rendering pipeline.

— The backend moved from ThinkPHP 5 to NestJS 11 on Fastify 5, with MySQL 8 accessed through Prisma and Redis handling caching and deduplication.

— pnpm Workspaces and Turborepo organize the frontend, backend, shared types, and database models into one monorepo.

— Nginx remains the entry point, routing /api to NestJS, pages to Nuxt SSR, and static assets with separate cache policies.

— The builder entered tech as a UI design student after working as a mechanic and waiter, then self-taught frontend and full-stack skills over a decade.

Conclusions

Personal sites that survive five-plus years become de facto career journals; the update logs and half-finished posts often document growth more honestly than a portfolio ever could.

The SEO workaround — injecting title, keywords, and description into multi-page Vue builds via a PHP controller — is a pattern that still applies to any SPA that can't justify a full SSR overhaul.

Upgrading a long-running side project is as much an emotional negotiation as a technical one; the old code carries the context of who wrote it and under what constraints.

Concepts & terms

Multi-page Vue application with Webpack

Instead of a single-page app, multiple HTML entry points are configured and compiled separately by Webpack, each loading its own Vue instance. This allows server-side injection of per-page metadata without a full SSR framework.

Monorepo with pnpm Workspaces and Turborepo

A single repository containing multiple packages (frontend, backend, shared types). pnpm Workspaces link dependencies efficiently, while Turborepo caches and parallelizes build tasks across packages.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗