HTML, CSS, Markdown만으로 제로 종속성 기술 연구 블로그를 만든 방법

Source: Dev.to

The Problem

• Notion, Google Docs, 그리고 무작위 마크다운 파일에 흩어져 있는 기술 노트
• 새로운 기술과 플랫폼에 대한 연구를 정리할 중앙 장소가 없음
• 블로그를 설정하는 것이 과도하게 느껴짐—마크다운을 위해 데이터베이스가 왜 필요하지?
• 지식을 공유하고 싶지만 복잡한 인프라를 유지하고 싶지는 않음
• 다이어그램과 코드 예시는 플러그인 없이 바로 작동해야 함

솔루션: Tech Research

A static blog that turns a folder of markdown files into a searchable knowledge base—deployed free on GitHub Pages with zero dependencies.

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

Your research is live in seconds, not hours.

작동 방식

Markdown으로 작성 – researching/ 디렉터리에서 GitHub‑flavored 구문을 사용해 .md 파일을 만듭니다.

Manifest 스크립트 실행 – ./update-manifest.sh 가 여러분의 글을 스캔하고 인덱스를 구축합니다.

GitHub에 푸시 – GitHub Actions가 자동으로 GitHub Pages에 배포합니다.

탐색 및 검색 – SPA가 매니페스트를 로드하고 필요할 때마다 글을 렌더링합니다.

빌드 단계 없음. 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/ – 여기서 마크다운 문서를 넣으세요
• update-manifest.sh – 기사 인덱스를 재생성합니다
• manifest.json – 모든 콘텐츠를 검색할 수 있는 레지스트리

연구할 수 있는 주제

왜 이것이 작동하는가

• Zero Dependencies – 순수 HTML/CSS/JS이므로 패키지가 업데이트될 때 깨지는 것이 없습니다.
• Mermaid Diagrams Built‑in – 별도의 도구 없이 아키텍처 다이어그램을 렌더링합니다.
• GitHub Pages = Free Hosting – 푸시하고 잊어버리세요; GitHub가 SSL과 CDN을 처리합니다.
• Markdown First – 자연스럽게 작성하고, SPA가 렌더링을 담당하게 합니다.
• Version‑Controlled Knowledge – 연구 기록이 git 커밋에 보관됩니다.

Try It

레포지토리를 포크하고 직접 기술 연구를 문서화해 보세요:

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을 브라우저에서 열면 — 당신의 글이 이미 표시됩니다.

Website: