我如何仅用 HTML、CSS 和 Markdown 构建一个零依赖的技术研究博客

Source: Dev.to

The Problem

• 技术笔记散落在 Notion、Google Docs 和各种 Markdown 文件中
• 没有集中地点来组织新技术和平台的研究
• 搭建博客感觉大材小用——为什么我需要为 Markdown 配置数据库？
• 想分享知识，但不想维护复杂的基础设施
• 图表和代码示例应当无需插件即可直接使用

解决方案：Tech Research

一个静态博客，将 markdown 文件夹转换为可搜索的知识库——免费部署在 GitHub Pages 上，零依赖。

# Add an article, run the script, push. Done.
echo "# My Research" > researching/new-topic.md
./update-manifest.sh
git push

你的研究将在几秒钟内上线，而不是数小时。

工作原理

使用 Markdown 编写 – 在 researching/ 目录下创建 .md 文件，使用 GitHub 风格的语法。

运行 Manifest 脚本 – ./update-manifest.sh 会扫描你的文章并构建索引。

推送到 GitHub – GitHub Actions 会自动部署到 GitHub Pages。

浏览与搜索 – 单页应用会加载你的 manifest 并按需渲染文章。

无需构建步骤。无需 Node.js。无需框架的繁琐。

30 秒快速入门

git clone https://github.com/quochuydev/tech-research.git
cd tech-research
python -m http.server 8000   # or: npx serve .

这将为你提供：

• index.html – 渲染所有内容的单页应用
• researching/ – 将你的 markdown 文章放在这里
• update-manifest.sh – 重新生成文章索引
• manifest.json – 所有内容的可搜索注册表

您可以研究的主题

Why This Works

• Zero Dependencies – 纯 HTML/CSS/JS，意味着在包更新时不会出现破坏。
• Mermaid Diagrams Built‑in – 架构图可直接渲染，无需额外工具。
• GitHub Pages = Free Hosting – 推送后即可忘记，GitHub 负责 SSL 与 CDN。
• Markdown First – 自然书写，让 SPA 负责渲染。
• Version‑Controlled Knowledge – 你的研究历史保存在 git 提交中。

试一试

Fork 该仓库并开始记录您自己的技术研究：

git clone https://github.com/quochuydev/tech-research.git
cd tech-research
# Create your first article
cat researching/my-topic-overview.md
---
title: My First Research
category: Learning
---

# Topic Overview

Your research goes here...
EOF

./update-manifest.sh

在浏览器中打开 index.html——您的文章已经在那里。

网站：