characteristic · 博客 个人网站博客开发

我的个人网站 characteristic · 博客 V1.3 —— 从 0 到 1 的全栈搭建记录

**

项目展示

一、为什么做这个站

我是一个全栈开发者 + 硬件爱好者，平时写 Java 智慧校园系统、玩 ESP32-LVGL、搭树莓派 ROS2 小车，也在 CSDN 上写技术笔记。 之前一直用 CSDN 写博客，但有几个痛点：

所以决定：原生手写 HTML，Flask 后端，SQLite 数据库，一个页面一个文件，干净利落。

二、技术选型

三、页面结构

personal-site/
├── index.html # 首页
├── blog.html # 博客列表 + 写文章 + 详情 + 评论
├── projects.html # GitHub 项目同步
├── personal.html # 记录页（技能栈 + 时间线）
├── space.html # 空间分享（朋友圈 + 相册）
├── app.py # Flask 后端
├── site.db # SQLite 数据库
├── assets/ # 图片 / 视频素材
└── README.md # 项目文档

四、核心功能详解

4.1 首页

首页是一个 CSDN 风格的两栏布局：

左栏：

• 顶部 Hero 全屏动态背景，4 张轮播（樱花视频 / 银河视频 / 风铃视频 / 银发精灵图），鼠标下滑后收缩成小 banner
• 下面 4 个入口卡片：博客 / 项目 / 记录 / 空间
• 再下面是三个预览板块：
  • 博客：显示你选的那篇文章（或自动匹配"智慧校园"那篇）
  • 项目：自动拉 GitHub 最新更新的仓库
  • 最新文章：自动取你上传的最新一篇 MD
• 最下面是「联系我」板块：GitHub / CSDN / 邮箱

右栏：

• 个人卡：鲨鱼帽小白熊头像（圆形裁切 + 粉色描边），名字「谁暖了冬季」，下面是一句格言
• categories 分类统计
• archive 归档按月统计
• projects 缩略项目

右下角有个 ⚙ 设置按钮，点开可以选择首页博客板块展示哪篇文章、项目板块展示哪个仓库。

4.2 博客

博客页功能：

• 右上角「✎ 写文章」按钮，弹出 modal
• 支持上传 .md 文件，或直接粘贴 Markdown 文本
• marked.js 实时预览渲染
• 选分类、填标题，保存到 localStorage（本地）+ 后端 SQLite
• 列表 4 篇一页分页
• 每篇文章下面有 ↑ 上移 / ↓ 下移 / 删除按钮
• 点「阅读全文 →」进详情页，Markdown 完整渲染（标题、表格、代码块、图片）
• 登录后可以在文章下面评论

4.3 项目

项目页是 GitHub 同步：

• 自动调 https://api.github.com/users/Wasd2490/repos 拉仓库列表
• 每个仓库显示：名字、描述、star 数、fork 数
• 点仓库进详情页（hash 路由 #repo/<仓库名>）
• 详情页左侧是文件树，中间是 README 渲染，右侧是语言/更新时间/commit 历史
• 登录后可以在仓库下面评论

4.4 记录

记录页是我的技能栈和成长时间线：

• 技能栈：全栈、单片机、机器视觉
• 时间线：从入门到现在的关键节点

4.5 空间

空间是朋友圈风格：

• 发文字 + 图片 / 视频
• 4 条一页分页
• 右上角 × 删除
• 顶部有「动态 / 相册」两个 tab
• 相册 tab：3 列网格自动收集所有照片，点一下放大查看
• 数据存在后端 SQLite，刷新不丢

五、后端 API

Flask 后端提供这些接口：

数据库表：users / posts / moments / comments，全部 SQLite 单文件。

六、踩过的坑

6.1 CSDN 图片防盗链

文章里引用 i-blog.csdnimg.cn 的图，在自己网站加载全部 403。 解决：把 4 张预览图全部下载到 assets/ 目录，MD 里写相对路径 assets/home.png。

6.2 localStorage 存视频超限

视频转 base64 后太大，超过浏览器 5MB 限制，localStorage.setItem 静默失败，刷新就丢。 解决：改成后端 SQLite 存，Flask 限制 20MB body。

6.3 嵌套模板字符串语法错误

JS 里写 `${m.media ? `<img>` : `<video>`}` 嵌套反引号，整个页面崩。 解决：改成字符串拼接 '<img src="' + m.media + '">'。

6.4 GitHub API 限流

未认证每小时 60 次，刷新太频繁就 403。 解决：加 localStorage 缓存，首页设置弹窗打开时才重新拉。

6.5 静态文件路径规则

图片只能写在 <img src> 或 CSS url() 里，写在 JS 数组里发布会裂图。 解决：头像直接写 <img src="assets/avatar.png">。

6.6 Hero 轮播空元素

blog.html 没有 Hero 元素但轮播代码还在跑，layers[cur] 是 undefined 报错。 解决：加 if(!layers[cur])return 空判断。

七、和智慧校园项目的关系

我这个网站展示的第一个项目就是 smart-campus-lost-found：

• 原生 HTTP 全栈实现，不用 Flask/Django
• Python 标准库 ThreadingHTTPServer 处理 HTTP 报文
• MySQL 存数据，Cookie + sessions 表持久化会话
• 支持以图搜图（dHash 感知哈希）、信任分体系、PWA
• 完整的失物登记 / 招领通知 / 认领审核流程

这个项目本身就是我原生全栈能力的证明，网站也是用同样的原生思路搭的。

八、运行方式

# 安装依赖
pip install flask flask-cors

# 启动
python app.py

# 打开 http://127.0.0.1:5000

外网穿透：

ngrok http 5000

九、后续规划

• 微信登录（个人开发者申请不了，先用 GitHub OAuth）
• 评论区 互通
• 文章右侧目录自动生成
• 数据同步

十、项目已开源

谁暖了冬季 · 个人博客站 V1.3

如果这个项目对你有帮助，欢迎点赞收藏评论交流！

有问题可以在评论区留言，我会尽快回复。

联系我

• GitHub：https://github.com/Wasd2490
• CSDN：https://blog.csdn.net/wjcjjsjs
• 邮箱：3287316014@qq.com

仅供学习·著作权归@谁暖了冬季所有

项目源码已打包，下载即可运行。

开源协议

本项目仅供学习交流使用，可自由修改和转载，请注明出处。