---
title: Hello World - 欢迎来到尼克的小窝
published: 2026-05-31T08:00:00
updated: 2026-05-31
description: 博客上线啦！这篇文章介绍本站的技术架构、功能特性和搭建过程中的一些思考。
image: /posts/hello-world/img/cover.jpg
pinned: true
tags: ['博客', 'Nuxt']
draft: false
series: Nuxt 博客开发
seriesOrder: 1
difficulty: 入门
---

## 博客上线啦！

Hello World！欢迎来到**尼克的小窝**，这是我的第一篇博客文章。

经过一段时间的折腾，这个基于 Nuxt 3 的个人博客终于上线了。在这里记录一下这个项目的技术选型和功能特性。

## 技术栈

本站使用了以下技术：

| 技术 | 用途 |
|------|------|
| **Nuxt 3** | Vue 3 全栈框架，提供 SSG、路由、API 等能力 |
| **TypeScript** | 类型安全，提升开发体验 |
| **Tailwind CSS v4** | 原子化 CSS，快速构建 UI |
| **@nuxt/content** | Markdown 驱动的内容管理 |
| **Shiki** | 代码语法高亮 |
| **Giscus** | 基于 GitHub Discussions 的评论系统 |

## 功能特性

目前已实现的功能：

- **博客系统** - Markdown 文章，支持代码高亮、目录导航、搜索
- **暗色模式** - 跟随系统或手动切换
- **文章搜索** - 支持标题、描述、正文、标签多维度搜索
- **标签系统** - 文章标签分类，高频标签快速筛选
- **友链页面** - 展示友情链接，支持申请
- **赞助页面** - 微信收款码展示
- **封面制作** - 在线生成封面图片工具
- **网易云热评** - 首页随机展示音乐评论
- **访客统计** - 不蒜子计数器，带数字滚动动画
- **SEO 优化** - 自动生成站点地图、Open Graph 标签

## 代码示例

本站的配置非常集中，一个文件搞定全站定制：

```typescript
// config/site.ts
export const siteConfig = {
  siteName: '尼克的小窝',
  url: 'https://nixus.top/',
  avatar: 'https://q2.qlogo.cn/headimg_dl?dst_uin=xxx&spec=100',
  // ... 改这一个文件，全站生效
}
```

文章的 frontmatter 也很简洁：

```yaml
---
title: 文章标题
published: 2026-05-31T08:00:00
description: 文章简介
tags: ['Nuxt', 'TypeScript']
---
```

## 部署

本站使用 SSG 静态生成，构建后直接部署到静态托管即可：

```bash
npx nuxi generate
```

构建产物在 `.output/public` 目录下，可以直接丢到 Nginx、Vercel、Netlify 等平台。

## 后续计划

- [ ] RSS 订阅
- [ ] 文章目录优化
- [ ] 更多小工具
- [ ] 持续输出内容

## 致谢

感谢 [二叉树树](https://2x.nz) 的开源项目，本站的 UI 设计参考了他的项目。

---

**感谢阅读！如果觉得不错，欢迎点个 Star 或者留个评论 (☞ﾟヮﾟ)☞**