如何分析一个网站的技术栈与网络架构 — 以 seo.web.cafe 为例
引言
在日常工作中，我们经常需要分析某个网站用了什么技术、部署在哪里、性能如何。无论是为了学习借鉴、安全研究，还是竞品分析，掌握网站技术栈的分析方法都是一项实用技能。
今天，我以 seo.web.cafe（哥飞的 SEO 工具箱）为例，完整演示如何从零开始分析一个网站的前端技术、网络架构和基础设施。
技术栈分析
前端：零依赖的纯粹
打开 seo.web.cafe，第一印象就是干净。没有花哨的动画，没有臃肿的框架，就是一个纯粹的工具站。
通过浏览器 DevTools 检查，我发现：
- 零框架依赖：没有 React、Vue、Angular、Svelte 的痕迹
- 零构建工具：没有 Webpack、Vite、Rollup 的打包产物
- 原生三件套：纯 HTML + CSS + JavaScript
这种”返璞归真”的做法在 2026 年反而显得稀缺。大多数前端开发者习惯了框架思维，却忘了浏览器本身就能做很多事。
CSS：纸质复古风格
查看页面源码，CSS 是内联的 <style> 标签，没有外部样式表。更有趣的是它的设计语言：
:root {
--paper: #f7f6f2; /* 纸张背景色 */
--ink: #1d2433; /* 深色文字 */
--ink-2: #5a6478; /* 次要文字 */
--muted: #8a8fa3; /* 弱化文字 */
--line: #ddd9cf; /* 边框线 */
--card: #fffdf9; /* 卡片背景 */
--accent: #27559c; /* 强调色（蓝色） */
--mono: 'SF Mono', ui-monospace, Consolas, 'Courier New', monospace;
}这是一套精心设计的纸质主题：米白色背景 + 深色文字 + 蓝色强调色。没有引入任何 CSS 框架（Tailwind、Bootstrap），完全手写。
SEO 友好设计
作为一个 SEO 工具站，它在 SEO 方面也做得很到位：
- 完整的 Open Graph 标签：
og:title、og:description、og:type - JSON-LD 结构化数据：
@type: WebSite - 语义化 HTML：
<header>、<nav>、<section>、<footer> - canonical 标签：
<link rel="canonical" href="https://seo.web.cafe/"> - 中文语言声明：
<html lang="zh-CN">
极简的外部依赖
整个页面只有一个外部脚本：
<script src="https://click.pageview.click/js/script.js"></script>这是 Pageview.click 的轻量点击追踪服务，不是 Google Analytics，不是百度统计，没有任何广告代码。这种克制在当今互联网环境中难能可贵。
网络基础设施
DNS 解析
使用 dig 命令查询 DNS 记录：
dig +short seo.web.cafe A
# 104.26.4.47
# 104.26.5.47
# 172.67.73.239
dig +short seo.web.cafe NS
# rommy.ns.cloudflare.com
# serena.ns.cloudflare.com结论：DNS 完全托管在 Cloudflare，A 记录指向 Cloudflare 的 Anycast IP。
Cloudflare CDN
通过 HTTP 响应头可以确认 Cloudflare 的使用：
curl -sI https://seo.web.cafe/
# server: cloudflare
# cf-ray: a15b6804bed608d1-HKG几个关键信息：
| 指标 | 值 | 含义 |
|---|---|---|
server | cloudflare | 使用 Cloudflare CDN |
cf-ray | …-HKG | 当前请求经由香港节点 |
cache-control | public, max-age=3600 | 页面缓存 1 小时 |
无 cf-cache-status | - | 可能是 Cloudflare Free 版本 |
为什么说可能是免费版？ Pro 版通常会返回 cf-cache-status: HIT/MISS 头部，而这个站点没有。
更重要的是，源站 IP 被完全隐藏。无论你用什么方法，都无法直接获取真实服务器地址。这是 Cloudflare 的核心安全价值。
SSL 证书
echo | openssl s_client -connect seo.web.cafe:443 | openssl x509 -noout -text证书信息：
| 项目 | 值 |
|---|---|
| 颁发机构 | Google Trust Services (WE1) |
| 证书域名 | web.cafe, *.web.cafe |
| 有效期 | 2026-05-16 ~ 2026-08-14（90天） |
| 证书类型 | 通配符证书 |
这是一个由 Google Trust Services 签发的免费证书，用于 Cloudflare 代理的站点。90 天有效期意味着它会自动续签，站长无需手动管理。
协议支持
| 协议 | 状态 |
|---|---|
| HTTP/1.1 | ✅ |
| HTTP/2 | ✅ |
| HTTP/3 (QUIC) | ✅（alt-svc: h3=":443"） |
| TLS 1.3 | ✅ |
现代协议全开，访问速度有保障。
域名信息
TLD 分析
主域名是 web.cafe，其中 .cafe 是一个新通用顶级域名（gTLD），由 Identity Digital 运营。
.cafe 域名在 2023 年左右开放注册，适合咖啡相关或轻松氛围的网站。选择这个 TLD 既有辨识度，又能注册到简短的域名。
WHOIS 信息
whois web.cafe由于隐私保护，WHOIS 信息大部分被隐藏。但可以确认：
- NS 服务器：Cloudflare DNS（
rommy.ns.cloudflare.com,serena.ns.cloudflare.com） - 注册商：未公开（隐私保护）
子域名规划
seo.web.cafe — SEO 工具箱主页
new.web.cafe — SEO 模拟器游戏清晰的子域名划分，不同功能独立部署。
成本与架构总结
成本估算
| 项目 | 费用 |
|---|---|
| Cloudflare Free | $0 |
| SSL 证书 | $0 |
域名 .cafe | 约 $15-30/年 |
| 源站服务器 | 未知 |
| 总计 | 约 $15-30/年（不含源站） |
这是一个极致低成本的方案。Cloudflare Free 提供了 CDN、DDoS 防护、SSL、DNS，几乎覆盖了所有基础需求。
架构图
用户浏览器
↓
Cloudflare Edge (HKG 香港节点)
├── DNS 解析 (rommy/serena.ns.cloudflare.com)
├── DDoS 防护
├── SSL/TLS 终止
├── HTTP/2 & HTTP/3
└── 缓存 (max-age=3600)
↓
源站服务器 (IP 隐藏)
└── 可能的托管:
├── Cloudflare Pages (静态)
├── VPS (AWS/GCP/阿里云)
└── 自建服务器分析工具清单
命令行工具
# DNS 查询
dig +short example.com A
dig +short example.com NS
# HTTP 头部
curl -sI https://example.com/
# SSL 证书
echo | openssl s_client -connect example.com:443 | openssl x509 -noout -text
# WHOIS
whois example.com在线工具
- ipinfo.io — IP 地理位置查询
- WooWhois — WHOIS 查询
- SSL Labs — SSL 安全测试
- BuiltWith — 技术栈检测
浏览器 DevTools
- Elements 面板 — 检查 HTML 结构、meta 标签
- Network 面板 — 查看 HTTP 头部、请求来源
- Console — 执行 JS 检测框架特征
总结与启发
分析 seo.web.cafe 这个网站，给我最大的启发是：
- 极简主义的胜利：零框架、零依赖，照样能做出好用的工具站
- SEO 教科书：meta 标签、结构化数据、语义化 HTML，该有的全有
- 善用免费资源：Cloudflare Free + Google Trust SSL = $0 基础设施
- 内容为王：工具好不好用，不在于用了什么框架，而在于解决了什么问题
在前端工程化日益复杂的今天，这种”less is more”的设计哲学值得每个开发者思考。
感谢
特别感谢 哥飞大佬 打造并免费开放这一系列 SEO 工具站。
从关键词难度估算、KGR 计算器，到三个 SEO 模拟器游戏，每一个工具都凝聚了多年实战经验。对于想做出海 SEO 的人来说，这是不可多得的学习资源。
🙏 感谢哥飞的无私分享！
工具站地址：https://seo.web.cafe/