배경
📯
개발 •  • 읽는데 4분 소요

Jekyll 테마로 나만의 Github 페이지 만들기

Git을 설치하고, 이미 만들어진 테마를 복사해 내 계정 소유의 Github 페이지를 호스팅합니다.

#Blog
#Jekyll


이번 글에서는 Jekyll을 로컬 컴퓨터에 설치하지 않고, Jekyll 테마를 하나 복사하여 본인의 Github 페이지를 만들어 보도록 하겠습니다.

Git 설치하기

1

우선 Git을 다운로드 합니다. 본인의 컴퓨터 운영체제에 맞는 버전을 설치하면 됩니다. Git은 로컬 컴퓨터에서 글을 작성하고 수정한 내용들을 Github에 Push해 실제 서버에 결과가 반영되도록 만들어주는 역할을 합니다. 설치 프로그램이 실행된 이후에는 몇 가지 선택할 수 있는 옵션들이 나올텐데, 그냥 이미 선택되어 있는 옵션으로 설치하면 됩니다.

마음에 드는 테마 고르기

0

다음으로는 각자 마음에 드는 Jekyll 테마를 찾아 봅시다. 구글 같은 검색 포털에서 찾아보셔도 좋고, Jekyll 테마를 전문적으로 다루는 사이트에서 찾아보셔도 좋습니다. 각자 마음에 드는 테마를 골라, 해당 테마의 Github 저장소로 이동해봅니다.

00

제가 선택한 테마는 Startbootstrap Clean Blog입니다. 각자 선택한 테마의 우측 상단에 있는 Clone을 클릭하면 해당 저장소가 본인의 저장소로 복사됩니다. 이때, 각 테마가 Jekyll 전용 테마인지를 꼭 확인도록 하세요.

2

잠시 기다리면, 화면 왼쪽 상단에 자신의 계정 이름으로 해당 저장소가 복사되었음을 확인할 수 있습니다.

저장소 이름 변경하기

Github에서는 본인 계정의 이름을 가진 도메인을 사용할 수 있습니다. 이제 해당 테마에 도메인을 적용시켜 보도록 하겠습니다.

3

Settings에 가서 기존에 있던 저장소 이름을 본인의 계정.github.io로 변경합니다.

4

이름이 성공적으로 바뀌었다면, 위 사진과 같은 저장소 이름을 확인할 수 있습니다.

로컬 컴퓨터에서 설정 변경하기

8

현재 상태로는 테마 내부의 세부 설정이 바뀌지 않아, 도메인을 바꾸었다 하더라도 아직 페이지를 확인할 수 없습니다. 따라서 Github Desktop 프로그램을 이용해 로컬 컴퓨터에 테마를 다운받아 일부 설정을 변경해보도록 하겠습니다. 여기서부터는 각 테마마다 구성 파일들이 다를 수 있으므로, 해당 테마에서 비슷한 파일을 찾아보시기 바랍니다.

5

저장소 우측에 있는 클론 버튼을 이용해 해당 저장소를 로컬 컴퓨터에 다운로드합니다.

6

Github Desktop 프로그램이 있다면, 저장소를 클론하는 진행 과정을 볼 수 있습니다.

7

클론이 완료되면 해당 테마를 구성하고 있는 파일들을 로컬 컴퓨터의 탐색기에서 확인할 수 있습니다.

9

_config.yml 파일을 열어, URL을 비롯한 여러 옵션들을 바꾸어 준 뒤 저장합니다.

변경한 설정 푸시하기

10

이제 다시 Github Desktop으로 돌아갑니다. 현재 변경한 파일들을 커밋하여 Master 브랜치에 푸시합니다.

11

Github 저장소에 있는 Settings에 들어갔을 때, published 되었다는 알람이 뜨게 되면 정상적으로 테마가 업로드 된 상태입니다.

12

처음에 세팅한 URL로 들어가보면, 테마가 그대로 복사된 것을 확인할 수 있습니다. 여기까지 왔다면, 테마를 성공적으로 여러분의 Github 페이지에 적용시킨 상태입니다. 이제부터는 로컬 컴퓨터에서 필요한 부분은 커스터마이징하여 여러분의 입맛대로 테마를 수정하시면 됩니다.

이 포스트가 유익하셨다면?




프로필 사진

👨‍💻 정종윤

글 쓰는 것을 좋아하는 프론트엔드 개발자입니다. 온라인에서는 재그지그라는 닉네임으로 활동하고 있습니다.


Copyright © 2024, All right reserved.

Built with Gatsby