·life·FEATURED

从零搭建个人博客系统 — ARKNEXUS 开发全记录

从零记录 ARKNEXUS 博客的技术选型、数据库设计、功能迭代和设计系统实现过程。

从零搭建个人博客系统

记录 ARKNEXUS 博客从零到上线的完整过程。

技术选型

技术理由
框架Next.js 14SSG + API Routes 一体化
样式Tailwind CSS原子化 CSS,快速迭代
数据库SQLite (better-sqlite3)零配置,直接文件存储
内容Markdown + Frontmatter标准格式,易于迁移
动效Framer Motion + CSS高性能声明式动画
认证HMAC-SHA256轻量级,无需数据库

数据库设计

sql23 L
CREATE TABLE posts (
  id          INTEGER PRIMARY KEY AUTOINCREMENT,
  slug        TEXT UNIQUE NOT NULL,
  title       TEXT NOT NULL,
  content     TEXT NOT NULL,
  content_type TEXT DEFAULT "markdown",
  summary     TEXT DEFAULT "",
  tags        TEXT DEFAULT "[]",
  category    TEXT DEFAULT "tech",
  featured    INTEGER DEFAULT 0,
  published   INTEGER DEFAULT 1,
  cover       TEXT,
  date        TEXT NOT NULL,
  reading_time INTEGER DEFAULT 0
);

CREATE TABLE media (
  id          INTEGER PRIMARY KEY AUTOINCREMENT,
  filename    TEXT NOT NULL,
  mime_type   TEXT NOT NULL,
  size        INTEGER DEFAULT 0,
  data        BLOB NOT NULL
);

功能清单

  • 文章 CRUD(管理后台)
  • Markdown 渲染 + 代码高亮
  • 标签系统 + 标签云
  • 全文搜索
  • 文章归档
  • 精选文章
  • 几何粒子背景
  • 媒体库(图片/视频/文档)
  • DB ↔ 文件双向同步
  • 草稿/发布状态
  • RSS Feed
  • 评论系统
  • 阅读统计

设计系统

采用明日方舟 × 终末地融合设计语言:

  • 色彩 — 暗底 + 琥珀金 + 青蓝双色系统
  • 面板 — 玻璃拟态 + 几何切角
  • 排版 — Orbitron 标题 + 系统 UI 正文
  • 动效 — 终末地自定义曲线
  • 图标 — 六边形/菱形几何图案

这个博客本身就是最好的作品展示。