我用 FastAPI + Nginx 搭建了一个 AI 热点与教程聚合站

我用 FastAPI + Nginx 搭建了一个 AI 热点与教程聚合站

最近我做了一个小型独立站 HotHub，主要用来整理 AI 热点、AI 工具导航和一些技术教程。

项目地址：https://livszhang.asia/

这篇文章不写产品推广，主要记录一下这个站从功能设计到上线部署过程中涉及到的技术点，包括 FastAPI 后端、Nginx 反向代理、博客 SEO、移动端适配、缓存优化和服务器安全加固。

一、为什么做这个站

最开始的需求其实很简单：我想把自己常看的 AI 信息和教程统一整理起来。

平时获取 AI 信息会打开很多地方：GitHub Trending、Hacker News、Product Hunt、各种博客和教程网站。工具也比较分散，有些是 AI 编程工具，有些是模型平台，有些是效率工具。教程则更麻烦，如果只是放在本地 Markdown 文档里，不方便搜索，也不方便长期沉淀。

所以我把这个站拆成了三个核心模块：

  1. AI 热点信息
  2. 工具导航
  3. 技术教程博客

首页优先展示 AI 热点，博客页沉淀长期内容，工具区作为常用入口。

二、整体技术栈

目前这个站的技术栈比较轻量：

  • 后端：FastAPI
  • 前端：原生 HTML / CSS / JavaScript
  • 反向代理：Nginx
  • 数据存储：JSON 文件 + SQLite
  • 部署方式：systemd + Nginx
  • HTTPS：Let's Encrypt 证书

因为这个项目本身不是复杂后台系统，所以没有一开始就引入大型前端框架或数据库。对一个内容型小站来说，简单、稳定、易部署更重要。

三、后端接口设计

后端使用 FastAPI，主要提供几类接口：

/api/hot          聚合热点内容
/api/ai           AI HOT 内容
/api/tools        工具导航数据
/api/blog         博客列表
/api/blog/{slug}  博客详情
/health           健康检查

工具数据目前放在 JSON 文件中，博客内容用 Markdown 文件管理。这样有几个好处：

  • 本地编辑方便
  • 版本管理简单
  • 不依赖复杂 CMS
  • 迁移成本低

博客阅读数使用 SQLite 存储。每篇文章初始阅读数在一个区间内生成，后续每次访问详情页时递增。

四、热点接口的缓存处理

热点数据有一个特点：它有时效性，但不需要每次请求都实时抓取。

如果每个用户访问首页时都去请求外部来源，不仅慢，也容易因为外部接口不稳定导致页面加载失败。所以我给热点接口加了缓存。

大致思路是：

用户请求 /api/hot
  -> 如果缓存未过期，直接返回缓存
  -> 如果缓存过期，后台重新拉取
  -> 如果拉取失败，在可接受时间内返回旧数据

这样可以减少外部请求压力，也能让首页稳定很多。

五、博客从前端渲染改为服务端输出

一开始博客详情页是前端加载的：页面先返回一个 index.html，然后浏览器再请求 /api/blog/{slug} 获取文章内容。

这种方式用户可以正常阅读，但对搜索引擎不够友好。搜索引擎抓取页面源码时，看到的可能只是一个前端应用空壳，正文内容需要执行 JavaScript 后才出现。

后来我把博客详情页改成了服务端直接输出完整 HTML。

每篇文章页面现在包含：

  • 独立 <title>
  • 独立 description
  • canonical 链接
  • Open Graph 信息
  • BlogPosting JSON-LD 结构化数据
  • 完整文章正文 HTML

例如文章 URL 是这样的：

https://livszhang.asia/blog/rag-knowledge-base-guide
https://livszhang.asia/blog/mcp-protocol-practical-guide
https://livszhang.asia/blog/ai-agent-development-guide

这样搜索引擎抓取时，可以直接看到正文内容，也更适合长期教程沉淀。

六、sitemap 和 robots

为了让搜索引擎更容易发现文章，我增加了：

/robots.txt
/sitemap.xml

robots 内容大致是：

