这个博客是怎么建成的

一个极简、高速、视觉炫酷的个人博客，从零到部署的完整记录。

为什么不用框架

Hexo、Hugo、WordPress、Ghost……市面上不缺博客方案。

但我选择 Flask + 原生三件套的原因：

技术栈

后端：Flask

# app.py — 不到 200 行解决所有问题
@app.route('/')
def index():
    posts = get_all_posts()
    return render_template('index.html', posts=posts[:6])

• python-frontmatter 解析 YAML 头部
• markdown + pymdownx 渲染 + 代码高亮
• 零数据库，文件系统即 CMS

前端：原生 HTML + CSS + JS

• CSS 自定义属性管理色彩体系
• backdrop-filter 毛玻璃（已移除以保证60fps）
• transform + opacity 动画走 GPU 合成层
• IntersectionObserver 卡片懒加载
• 四向导航 Hub 路由系统

设计系统

色彩

主色：  电青 #00d9ff  —— 科技感、信任感
辅色：  品紫 #b537f2  —— 神秘、创造力
强调：  荧粉 #ff2e9a  —— 能量、激情
背景：  深空黑 #050510 —— 沉浸、专注

动画原则

1. 有意义 — 动效引导注意力，而非分散
2. 有节奏 — 快慢结合，给视觉呼吸空间
3. 高性能 — 只用 transform + opacity，走合成层

未来计划

• [ ] RSS 订阅
• [ ] 评论系统（GitHub Issues 驱动）
• [ ] 暗色/亮色切换

这个博客会随着我的学习和成长不断进化。如果你也在搭建自己的博客，希望这些记录能帮到你。🛠️