目录
使用 Ollama 为 Hexo 博客部署 AI 文章摘要
架构概述
Ollama 服务端部署
1. 拉起ollama的容器并设置环境变量防止CORS跨域访问
2. 为ollama下载qwen2.5:0.5b模型
3. 安全加固:配置防火墙
Hexo 服务器配置反向代理
Hexo 主题集成
1. 添加挂载点
2. 引入资源文件
3. 前端核心代码
发布于:
使用 Ollama 为 Hexo 博客部署 AI 文章摘要https://blog.eucalyptus.cc/2026/05/16/%E4%BD%BF%E7%94%A8-Ollama-%E4%B8%BA-Hexo-%E5%8D%9A%E5%AE%A2%E9%83%A8%E7%BD%B2-AI-%E6%96%87%E7%AB%A0%E6%91%98%E8%A6%81/
使用 Ollama 为 Hexo 博客部署 AI 文章摘要
架构概述
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 用户浏览器 │ ──→ │ Hexo 服务器 │ ──→ │ Ollama 服务器 │ │ │ │ (Nginx 代理) │ │ (192.168.0.2)│ │ blog.mingliang │ │ 192.168.1.2 │ │ :11434 │ │ star.com │ │ │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ ↑ ↑ └──────────── 仅允许 192.168.1.2 访问 ──────┘Ollama 服务端部署
1. 拉起ollama的容器并设置环境变量防止CORS跨域访问
docker run -d \ -v ollama:/root/.ollama \ -p 11434:11434 \ -e OLLAMA_ORIGINS="https://blog.mingliangstar.com,https://mingliangstar.com,http://localhost,https://localhost" \ -e OLLAMA_HOST="0.0.0.0:11434" \ --name ollama \ ollama/ollama2. 为ollama下载qwen2.5:0.5b模型
docker exec ollama ollama pull qwen2.5:0.5b3. 安全加固:配置防火墙
在阿里云安全组中配置:
- 入方向
11434端口:授权对象192.168.1.2 - 删除所有
0.0.0.0/0访问 11434 的规则
Hexo 服务器配置反向代理
在 Hexo 服务器(192.168.1.2)的 Nginx 中配置:
代理目录:/ 目标:url地址 http://192.168.0.2:11434 发送域名:$http_host为何需要反向代理?
- 浏览器直接请求 Ollama 存在 CORS 限制
- 通过同域名代理,前端无跨域问题
- 隐藏真实 Ollama IP,增强安全性
Hexo 主题集成
1. 添加挂载点
编辑/www/wwwroot/myblog/themes/anzhiyu/layout/post.pug,插入:
... //- AI 摘要区域(由 ai-summary.js 动态渲染) #ai-summary.anzhiyu-ai-summary !=page.content ...2. 引入资源文件
在主题布局中引入 CSS 和 JS:
inject: head: # 自定义css - <link rel="stylesheet" href="/cdn/css/ai-summary.css"> bottom: # 自定义js - <script defer src="/cdn/js/ai-summary.js"></script>3. 前端核心代码
ai-summary.js—— 纯前端 Ollama 调用,支持打字机效果和本地缓存:
- 自动提取文章正文,过滤代码块、图片等干扰内容
- 调用 Ollama
/api/generate接口生成摘要 - localStorage 缓存:同篇文章 7 天内不再重复请求
- 打字机效果:逐字输出,增强交互体验
- 适配 PJAX/Turbolinks 无刷新页面切换
ai-summary.css—— 固定配色方案,支持明暗模式切换:
- 白天模式:浅灰背景 + 白色正文框
- 暗色模式:深色背景 + 深色正文框
- 机器人图标 + 状态指示器(绿色呼吸灯)
- 移动端自适应