User-agent: *
Allow: /
Sitemap: https://livszhang.asia/sitemap.xml

sitemap 中包含首页、博客列表页和每篇博客详情页。每次新增教程时，也会同步更新 sitemap。

七、移动端适配

内容站一定要考虑手机访问。这个站的前端没有用复杂框架，而是通过 CSS Grid、媒体查询和弹性布局做移动端适配。

主要处理了这些地方：

  • 顶部导航在小屏幕下保持可用
  • 卡片布局从多列变成单列
  • 搜索框在手机上不溢出
  • 文章页控制宽度和行高
  • 代码块和表格支持横向滚动

特别是教程类文章，经常会出现命令、表格和长链接。如果不处理 overflow，手机上很容易撑破页面。

八、Nginx 反向代理

线上部署时，FastAPI 服务跑在本机端口，Nginx 对外提供 80 和 443。

Nginx 主要负责：

  • HTTP 跳转 HTTPS
  • TLS 证书
  • 反向代理到 FastAPI
  • 添加安全响应头
  • 基础限流
  • 静态资源访问

FastAPI 后端只监听本机地址：

127.0.0.1:8000

这样公网用户不能绕过 Nginx 直接访问后端。

九、服务器安全加固

网站上线后，我做了一轮基础安全加固。

主要包括：

  1. 后端端口只监听 127.0.0.1
  2. UFW 防火墙只放行 22、80、443
  3. Nginx 增加基础安全头
  4. Nginx 增加限流规则
  5. 拦截明显异常的 User-Agent
  6. 安装 fail2ban，防止 SSH 爆破和 404 扫描

安全响应头包括：

Strict-Transport-Security
X-Content-Type-Options
X-Frame-Options
Referrer-Policy
Permissions-Policy

因为站点接入了 Google AdSense，所以 CSP 目前采用 Report-Only 模式，避免误伤广告脚本。

十、性能和并发情况

这台服务器配置不高，属于小型云服务器。压测时，本地后端接口在缓存命中情况下可以承受几百 req/s，但真实公网访问还会受到网络、浏览器资源、广告脚本和外部来源影响。

目前我对这个站的定位是中小流量内容站。优化重点不是一开始就做复杂分布式，而是先做好：

  • 缓存
  • 静态资源压缩
  • Nginx 入口层
  • 服务端渲染博客
  • 基础安全防护

如果后续流量上来，再考虑接入 CDN、Redis、对象存储或更高配置服务器。

十一、内容组织方式

博客教程目前使用 Markdown 文件维护，每篇文章有 frontmatter：

---
title: RAG 知识库搭建教程：让 AI 读懂你的私有文档
slug: rag-knowledge-base-guide
date: 2026-06-24
tags: [RAG, 知识库, 向量数据库, AI 应用]
summary: 面向 AI 应用开发新手的 RAG 知识库教程...
---

后端启动时读取 Markdown，解析标题、摘要、标签、正文，并生成文章 HTML。

这种方式比较适合个人技术站：

  • 写作体验接近本地笔记
  • 不需要复杂后台
  • 容易迁移
  • 适合 Git 管理

十二、后续计划

后续我准备继续做几件事：

  • 补充更多 AI Agent / RAG / MCP 实战教程
  • 给工具导航增加更细的分类和筛选
  • 优化博客文章的目录和代码块体验
  • 接入 CDN，提升静态资源访问速度
  • 增加更完整的访问统计和错误监控

总结

这个项目本身不复杂，但它覆盖了一个内容型独立站从开发到上线会遇到的很多基础问题：

  • 后端接口如何组织
  • 内容如何沉淀
  • 博客如何做 SEO
  • 移动端如何适配
  • Nginx 如何反代
  • 服务器如何做基础安全加固

完整效果可以看这里：

https://livszhang.asia/

如果你也在做个人技术站、工具导航站或 AI 教程站，希望这篇记录能提供一些参考。

posted @ 2026-06-25 21:09  ᥴꪶꫀꪖᖇꪶꪗ₉₄₂₀."  阅读(0)  评论(0)    收藏  举报