Back to VNotes

Project / VWebServer

用自己的 C++ WebServer 搭建个人笔记站

这篇记录我的个人笔记站是如何搭建起来的。它不是单纯的前端页面展示，而是把自己实现的 C++ WebServer 真正用起来，让它托管静态资源、响应浏览器请求，并承载长期维护的学习笔记。

为什么要搭建这个笔记站

我搭建这个笔记站主要有两个目的。

第一，把之前零散的 C++、Linux、MySQL 和算法笔记用ai整理成一个可以长期回看的知识库。相比散落在本地目录里的 Markdown，站点化之后更适合浏览、检索和对外展示。

第二，让自己实现的 C++ WebServer 承载一个真实页面，而不是只停留在返回 Hello World、echo server 或压测接口的阶段。因此，这个站点既是学习笔记的展示入口，也是 WebServer 项目的一个实际使用场景。

整体架构：C++ WebServer + 静态前端页面

当前站点采用静态页面方式构建。浏览器向服务器发起 HTTP 请求，云服务器上的 C++ WebServer 监听端口并解析请求路径，再从静态资源目录中返回对应的 HTML、CSS、JavaScript 和图片文件。

Browser
  ↓
Cloud Server
  ↓
C++ WebServer
  ↓
Static Resource Directory
  ↓
HTML / CSS / JS / Notes

前端部分主要负责展示笔记分类、文章列表和项目记录；后端部分则负责监听端口、解析 HTTP 请求、映射静态文件路径并返回响应。目前笔记内容以静态页面方式组织，后续可以考虑加入 Markdown 构建脚本，把 Markdown 自动转换为 HTML 页面。

后端：使用自己的 WebServer 托管静态资源

这个站点的后端没有直接使用 Nginx 或现成 Web 框架，而是使用自己实现的 C++ WebServer 来托管静态资源。

WebServer 主要负责：

  • 接收浏览器发来的 HTTP 请求。
  • 解析请求行和请求头。
  • 根据 URL 映射本地静态资源路径。
  • 返回 HTML、CSS、JavaScript、图片和 favicon 等文件。
  • 对不存在或不可访问的资源返回 404 / 错误响应。
  • 通过日志记录请求路径、错误信息和运行状态。

这让 WebServer 从一个单纯的练习项目，变成了一个能承载真实页面的服务端程序。首页、笔记详情页、样式文件、图标和静态资源都可以作为它的真实用例。

前端：用 AI 辅助完成页面原型和样式迭代

前端部分主要通过 AI 辅助开发完成。我先确定页面结构、内容分区和视觉风格，再使用 Codex 辅助生成 HTML/CSS 原型，之后根据实际效果进行人工调整。

这个过程接近现在常说的 vibe coding：先用自然语言描述目标效果，再通过多轮调整把页面迭代到可用状态。但 AI 辅助并不意味着完全不理解代码。实际调整过程中仍然需要理解 HTML 结构、CSS 布局、响应式效果以及静态资源路径，否则生成结果很难真正部署到自己的服务器上。

在这个站点里，AI 更多承担的是原型搭建和文案润色的角色；内容结构、项目重点、交互逻辑和最终取舍仍然由我来决定。

内容组织：C++ / Linux / WebServer / 算法笔记

站点内容主要分为三类。

  1. C++ 后端学习笔记：包括 C++ 基础语法、现代 C++、Linux 命令、MySQL 和算法笔记。
  2. WebServer 项目构建记录：记录 WebServer 从阻塞式服务器到 epoll + 线程池架构的演进过程，包括非阻塞 I/O、Connection 缓冲区、HTTP 状态机、Keep-Alive、静态文件服务和压测分析。
  3. 个人站点搭建记录：记录如何使用自己的 WebServer 托管笔记站，以及前端页面、部署流程和后续优化计划。

这样组织以后，首页负责展示最高价值入口，All 和分类区负责归档，单篇文章负责沉淀具体实现和复盘。

部署过程：云服务器、端口、进程管理

站点部署在云服务器上。服务器端运行自己实现的 C++ WebServer，前端静态资源放在指定的资源目录下。浏览器访问服务器 IP 和端口后，WebServer 根据请求路径返回对应页面。

部署流程大致包括：

  • 在云服务器上准备 Linux 运行环境。
  • 编译 C++ WebServer。
  • 配置监听端口和静态资源目录。
  • 上传 HTML、CSS、JS、favicon 和 notes 页面。
  • 启动服务并在浏览器中访问测试。
  • 后续考虑使用 systemd、tmux 或 Docker 管理后台进程。
make
./VWebServer --port 8080 --threads 4 --root ./Resources

命令参数会以实际项目为准。这里更重要的是记录部署链路：静态资源目录必须和 WebServer 的 root_dir 对齐，浏览器请求路径必须能映射到真实文件。

遇到的问题与解决

这个站点在搭建过程中最容易遇到的问题，不是页面能不能写出来，而是“写出来之后能不能被自己的服务器正确返回”。

  • 静态资源路径问题：如果 /style.css 请求找不到文件，需要检查 URL 到本地路径的映射规则。
  • Content-Type 问题：HTML、CSS、JS、图片需要返回不同的 Content-Type，否则浏览器可能无法正确解析。
  • 端口访问问题：云服务器安全组、防火墙、监听地址都可能导致外部无法访问。
  • 页面刷新 404 问题：纯静态多页面需要保证文件路径真实存在；如果以后使用前端路由，则需要后端做路径回退。
  • 后台运行问题：SSH 断开后服务进程如何保持运行，可以使用 nohup、tmux、systemd 或 Docker。

这些问题看起来和前端页面关系不大，但它们正好能验证 WebServer 是否真的具备托管静态站点的能力。

后续计划：域名、HTTPS、Cloudflare、自动化部署

后续计划会尽量围绕真实可做的事情推进，而不是堆概念。

  • 绑定个人域名。
  • 配置 HTTPS。
  • 接入 Cloudflare 做 DNS / 缓存 / 安全防护。
  • 增加 Markdown 自动构建流程。
  • 优化移动端适配。
  • 继续完善文章搜索和分类索引。
  • 使用 systemd 管理 WebServer 进程。
  • 增加访问日志统计。

这篇文章的定位是：用一个真实站点证明自己的 C++ WebServer 能跑起来、能部署、能承载静态资源。