🌙

QT新月 个人作品集网站

qtxingyue.me

你正在浏览的网站 — 从零搭建的 JAMstack 全栈个人作品集

12
独立页面
15
API 端点
12
项目展示
4
数据表

01项目概述

这是一个从域名注册到全站上线全部独立完成的个人技术作品集。采用 JAMstack Lite 架构 — 前端纯静态页面配合轻量 Python 后端,部署于阿里云 Ubuntu 服务器。设计理念是零构建工具、最小依赖、高性能、高视觉品质

不是套模板,不是用框架。每一行 CSS 动效、每一条 API 路由、每一个 Nginx 配置都是手写。

前端零框架
纯 HTML/CSS/JS,无 React/Vue/构建工具,加载即渲染
OKLCH 色彩系统
感知均匀的色彩空间,暗色/亮色双主题无缝切换
GSAP 滚动动效
卡片堆叠、时间线绘制、视差效果,触屏自动降级
FastAPI 后端
Python 异步框架,15 个 API 端点,Cookie 认证
Nginx 反代
HTTPS(Let's Encrypt)、Gzip、缓存策略、上传限制
Hermes AI Agent
飞书 WebSocket 接入,HMAC 签名 Webhook 安全调用

02系统架构

用户浏览器 │ ▼ ┌─────────────────────────────────────┐ Nginx (80/443) — 反向代理 + 静态文件 │ Let's Encrypt SSL · Gzip · Cache └──────────────┬──────────────────────┘ │ ┌───────┴───────┐ ▼ ▼ ┌──────────┐ ┌──────────────────────┐ 静态文件 FastAPI (:8000) │ HTML/CSS Uvicorn ASGI 服务器 │ JS/媒体 └──────────┘ SQLite (data.db) │ 访问 · 文章 · 文件 · 留言 └───────────┬──────────┘ │ ▼ ┌──────────────────────┐ Hermes AI Agent 飞书 WebSocket 接入 HMAC 签名 Webhook └──────────────────────┘

03技术栈

🎨
前端核心
HTML5 + CSS3 + Vanilla JS
OKLCH 色彩 · Design Tokens
暗色/亮色双主题
动画引擎
GSAP 3.12 + ScrollTrigger
卡片堆叠 · 视差 · 时间线
prefers-reduced-motion
粒子系统
tsParticles 2.12
18 粒子可交互背景
触屏自动禁用
🐍
后端框架
FastAPI + Uvicorn
Python 异步 · 15 端点
Cookie SHA-256 认证
🗄️
数据库
SQLite 单文件
4 张表 · 轻量零配置
访问/文章/文件/留言
🔒
Web 服务器
Nginx 反向代理
Let's Encrypt HTTPS
Gzip · 90天缓存
☁️
部署运维
阿里云 Ubuntu 22.04
systemd 守护进程
UFW 防火墙
🤖
AI 能力
Hermes Agent
飞书 WebSocket 接入
HMAC 签名 Webhook
📦
版本控制
Git + GitHub
开源仓库
一键部署脚本

04API 接口

方法路径功能认证
POST/api/analytics/hit前端上报访问数据
GET/api/analytics/summaryPV / UV / 热门页面
GET/api/articles文章列表
GET/api/articles/{slug}文章详情
POST/api/contact联系表单 + Honeypot
POST/api/admin/login管理端登录密码
GET / POST/api/admin/articles文章管理Cookie
PUT / DELETE/api/admin/articles/{id}文章编辑删除Cookie
POST/api/admin/upload文件上传(200MB)Cookie
GET/api/admin/files文件列表Cookie
GET/api/admin/contacts留言管理Cookie
POST/api/admin/hermesHermes AI 助手Cookie

05数据库设计

表名核心字段用途
visitspath, ip, ua, referer, country, created_at站点访问日志
articlestitle, slug, content, excerpt, published, created_at博客文章 CMS
filesfilename, original_name, size, created_at上传文件记录
contactsname, email, message, created_at联系表单留言

06前端技术细节

OKLCH 色彩系统

全部颜色值使用 oklch() 函数,通过 CSS 自定义属性统一管理。支持暗色/亮色双主题无缝切换,感知均匀的色彩渐变避免传统 sRGB 空间的色相偏移问题。

GSAP 卡片堆叠引擎

核心参数:STACK_OFFSET=64px · scale: 0.97 - i×0.014 · scrub: 0.6。使用 force3D: true 启用 GPU 加速,ScrollTrigger toggleClass 高亮当前卡片。移动端自动降级为非 Sticky 布局。

性能优化

图片 loading="lazy" + decoding="async"
Google Fonts 精简字重,仅 120KB
Nginx 静态资源 90 天缓存 + Gzip
触屏设备自动禁用粒子和复杂动效

07安全与 SEO

🛡️
认证
Cookie Token · SHA-256
HttpOnly · 30 天有效期
🚫
反垃圾
Honeypot 隐藏字段
IP 频率限制 3条/分钟
📁
文件安全
类型白名单 · UUID 重命名
200MB 上传上限
🔐
Webhook
HMAC-SHA256 签名
防篡改验证
🔍
SEO
Schema.org Person
OG + Twitter Card · sitemap
可访问性
语义 HTML5
prefers-reduced-motion

08部署架构

组件配置
服务器阿里云轻量应用服务器 · 美西 · 2vCPU / 2GB RAM / 40GB ESSD
操作系统Ubuntu 22.04 LTS
域名qtxingyue.me(Namecheap DNS CNAME)
HTTPSLet's Encrypt(Certbot 自动续签)
进程管理systemd — sakura-backend / hermes-gateway / hermes-dashboard
部署流程Git push → 服务器 git pull → systemctl restart
防火墙UFW — 仅开放 80 / 443 端口