satnaing/astro-paper

Astro로 만든 최소한의 반응형 블로그 테마, SEO 친화적이고 접근성 높음

템플릿맘대로 써도 됨 · MIT디자인·UI 컴포넌트Astro난이도
4,902+42이번 주0 찜
1,043포크26이슈
데모·홈페이지 열기astro-paper.pages.dev

중간맛 분석

Astro 정적 사이트 생성기 기반의 블로그 템플릿이다. 스택은 TypeScript + TailwindCSS + Pagefind(검색) + Satori(OG 이미지)로 구성되어 있다. 마크다운·MDX 지원, 라이트/다크 모드, 접근성(키보드·스크린리더), SEO 최적화, 동적 OG 이미지 생성 등이 포함되어 있다. 라우팅과 설정이 간단하고, 블로그 포스트는 src/content/posts/ 디렉토리에 마크다운으로 작성하면 된다. 라이트하우스 점수도 높아서 바로 배포 가능한 수준이다.

이런 레포예요

이럴 때 쓰면 좋아요

  • 개인 기술 블로그를 빠르게 시작하고 싶을 때
  • 마크다운으로 블로그 글을 관리하면서 SEO와 성능을 모두 챙기고 싶을 때
  • 접근성과 반응형 디자인이 중요한 블로그를 구축하려고 할 때

핵심 기능

타입 안전 마크다운 및 MDX 지원Pagefind를 이용한 정적 검색 및 동적 OG 이미지 생성접근성(키보드·스크린리더)과 라이트/다크 모드 내장

대안 대비 차별점

기본 설계 단계부터 접근성(스크린리더 VoiceOver·TalkBack 테스트 완료)을 고려하고, 정적 검색과 동적 OG 이미지 생성까지 자동화하며, 국제화(i18n) 구조를 미리 갖춘 점이 다른 블로그 테마와의 차이다.

먹어본 사람들

실제로 차려 먹어본 손님들의 흔적이에요 — 한마디와 완주 인증 모두 검수 후 공개돼요.

시식평 · 먹어본 사람 한마디

아직 시식평이 없어요. 먹어보셨다면 첫 한마디를 남겨주세요.

다른 레포 시식평 구경하기 →

이 레포로 만든 것들

🖋 완주 인증하기

아직 이 레포로 만든 완주 인증이 없어요. 첫 밥도장을 찍어보세요!

이 레포, 해먹는 법

처음 오셨어요? 어렵지 않아요 — 위에서 아래로 따라 하면 내 컴퓨터에 이 레포를 차려서 바로 맛볼 수 있어요.

준비물

  • Node.js
  • pnpm (또는 npm/yarn/bun)

바로 차려먹기Node.js (pnpm)

깃밥이 레포 구조를 확인하고 만든 실행 명령이에요. 터미널에 붙여넣으면 받기부터 실행까지 한 번에 진행돼요.

git clone --depth 1 https://github.com/satnaing/astro-paper.git &&
cd astro-paper &&
pnpm install &&
pnpm run dev

코드는 내 컴퓨터에서 실행돼요 — 처음 보는 레포라면 내용을 한번 훑어보고 실행하는 습관을 추천해요.

README가 안내하는 자세한 단계 보기
  1. Astro 템플릿으로 프로젝트 생성하기
pnpm create astro@latest --template satnaing/astro-paper
  1. 프로젝트 디렉토리로 이동하기
cd astro-paper
  1. 의존성 설치하기
pnpm install
  1. 로컬 개발 서버 시작하기
pnpm dev
  1. 프로젝트를 프로덕션용으로 빌드하기
pnpm build
  1. 배포하기 전에 빌드 결과 미리보기
pnpm preview

깃밥트라이로 맛보기

받아보기 귀찮고 살짝 불안했다면 — 안전 스캔부터 설치까지 터미널 한 줄로 끝나요.

터미널에 붙여넣으면 깃밥 안전 스캔 → 격리 폴더 clone → 설치 → 실행법 안내까지 자동이에요. 처음이어도 괜찮아요 — 이 한 줄이 전부예요.

npx gitbap-try satnaing/astro-paper

Node.js만 있으면 설치 없이 실행돼요 · 깃밥트라이가 뭐예요? →

이걸로 써먹는 법

맛봤다면 이제 써먹을 차례 — 이 레포를 내 일과 사업에 응용하는 방법을 모아뒀어요.

🍳 레시피 — AI에게 이대로 시켜보세요

레시피 불러오는 중…

별 추이 · 7일

4,902+42 / 7일

활용성 · 따라 만들기 좋은가

따라 하기 좋음샘플 점수 42/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

🟢 최근 활동 있음 · 2022년 생성

「디자인·UI 컴포넌트」 이런 레포, 매주 받아보실래요?

매주 월요일 아침, 골라 담은 밥상만. 광고 없이 · 언제든 해지.

내 레포인가요? README에 깃밥 배지 달기
[![깃밥](https://www.gitbap.com/badge/satnaing/astro-paper.svg)](https://www.gitbap.com/r/satnaing/astro-paper)
🔌 클로드에서 바로 써보기 — 깃밥 연결하는 법

깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.

방법 ① 커넥터 URL

클로드 설정 → 커넥터에 이 주소를 붙여넣기.

https://www.gitbap.com/api/mcp
방법 ② 플러그인 (체험까지)

플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
연결 방법 자세히 →

AI가 README 기반으로 요약했습니다 · 원문 보기