EchoBlog

整理首屏资源

8%
EchoBlog
返回项目

Project Case Study

已上线 · 2026

EchoBlog

基于 Nuxt 4 的个人主页与博客,整合内容、作品集、搜索、天气、音乐和自动发布流程。

阶段边界正式站点已上线,源码镜像、部署链路和生产巡检均有公开或可运行证据。
在线访问 Gitee 镜像 GitHub 源码 · 仓库当前需要授权访问,暂不作为公开链接
EchoBlog

项目介绍

EchoBlog 是这个站点本身,也是一次从视觉原型走到可部署产品的完整实践。它把个人主页、文章、项目、归档和关于信息组织在同一套内容模型中。

项目除了页面呈现,也覆盖内容校验、全文搜索、SEO、资源预算、生产巡检、健康检查和自动回滚,让个人站点可以持续更新,而不是只停留在一次性的展示页。

Production Case

从个人主页到可持续维护的内容站

以真实发布链路为边界,把内容、交互、资源、SEO 和运维放进同一套可验证的工程流程。

内容

内容工作流

文章和项目使用结构化 Frontmatter,创建、校验、检索和发布共享同一份内容事实。

  • 草稿文件与发布内容物理隔离
  • 标签和分类统一注册并动态计数
  • 创建后自动执行内容合法性检查
阅读

阅读与发现

从目录、归档和标签进入内容,再通过全文搜索定位到具体章节。

  • 中文分词与相关度排序
  • 代码语言、复制按钮和双主题高亮
  • sitemap、结构化数据与 canonical
发布

发布与观测

每次发布都经过本地质量门禁,生产环境继续执行健康与媒体能力巡检。

  • 自动构建、发布、健康检查和失败回滚
  • 图片与音乐 CDN 回退策略
  • 核心页面、SEO 与资源预算巡检

已实现能力

以下能力已进入当前公开版本或稳定维护流程。

  • 使用 Nuxt Content 管理文章和项目,提供草稿隔离、Frontmatter 校验、标签分类和交互式内容创建流程
  • 提供中文全文搜索、章节定位、文章目录、代码阅读、归档时间轴和活动热力图
  • 集成天气与空气质量、访问统计、音乐播放器、歌词频谱和响应式灵动岛
  • 完成 canonical、Open Graph、JSON-LD、robots、sitemap 和搜索引擎收录基础设施
  • 支持内容级索引状态,测试夹具保持可访问但不向搜索引擎提交
  • 通过 GitHub Actions 执行测试、类型检查、构建、资源预算、发布、健康检查和失败回滚

技术方案

应用

Nuxt 4Vue 3TypeScript

内容与服务端

Nuxt ContentNitroMiniSearch

交互与运维

GSAPGitHub ActionsNginx

可验证成果

公开地址、源码或工程门禁可用于核对项目当前状态。

在线版本
blog.echootaku.cn
源码镜像
Gitee 公开仓库
发布门禁
测试、类型检查、构建、冒烟、健康检查与失败回滚生产站另有定时巡检覆盖页面、接口、SEO 与 CDN 媒体能力

下一步计划

  1. 持续补充真实文章、项目记录和维护日志
  2. 根据 Search Console 与生产巡检数据优化可发现性和加载体验
  3. 在流量或部署形态需要时升级访问统计持久层