Hackers.pub 정적 블로그 템플릿

한국어 | English | 日本語

Astro와 Tailwind CSS로 제작된 Hackers.pub 미러 블로그 템플릿입니다. GraphQL API를 통해 선택한 계정의 글과 프로필 정보를 가져와 정적 HTML로 변환하고, 원하는 정적 호스팅 서비스에 배포할 수 있습니다.

개요

• Astro 프런트엔드 + Tailwind CSS 스타일링.
• graphql-request로 Hackers.pub GraphQL API에서 데이터를 가져옵니다.
• 데이터 헬퍼를 간단히 수정해 자신의 핸들로 연결할 수 있습니다.

빠른 시작

필수: Node.js 20, pnpm 9.12.2.

pnpm install
pnpm run dev

개발 서버는 http://localhost:4321에서 동작합니다. Hackers.pub API는 공개되어 있어 별도의 토큰이 필요 없습니다.

나만의 핸들로 커스터마이징

1. src/data/blog-data.js에서 핸들 문자열(@kodingwarrior)을 원하는 계정으로 변경하세요.
2. astro.config.mjs의 site 값을 실제 배포 도메인(예: GitHub Pages 주소)에 맞게 수정하세요.
3. 필요하다면 src/data/blog-data.js에서 GraphQL 필터나 필드 구성을 조정하세요.

프로덕션 빌드

pnpm run build
pnpm run preview

dist/ 디렉터리에 생성된 정적 파일을 GitHub Pages, Netlify 등 원하는 정적 호스팅에 업로드하면 됩니다.

프로젝트 구조

/
├── public/              # 정적 에셋
├── src/
│   ├── components/      # UI 컴포넌트
│   ├── data/            # GraphQL 헬퍼
│   ├── layouts/         # 레이아웃
│   ├── pages/           # 페이지 라우트
│   └── utils/           # 유틸리티
├── dist/                # 빌드 결과물 (자동 생성)
├── astro.config.mjs
├── package.json
└── pnpm-lock.yaml

라이선스

상세 내용은 LICENSE 파일을 참고하세요.