최신 브라우저가 필요합니다.

Self Study Map으로 돌아가기

오늘 바로 시작! · 모듈 #3

클릭 한 번으로 내 사이트 올리기

GitHub Pages

GitHub 저장소를 웹사이트로 변환합니다.
Jekyll 테마를 적용하고, 홈페이지를 꾸미고,
블로그 게시물까지 작성해 봅니다.

60분 Free 5단계 실습
GitHub Pages 소개

이 실습에서 배우는 것

pages GitHub Pages

저장소를 실제 URL로 접속되는 웹사이트로 변환

theme Jekyll 테마

_config.yml로 사이트 디자인을 한 줄로 변경

homepage 홈페이지 커스터마이징

index.md를 편집해 나만의 홈페이지 완성

blog 블로그 게시물

_posts/ 폴더에 마크다운으로 블로그 작성

실습 흐름 요약

1
Pages 활성화

Settings → Pages

2
홈페이지 편집

index.md 수정

3
사이트 구성

_config.yml 테마

4
블로그 작성

_posts/ 게시물

5
PR 병합

main에 반영

각 단계를 완료하면 GitHub Actions가 자동으로 다음 단계의 안내를 시작합니다.

pages GitHub Pages

저장소를 웹사이트로 — 무료 정적 사이트 호스팅

GitHub Pages는 GitHub 저장소의 파일을 자동으로 웹사이트로 변환해주는 무료 호스팅 서비스입니다.

별도의 서버나 도메인 없이도 실제 URL로 접속되는 사이트를 만들 수 있습니다.

  • 포트폴리오 — 개인 이력서/프로젝트 소개
  • 프로젝트 문서 — API 문서, 가이드
  • 블로그 — Jekyll을 활용한 정적 블로그
  • 무료 — 퍼블릭 저장소에서 완전 무료
실습에서는 Settings → Pages에서 main 브랜치를 소스로 선택해 활성화합니다.
GitHub Pages 사이트를 미리 보는 화면

jekyll Jekyll — 정적 사이트 생성기

마크다운을 예쁜 웹사이트로 자동 변환

Jekyll은 마크다운 파일을 HTML 웹사이트로 변환하는 정적 사이트 생성기입니다. GitHub Pages에 기본 내장되어 있습니다.

Jekyll의 장점

  • 설치 불필요 — GitHub Pages가 자동으로 빌드
  • 테마 지원 — 한 줄로 사이트 디자인 변경
  • 마크다운 지원 — .md 파일만 작성하면 됨
  • 블로그 기능 — _posts/ 폴더로 자동 블로그
실습에서는 minima 테마를 사용합니다. _config.ymltheme: minima 한 줄이면 됩니다.
Jekyll이 Markdown과 테마를 정적 사이트로 변환하는 다이어그램

homepage 홈페이지 (index.md)

사이트의 첫 화면을 마크다운으로 작성

index.md 파일이 사이트의 메인 페이지가 됩니다. 마크다운 문법으로 자유롭게 내용을 편집할 수 있습니다.

---
title: Welcome to my blog
---

# 안녕하세요! 👋
이것은 나의 GitHub Pages 사이트입니다.

홈페이지에 넣을 수 있는 것들

  • 자기 소개 — 이름, 관심 분야
  • 프로젝트 목록 — 링크와 설명
  • 이미지 — 프로필 사진, 스크린샷
실습 2단계에서 index.md를 편집해 홈페이지를 꾸밉니다.
index.md로 홈페이지를 구성하는 예시 다이어그램

config _config.yml — 사이트 설정

테마, 제목, 저자 정보를 한 곳에서 관리

_config.yml은 Jekyll 사이트의 전체 설정을 담는 파일입니다.

theme: minima
title: "내 블로그"
author: "홍길동"
description: "GitHub Pages로 만든 블로그"
timezone: Asia/Seoul

주요 설정 항목

  • theme — 사이트 디자인 테마 선택
  • title — 사이트 제목 (브라우저 탭에 표시)
  • description — 사이트 설명 (SEO)
  • timezone — 날짜 처리 시간대
실습 3단계에서 _config.ymltheme: minima를 추가합니다.
_config.yml 핵심 설정을 설명하는 다이어그램

blog 블로그 게시물

_posts/ 폴더에 마크다운으로 블로그 작성

Jekyll은 _posts/ 폴더의 마크다운 파일을 자동으로 블로그 게시물로 변환합니다.

파일 이름 규칙

_posts/YYYY-MM-DD-제목.md

예시:
_posts/2026-04-05-my-first-post.md
  • 날짜는 반드시 YYYY-MM-DD 형식
  • 제목의 단어 사이에 하이픈(-) 사용
  • 날짜 형식이 잘못되면 빌드 에러 발생
실습 4단계에서 _posts/ 폴더에 첫 블로그 글을 작성합니다.
Jekyll 블로그 게시물 파일과 URL 구조 다이어그램

frontmatter Front Matter

파일 상단의 메타데이터 — YAML 형식 설정 블록

Front Matter는 마크다운 파일 최상단에 위치하는 ---로 감싼 YAML 설정 블록입니다.

---
title: "내 블로그에 오신 것을 환영합니다"
date: 2026-04-05
---

여기부터 본문 내용을 작성합니다...

주요 Front Matter 항목

  • title — 게시물 제목 (페이지에 표시)
  • date — 게시물 날짜 (YYYY-MM-DD)
  • layout — 사용할 레이아웃 템플릿
index.md와 블로그 게시물 모두 Front Matter로 시작해야 Jekyll이 제대로 처리합니다.
Front Matter와 본문 구성을 설명하는 다이어그램

actions GitHub Actions — 실습의 비밀

뒤에서 자동으로 돌아가는 검증 시스템

이 실습은 GitHub Actions를 사용해 여러분의 진행을 자동으로 확인합니다.

동작 원리

각 단계를 완료하면 Mona(봇)가 자동으로 다음 단계 안내 코멘트를 남깁니다.

summary 핵심 정리

pages
GitHub Pages

저장소 → 웹사이트 — 무료 호스팅

jekyll
Jekyll

마크다운 → HTML 변환 엔진

homepage
index.md

사이트 메인 페이지 — 마크다운으로 작성

config
_config.yml

테마, 제목, 설정을 한 곳에서 관리

blog
블로그

_posts/YYYY-MM-DD-제목.md 형식

← → 또는 Space 로 이동