·life·FEATURED
从零搭建个人博客系统 — ARKNEXUS 开发全记录
从零记录 ARKNEXUS 博客的技术选型、数据库设计、功能迭代和设计系统实现过程。
从零搭建个人博客系统
记录 ARKNEXUS 博客从零到上线的完整过程。
技术选型
| 层 | 技术 | 理由 |
|---|---|---|
| 框架 | Next.js 14 | SSG + 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 正文
- 动效 — 终末地自定义曲线
- 图标 — 六边形/菱形几何图案
这个博客本身就是最好的作品展示。