Skip to content
Swil
  • Writing
  • Work
  • Vibe
  • Lab/lab3D scenes, a playable piano, the solar system.
  • 3D Models/modelsModels you can turn and look around.
  • Music/musicA listening room, an aespa archive and a piano.
  • Terminal/terminalA small command line in the browser.

Things to click, turn and listen to.

  • Planner/tools/workA week of tasks with a focus timer.
  • Image editor/tools/image-editCrop, resize and adjust in the browser.
  • Typing/tools/typingA typing trainer.
  • All tools →/tools

Small tools I use myself, all in the browser.

  • Finuwell↗finuwell.comAn atlas of how the body works.(opens in a new tab)
  • Swil News↗news.supwil.comAI and tech news, updated daily.(opens in a new tab)
  • SwirlRead↗swirl-read.vercel.appA Markdown reader for a notes folder.(opens in a new tab)

Separate apps I built, each on its own site.

  • Resources/resourceTools and reading I keep going back to.
  • Perf/perfThis site's own measurements.
  • Changelog/changelogWhat changed on the site, and when.

Reading I go back to, and how this site is measured and changed.

Writing/blogWork/projectVibe/vibe

Explore

Lab/lab3D scenes, a playable piano, the solar system.3D Models/modelsModels you can turn and look around.Music/musicA listening room, an aespa archive and a piano.Terminal/terminalA small command line in the browser.

Planner/tools/workA week of tasks with a focus timer.Image editor/tools/image-editCrop, resize and adjust in the browser.Typing/tools/typingA typing trainer.All tools →/tools

Finuwell ↗(opens in a new tab)finuwell.comAn atlas of how the body works.Swil News ↗(opens in a new tab)news.supwil.comAI and tech news, updated daily.SwirlRead ↗(opens in a new tab)swirl-read.vercel.appA Markdown reader for a notes folder.

Resources/resourceTools and reading I keep going back to.Perf/perfThis site's own measurements.Changelog/changelogWhat changed on the site, and when.

Site

  • Home
  • Writing
  • Work
  • Vibe
  • RSS

Playground

  • Lab
  • 3D Models
  • Music
  • Terminal

Tools

  • Planner
  • Image editor
  • Typing
  • All tools→

Apps

  • Finuwell↗
  • Swil News↗
  • SwirlRead↗

More

  • Resources
  • Perf
  • Changelog

Elsewhere

  • GitHub
  • LinkedIn
  • Bilibili
  • Email

Huahao Shang, 2026 · Privacy

Built with Next.js · measured at /perf

Writing/Essay

Intro To Personal Site With Blog

This article will introduce the structure, design and implementation of this website.

13 Mar 20251 min readUpdated9 Jul 2026Tech

Contents

  1. A NextJs based personal website integrated with Blog System

A NextJs based personal website integrated with Blog System

NextJs + React + HTML + CSS + Tailwind + JWT + React-quill-new + mongodb + react-youtube + i18next + html-react-parser + aws-sdk + AWS EC2 S3


This site was initially created using pure React as front end and Nodejs as the backend. But later decided to integrate and restructure this project and to make it as a whole using the full stack framework NextJs. It turns out working pretty well.


Have thought about using existing blog platform but still decided to be more customizable by implementing on my own and also the help of GENAI.


Hope the site and my blog would be seen by more people.


As you read still the end, therefore, send out my best wishes to you.

Filed under
  • Tech
← PreviousHow To Deploy a Website In AWS
Next →前端框架知识
← Back to Writing