Home Jekyll _Chirpy테마 블로그 만들기
Post
Cancel

Jekyll _Chirpy테마 블로그 만들기

시작하기

Jekyll 로 블로그를 만드는 방법은 인터넷에 구글링 하는 방법들을 따라하면 굉장히 오류가 많다. 지금 내가 쓰고 있는 _Chirpy 테마 적용이 특히 그러하다.

_Chirpy 테마의 장점 💕

이 테마가 좋은 점은 무려 카테고리, 태그, 댓글, 검색 기능이 자동으로 딸려있다는 점이다. 블로그를 시작하기에 가장 적합한 테마라고 생각한다.

깃허브 블로그 만들기

테마 레포지토리 Fork하기

수 많은 에러와 오류를 겪은 입장에서 그냥 테마 파일 통째로 Fork 하는 방식을 추천한다.

일단 간단하게 _Chirpy테마 깃허브 에서 테마를 Fork 해주도록 하자. 위 깃허브 사이트에 들어가서 우측의 Fork 버튼을 눌러주면 자동으로 내 깃허브 계정으로 레포지토리가 복사가 된다.

나의 레포지토리 이름 변경하기

그 후 복사 된 _Chirpy 레포지토리의 이름을 변경하면 된다. 해당 레포지토리에 들어가서 위쪽에 위치한 Setting - General 설정에서 바꿔주면 된다

깃허브 이름을 [당신의 Github Username].github.io 로 바꿔준다. 그렇게 하면, 10분에서 길면 몇시간까지 (💢전 계속 안 되어서 포기하고 자고 일어나니까 만들어져있었음) 기다리면 당신의 홈페이지가 만들어질 것이다. 이렇게 해서 당신의 깃허브 홈페이지 주소는 Username.github.io 가 된다.

1. 주의할 점 :

Username 에 대문자가 포함되어 있다면 모두 소문자로 바꿔주어야 합니다!

2. 저는 제 Username도 모르겠어요

이름은 나의 Github Username을 사용하면 되는데, 깃허브 우측 상단의 조그만 계정 프로필을 누르면 나오는 Signed in as [Username] 이 당신의 Username 이다.

_Chirpy 테마 적용하기

이렇게 해서 당신의 깃허브 홈페이지 주소는 Username.github.io 가 된다. 당연히 테마도 적용되어 있겠지? 그런데 들어가면 ? 놀랍게도 아무것도 안 나온다! :-) ✨

layout: home # Index Page --- — --- layout: home # Index Page ---.

이런 문구만이 당신을 반긴다. (●’◡’●)

당신은 블로그를 커스텀 하고 Git Bash를 설치하여 아래와 같은 작업을 해주어야 한다.

블로그 커스텀하기

chirpy 사이트에 있는 튜토리얼 대로 하면, 예상 못한 에러가 쏟아진다. 💔 수십번의 에러와 구글링을 통해 얻은 오류 없는 한방 해결 루트는 다음과 같다.

1. Username.Github.io 레포지토리 Clone 하기

내 컴퓨터로 해당 레포지토리를 Clone 해온다.

2. 폴더 내용 커스텀하기

_config.yml 파일을 메모장으로 열어준다. 그 후 당신이 수정해야 하는 내용은 다음과 같다. 한 문장씩 찾아서 내용을 써주면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---

timezone: Asia/Seoul
title: 🎀블로그 타이틀🎀
tagline: 블로그 설명(부제)

url: 'https://Username.github.io'

github:
  username: Username

social:
  name: Username
  email: 당신의 이메일@gmail.com
  links:
    - https://github.com/Username

---

여기까지는 사실 다른 블로그 테마들과 다를 게 없다. 하지만 chirpy 테마는 남다르다…

그리고 아직! Github에 Push 하지 마세요!

3. (💥필수💥)

그 후, 당신이 클론한 블로그 레포지토리 폴더로 돌아와서 다음과 같은 작업 해주어야 한다.

1) .github에서 pages-deploy 파일만 살리기

경로: 당신 블로그 폴더 - .github (의 하위 폴더 workflows 포함)에서 pages-deploy.yml.hook 파일을 제외한 모든 파일을 삭제해줍니다.

그 후에 pages-deploy.yml.hook 파일 이름 변경을 하여 pages-deploy.yml 으로 뒤에 hook을 제거하여 확장자명 변경을 해줍니다.

이렇게 하고 Github에 push를 하려고 하면 workflows 권한 오류가 뜨면서 push가 안 될겁니다. 당연함. 우리는 권한을 추가해줘야 합니다.

2) workflows 권한 추가하기

github 홈페이지 - Settings - Developer settings - Personal access tokens 에서 Getnerate new token 을 하고 난후 또는, 이미 token이 있다면 해당 token을 클릭하고

Edit personal access token - Select scopes - workflows 체크!

이제 workflows Push 에러가 사라진다. 여기까지 해서 Github에 Push 해보자! 넉넉 잡아 1시간 내에 처리가 된다. 이제 당신의 블로그 홈페이지가 보일 수도 있다. 되면 좋겠지만 만약 안 된다면…

3) Ruby, Gem 설치 후 bundle 추가하기

여기까지 해서 작동이 안 된다면 당신은 코딩 추가 작업을 해주어야 한다. 이 작업을 해놓으면 후에 Local 서버로 블로그 상태를 확인하는 실시간 작업을 할 수 있으므로 하는 것을 추천한다. (●’◡’●)

1) Ruby 설치하기

  • 가장 최신 버전으로 받아준다.
  • 로컬 서버로 블로그를 돌릴 때 필요합니다. 그냥 받아두면 나중에 쓸 일이 있을 것.

2) Gem 설치하기

  • 이 녀석이 핵심입니다. 가장 최신 버전으로 받아준다.

3) 없는 사람? Git Bash 설치하기


[1] Git Bash를 열고 클론한 깃허브 블로그 폴더 경로로 들어가준다.

1
cd 블로그-폴더-경로

… [2] 그 후 다음을 입력

1
bash tools/init.sh

오류 나도 그냥 따라오세요

[3] 다음을 입력

1
bundle

[4] 이제 Push를 해보세요!

  • 여기까지 과정에 왔으면 이름이 gh-pages 인 새 브런치가 만들어져 있을겁니다! (이 부분이 반드시 되어있어야 함! ✨매우 매우 중요✨ )
  • 위 과정이 어떤 알 수 없는 에러로 안 되었다면 구글링을 통해서 꼭 해결해야 합니다. (…)

4) 깃허브 블로그 Page 세팅하기

당신의 블로그 레포지토리 - Settings - Pages - Source 에서 Branch를 새로 만들어진 gh-pages로 변경합니다!

Local 서버로 확인하기

나는 그닥 사용하지 않지만 Local 서버로 홈페이지를 확인하고 싶다면 다음과 같이 하면 된다. 오류 뜨시는 분들을 위해서 제가 오류해결을 정리한 티스토리 링크 남기고 갑니다 (다음에 계속…)

포스팅 해보기

아래에 Jekyll 포스팅 튜토리얼을 번역한 글을 참조하시길 바랍니다… 이 글의 당신의 블로그 생활에 도움이 되길 (●’◡’●)

This post is licensed under CC BY 4.0 by the author.