Lionel · 李豪个人兴趣、文章、摄影、视频和音乐
Article · 文章

从零搭了个个人网站,聊聊我是怎么搞的

Lionel
2026/05/03 · 3 min read

聊聊我是怎么从零搭个人网站的,用了什么技术、踩了什么坑、备份怎么做。

为什么要搞这个

一直想有个自己的小站。想有个地方,把写过的东西、拍过的照片、常听的歌、最近玩的游戏都收在一起。前前后后折腾了一阵,现在总算稳定跑起来了,趁记忆还新,把踩过的坑顺手记下来。

技术上用了啥

框架:Next.js 15

选 Next.js 没有什么玄学,主要看中三点:

  • 自带服务端渲染,页面打开快,搜索引擎也喜欢
  • 有个叫 Server Actions 的东西,表单提交直接调后端函数,不用自己再写 API 层
  • 前后端都用 TypeScript,类型定义写一份两边共用,省得接口对不上

数据库:Prisma + MySQL

  • Prisma 这个 ORM 用着挺舒服的,改个字段跑个 migration 就行
  • MySQL 8.4 当数据仓库,稳定够用
  • 目前存了文章、兴趣条目、媒体、歌单、留言这些数据

文件存储:AWS S3

图片、音频这类大文件都放到 S3,通过预签名 URL 控制访问。节点选在香港,国内访问体感还可以。

部署:Docker Compose + Nginx

一台云服务器上跑两个 Docker 容器——一个 Next.js 应用,一个 MySQL。Nginx 在外面做反向代理,管 SSL 证书和端口转发。整体不复杂,但该有的环节基本都补齐了。

开发过程中踩的坑

服务器没法直接拉代码

服务器在国内网络环境下访问 GitHub 不太稳定。我的做法是用家里的 Mac 当中转——Mac 上 pull 最新代码,然后 rsync 到服务器上重新构建。后来写了个一键脚本,自动化了整个流程,倒也不算麻烦。

Prisma Migration 的坑

试过直接在服务器上跑 prisma migrate dev,偶尔会因为环境不一致出问题。后来固定了一个规矩:所有 migration 都在本地生成,服务器上只跑 prisma migrate deploy

文件上传的小曲折

后台用 Server Actions 处理表单,但文件上传不能全塞进 Action 里。更稳的做法是配合 API Route 先拿 S3 预签名 URL,再由浏览器把文件 PUT 上去。这个坑不大,只是一开始容易忽略。

备份:最重要的部分

说真的,没有备份的网站,心里总是不踏实。哪天服务器挂了、数据误删了,如果没有备份,很多东西就真的找不回来了。

数据库怎么备

mysqldump 通过 Docker 容器直接导出,gzip 压一下存本地。保留最近 7 天的日备份和 4 周的周备份,既不占太多空间,出事了也能快速恢复。

文件怎么备

S3 本身已经是高可用存储了,但万一账号被盗或者误删了呢?所以还是用 AWS CLI 把 S3 的东西同步一份到本地。算是给自己多留一层保险。

自动化

写了统一的备份脚本,每天凌晨自动跑。流程就是:服务器导出数据库 → 本地拉取备份 → 本地同步 S3 → 清理旧备份。正常情况下,整个过程不用人工盯着。

如果要迁移呢

万一要换服务器或者做灾恢复:

  1. 数据库:解压备份文件导入新的 MySQL
  2. 代码:克隆仓库、配好环境变量、Docker Compose 拉起来
  3. S3:S3 本身就是云端的,换个服务器只需要更新访问凭证

流程顺的话,从零恢复到可访问,大约 30 分钟内能搞定。

一些心得

  • 先跑起来再优化:一开始别追求完美,能用就行,后面慢慢改
  • 备份一定要做:别问我怎么知道的
  • 能自动化的都自动化:部署、备份、证书续期,都应该是一个脚本的事
  • 记文档:踩过的坑写下来,下次就不会再踩了

网站还会继续慢慢补功能。如果你也想搭个人站,欢迎来聊,很多坑其实早点知道会轻松不少。

#文章
Lionel Written by
我叫李豪,来自云南昭通,现居杭州 喜欢摄影、足球 、Vibe Coding 和老婆一起养了两只猫
Scinentistcoldplay