Hello World - 欢迎来到尼克的小窝

博客上线啦！这篇文章介绍本站的技术架构、功能特性和搭建过程中的一些思考。

博客Nuxt
Hello World - 欢迎来到尼克的小窝

博客上线啦！

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

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

技术栈

本站使用了以下技术：

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

功能特性

目前已实现的功能：

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

代码示例

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

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

文章的 frontmatter 也很简洁：

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

部署

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

npx nuxi generate

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

后续计划

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

致谢

感谢 二叉树树 的开源项目，本站的 UI 设计参考了他的项目。

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

评论

← 返回文章列表