A nuxt blog site project. 一个基于 Nuxt.js 的博客项目。
告别繁琐的 "本地编辑 -> Git Commit -> Git Push -> 等待构建" 流程。
我开发这个项目的初衷，是因为发现 GitHub 上绝大多数优秀的博客项目，在发布文章时都需要在本地操作 Git 提交流程，这对于随时随地记录灵感来说非常不便。
本项目完美解决了这个问题：
- 🚀 在线直接发布/编辑：集成了强大的后台编辑器，支持你通过浏览器直接创建、修改和发布文章，体验与 WordPress 等动态博客无异。
- 💾 MD 文件物理存储：文章依然以纯粹的 Markdown 格式保存在服务器的物理磁盘上。这意味着你的数据是透明、可迁移的，且完全掌握在自己手中，没有复杂的数据库依赖。
为了直观展示，以下是博客前台和后台编辑器的实际运行截图。
（无需本地构建，浏览器直接编辑、预览并保存到服务器磁盘）
Nuxt Blog Site 是一个基于 Nuxt 4 构建的现代化全栈个人博客系统模板。它不仅具备传统静态博客的内容展示功能，还内置了强大的后台管理系统（CMS）。
该项目旨在为开发者提供一个高性能、易扩展、设计美观的个人站点解决方案。无论是作为技术博客、个人作品集，还是知识管理工具，它都能完美胜任。
主要用途：
- ✍️ 内容创作：撰写和发布技术文章、生活随笔，支持 Markdown 和富文本。
- 🌏 作品展示：优雅地展示个人项目、简历和经历。
- 🗂 知识沉淀：通过标签和分类体系，构建个人知识库。
- 🗺 足迹记录：内置交互式旅行地图，记录你的旅行足迹。
本项目采用现代化的全栈开发架构，前后端紧密集成，部署轻量。
- 前端 (Frontend):
- 基于 Nuxt (Vue 3) 框架，支持服务端渲染 (SSR) 以获得最佳 SEO 表现。
- 使用 Nuxt UI (TailwindCSS) 构建响应式、现代化的用户界面。
- 后端 (Backend):
- 利用 Nuxt 内置的 Nitro 引擎提供高性能 API 服务。
- 实现了基于 JWT 的身份验证和权限管理。
- 数据库 (Database):
- 采用 SQLite (Better SQLite3)，轻量级、零配置，非常适合个人站点，数据易于备份和迁移。
- 存储 (Storage):
- 本地文件系统存储上传的图片和资源（可扩展至对象存储）。
| 类别 | 技术/库 | 说明 |
|---|---|---|
| 核心框架 | Nuxt (v4.x) | 下一代 Vue 框架，提供 SSR、路由、自动导入等特性 |
| UI 框架 | Nuxt UI | 基于 TailwindCSS 的现代化组件库 |
| 编程语言 | TypeScript | 全类型安全开发体验 |
| 数据库 | Better SQLite3 | 高性能 Node.js SQLite 驱动 |
| 鉴权 | Nuxt Auth | 安全灵活的身份验证模块 |
| 国际化 | Nuxt I18n | 完整的国际化解决方案 (i18n) |
| 编辑器 | Vditor | 所见即所得的 Markdown 编辑器 |
| 可视化 | ECharts | 强大的数据可视化图表库 |
| 工具库 | VueUse, Zod, Date-fns | 常用组合式 API、Schema 验证、日期处理 |
- Node.js: >= 20.0.0
- 包管理器: yarn (推荐), pnpm, 或 npm
git clone <repository-url>
cd nuxt-blog-siteyarn installyarn dev启动成功后，访问 http://localhost:3000 即可预览网站。
项目根目录提供了 .env.development.example 和 .env.production.example 模板文件。
开发环境：
复制并重命名为 .env.development：
cp .env.development.example .env.development关键配置项说明：
# 数据库文件存储路径
NUXT_DB_PATH: ‘/data/blog.db’
# 文章存放路径
NUXT_BASE_PATH: '/data/blog'
# 身份验证密钥 (生产环境请务必生成强随机字符串)
NUXT_AUTH_SECRET: your_super_secret_key
# 静态资源上传路径
NUXT_STATIC_PATH: /uploads项目启动时会自动检测并初始化 SQLite 数据库表结构，无需手动运行 SQL 脚本。请确保 NUXT_DB_PATH 指定的目录存在且具有写入权限。
为了方便个性化定制，项目将大部分文案和站点信息抽离到了配置文件中。
位于项目根目录的 app_config.yml 是站点的核心配置文件，你可以修改以下内容：
- Navbar: 网站标题。
- Footer: 页脚版权信息、作者简介。
- Pages: 首页、博客页、关于页的标题和描述文案。
- SEO: 默认的 Meta 标签信息。
- Social Links: 社交媒体链接（GitHub, 掘金, Bilibili 等）。
多语言文件位于 i18n/ 目录下：
en.json: 英文翻译zh-CN.json: 简体中文翻译
如有新增字段或修改文案，请同步更新这两个文件。
- 响应式布局：完美适配桌面、平板和移动端设备。
- 深色模式 (Dark Mode)：支持系统自动切换或手动切换亮/暗主题。
- 多语言支持：内置中/英双语切换。
- 文章系统：
- 文章列表分页与筛选。
- 文章详情页（支持目录导航、代码高亮）。
- 按标签 (Tags) 分类浏览。
- 关于页面：展示个人简介及社交媒体入口。
- 评论系统：集成 Giscus 评论（需在代码中配置 Repo 信息）。
访问 /admin/login 进入后台管理系统。
🎯 隐藏的后台访问方式： 为了更优雅的用户体验,我们移除了导航栏中显眼的"管理"菜单,转而提供了两种隐藏的访问方式:
-
键盘暗号: 在页面任意位置(非输入框状态)依次输入
admin(1秒内),自动跳转到后台管理界面 -
Logo 三连击: 在 500ms 内连续点击导航栏 logo "布吉岛" 三次或以上,自动跳转到后台管理界面
-
仪表盘 (Dashboard)：查看文章统计、近期动态。
-
文章管理：
- Markdown 编辑器：集成 Vditor，支持实时预览、图片粘贴上传。
- 元数据管理：设置文章封面、标题、描述、发布时间、标签。
- 状态管理：草稿/发布状态切换。
-
旅行地图 (Travel Map)：
- 可视化管理旅行足迹。
- 目前只支持中国地图。
- 记录旅行时间与地点。
-
文件管理：图片资源的上传与管理。
-
系统设置：
- 基础设置：管理员账户设置。
- 评论管理：配置 Giscus 评论系统参数。
- 统计管理：集成 Umami 网站统计配置。
复制并重命名为 .env.production：
cp .env.production.example .env.production直接从 Docker Hub 拉取已构建好的镜像：
# 拉取最新镜像
docker pull bujidec/nuxt-blog-site:latest
# 运行容器
docker run -d -p 3000:3000 \
-v $(pwd)/data:/app/data \
-v $(pwd)/data/blog:/app/blog \
-v $(pwd)/public/uploads:/app/static \
--name nuxt-blog \
bujidec/nuxt-blog-site:latest镜像信息：
- Docker Hub 地址:
bujidec/nuxt-blog-site - 支持架构:
linux/amd64,linux/arm64 - 自动更新: 每次推送到
master分支时自动构建
如果需要自定义或本地构建，可以使用项目提供的 Dockerfile：
docker build -t nuxt-blog-site .
docker run -d -p 3000:3000 \
-v $(pwd)/data:/app/data \
-v $(pwd)/data/blog:/app/blog \
-v $(pwd)/public/uploads:/app/static \
nuxt-blog-site推荐使用 Docker Compose 进行管理，配置文件位于 docs/compose.yml。
-
准备配置文件：
cp docs/compose.yml docker-compose.yml
-
启动服务：
docker-compose up -d
详细使用说明请参考 Docker Compose 部署指南。
- 环境变量配置
cp .env.production.example .env.production
- 构建生产包：
yarn build
- 运行服务：
node .output/server/index.mjs
