SuBlog

尼克的小窝 — 个人技术博客

🔗 官方网站：https://nixus.top/

为什么做这个

之前一直在用各种博客平台，但总觉得不够自由，想折腾点什么也不方便。后来决定自己搭一个，顺便把平时学的技术实践一下。

选 Nuxt 3 是因为 Vue 生态比较熟，SSG 静态生成部署也方便。UI 参考了二叉树树的设计，感谢大佬的开源精神。

主要功能

写文章、搜文章这些基本功能就不说了，主要说说我觉得比较实用的：

标签系统 — 文章打标签，首页展示高频标签，点击就能快速筛选
封面制作 — 在线生成封面图，支持自定义文字、图标、背景，导出 PNG/SVG
首页个人名片 — 头像周围有 3D 技术栈图标环绕，社交入口和常用页面优先展示
网易云热评 — 首页随机展示一条音乐评论，每次刷新都不一样
暗色模式 — 跟随系统自动切换，也可以手动控制
Giscus 评论 — 基于 GitHub Discussions，不用自己搞后端

技术栈

技术	用途
Nuxt 3	Vue 3 全栈框架，SSG 静态生成
TypeScript	类型安全
Tailwind CSS v4	原子化样式
@nuxt/content	Markdown 文章管理
Shiki	代码语法高亮（支持 60+ 语言）
Giscus	评论系统

快速开始

# 安装依赖
pnpm install

# 开发
pnpm dev

# 构建静态站点
pnpm generate

写文章

pnpm new-post <文章名称>

自动生成目录结构和 frontmatter 模板，填上 description 和 tags 就能写了。

项目结构

├── assets/css/          # 全局样式和主题变量
├── components/
│   ├── layout/          # 导航栏、页脚、主题切换、3D 技术栈头像
│   └── blog/            # 文章卡片、目录、评论
├── config/site.ts       # 全站配置（改这一个文件就行）
├── content/posts/       # Markdown 文章
├── pages/               # 页面路由
├── public/              # 静态资源
├── server/              # API 代理（网易云热评等）
└── utils/               # 工具函数

配置

所有站点配置集中在 config/site.ts，站点名称、头像、社交链接、导航菜单、友链、赞助、Giscus 都在这里改，改完自动生效。首页头像使用 components/layout/AvatarOrbit.client.vue 渲染，技术栈图标、颜色、动画节奏在该组件内维护。

部署

pnpm generate

产物在 .output/public 目录，直接丢到 Nginx、Vercel、Netlify 或者 1Panel 都行。

开源计划

目前代码还不够整洁，等整理好了会考虑开源。如果你对这个项目感兴趣，欢迎先访问官方网站看看效果。

2.8 KiB Raw Blame History