매우 쉬운 Chirpy 테마 Github 블로그 만들기 ① - Jekyll Chirpy 테마 적용

Jekyll 테마와 Github를 활용해 정적 블로그를 만드는 것은 생각보다 간단합니다!
특히 Jekyll의 Chirpy 테마는 깔끔하게 정돈된 디자인을 제공하며 설정도 쉬워 빠르게 효과적인 블로그를 구축하는 데 적합하죠.
이번 포스팅에서는 Chirpy 테마를 사용해 Github 블로그를 만드는 과정을 설명하도록 하겠습니다.

Posted Jan 30, 2025

By Dev Gisoun

8 min read

사전 준비

블로그를 만들기 전에 몇가지 사전 준비가 필요합니다.

Github 계정: Github 블로그를 만드는데 당연히 필수입니다!
VSCode: 코드를 편집하고 작업할 때 사용하는 코드 편집기입니다. 특히, 이번 과정에서 사용하게 될 Dev Containers 확장 프로그램과 함께 원활한 개발 환경을 제공합니다.
Docker Desktop: 컨테이너 기반 개발 환경을 구축하기 위한 필수 도구로, 블로그를 로컬에서 테스트하고 배포하기 전에 안정적인 환경을 제공합니다. 참고로 Docker 계정도 따로 필요하니 이곳에서 계정을 먼저 생성하셔야 합니다.

사전 준비 끝! 본격적인 블로그 제작을 시작합시다.

Chirpy 템플릿 가져오기

Chirpy Starter 페이지에 접속한 후 Github 로그인을 해주세요.
우측 상단의 Use this template을 클릭한 후 Create a new repository를 선택합니다.
‘Create a new repository’ 선택
리포지토리 이름을 <username>.github.io 형태로 직접 입력합니다. <username> 부분에 본인의 Github username을 소문자로 입력하시기만 하면 됩니다. 이 리포지토리 이름은 블로그 URL로 사용될 것입니다.
그리고 Create repository를 클릭하여 리포지토리를 생성해줍니다.
username 입력 후 ‘Create repository’ 선택

이 리포지토리가 앞으로 여러분 블로그의 기본 구조가 됩니다!

Chirpy Starter가 설치된 리포지토리

블로그 배포 확인

본인 리포지토리에 Chirpy Starter가 설치된 것을 확인하셨나요? 그렇다면 자동으로 초기 버전 블로그에 대한 배포가 진행되고 있거나 이미 마무리 되었을 겁니다!

이를 확인하기 위해 리포지토리 페이지 상단의 Actions를 클릭해 주세요. Github Actions 탭

이곳에서 블로그가 빌드 및 배포되었는 지에 대한 워크플로우를 볼 수 있습니다. 현재는 초기 버전 블로그에 대한 워크플로우만 있을겁니다.
만약 모든 워크플로우에 ✅ 표시가 되어있다면 성공적으로 배포가 완료된 것입니다. 초기 버전 블로그에 대한 Workflows

브라우저 주소창에 <username>.github.io 을 입력하여 본인의 블로그를 확인해 주세요. 비어있는 블로그 페이지

개발 환경 세팅

우리는 아직 아무런 세팅을 하지 않았기에 텅 빈 블로그만 볼 수 있습니다! 때문에 추후 게시글 업로드, 블로그 설정 등을 위한 개발 환경을 구축해야 합니다. 아래 과정을 따라와 주세요.

Docker Desktop을 실행합니다. 처음 실행 시 로그인을 요구할 수 있는데 Work와 Personal 중 사전 준비 단계에서 생성한 형태의 Docker 계정으로 로그인 하시면 됩니다. 저는 Personal 계정으로 로그인 하였습니다.
Docker 첫 실행화면 (로그인 화면)
VSCode를 실행한 후 좌측의 확장 프로그램 마켓플레이스에 접근하여 Dev Containers를 검색 후 설치하세요.
VSCode에서 ‘Dev Containers’ 확장 프로그램 설치

컨테이너 환경 연결 및 블로그 리포지토리 클론

VSCode에서 F1 키를 눌러 명령 팔레트를 엽니다.
“Dev Containers: Clone Repository in Container Volume” 명령을 선택합니다.
VSCode의 명령 팔레트에서 “Dev Containers: Clone Repository in Container Volume” 검색 후 선택
1. Chirpy 템플릿 가져오기 과정에서 생성했던 블로그 리포지토리를 선택해 클론합니다.
‘컨테이너 볼륨의 Github에서 리포지토리 복제’ 선택
만약 VSCode에 Github 로그인이 안 되어있다면 아래 이미지와 같은 창을 보게 될 텐데요. 허용을 클릭하여 Github 계정 인증 페이지로 이동해 주세요.
‘허용’ 선택
해당 페이지에서 Continue를 클릭하여 로그인 및 인증을 하시면 됩니다.
Github 계정 인증 페이지에서 ‘Continue’ 선택
인증 후 VSCode로 돌아왔을 때 아래 이미지와 같이 리포지토리를 선택할 수 있다면 성공한 겁니다! 복제할 블로그 리포지토리를 클릭해 주세요.
만약 명령 팔레트가 닫혀있으면 F1 키를 눌러 명령 팔레트를 연 뒤 이전 과정을 다시 시도해 주시면 됩니다.
VSCode 명령 팔레트에서 복제할 블로그 리포지토리 선택
Dev Containers를 통해 리포지토리를 복제하였다면 VSCode 상단의 타이틀이 아래와 같이 바뀌어 있을 겁니다.
Dev Containers와 연결된 리포지토리
이어서 VSCode 터미널에서 Dev Containers의 환경 설정이 진행 중인 것을 확인하실 수 있을 겁니다.
설정이 모두 완료될 때까지 기다립시다.
Dev Containers의 환경 설정
모든 설정이 완료되었다면 터미널에서 아무 키를 눌러서 마무리해 주세요!
완료된 Dev Containers 환경 설정