前端零框架
纯 HTML/CSS/JS,无 React/Vue/构建工具,加载即渲染
qtxingyue.me
你正在浏览的网站 — 从零搭建的 JAMstack 全栈个人作品集
这是一个从域名注册到全站上线全部独立完成的个人技术作品集。采用 JAMstack Lite 架构 — 前端纯静态页面配合轻量 Python 后端,部署于阿里云 Ubuntu 服务器。设计理念是零构建工具、最小依赖、高性能、高视觉品质。
不是套模板,不是用框架。每一行 CSS 动效、每一条 API 路由、每一个 Nginx 配置都是手写。
| 方法 | 路径 | 功能 | 认证 |
|---|---|---|---|
| POST | /api/analytics/hit | 前端上报访问数据 | — |
| GET | /api/analytics/summary | PV / 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/hermes | Hermes AI 助手 | Cookie |
| 表名 | 核心字段 | 用途 |
|---|---|---|
| visits | path, ip, ua, referer, country, created_at | 站点访问日志 |
| articles | title, slug, content, excerpt, published, created_at | 博客文章 CMS |
| files | filename, original_name, size, created_at | 上传文件记录 |
| contacts | name, email, message, created_at | 联系表单留言 |
全部颜色值使用 oklch() 函数,通过 CSS 自定义属性统一管理。支持暗色/亮色双主题无缝切换,感知均匀的色彩渐变避免传统 sRGB 空间的色相偏移问题。
核心参数:STACK_OFFSET=64px · scale: 0.97 - i×0.014 · scrub: 0.6。使用 force3D: true 启用 GPU 加速,ScrollTrigger toggleClass 高亮当前卡片。移动端自动降级为非 Sticky 布局。
loading="lazy" + decoding="async"| 组件 | 配置 |
|---|---|
| 服务器 | 阿里云轻量应用服务器 · 美西 · 2vCPU / 2GB RAM / 40GB ESSD |
| 操作系统 | Ubuntu 22.04 LTS |
| 域名 | qtxingyue.me(Namecheap DNS CNAME) |
| HTTPS | Let's Encrypt(Certbot 自动续签) |
| 进程管理 | systemd — sakura-backend / hermes-gateway / hermes-dashboard |
| 部署流程 | Git push → 服务器 git pull → systemctl restart |
| 防火墙 | UFW — 仅开放 80 / 443 端口 |