Jekyll로 만든 깃허브 블로그 배포하기

사실상 깃허브 블로그는 깃허브 블로그보다 Jekyll 블로그라고 부르는 게 좀 더 정확하다고 느낄 정도로 기능은 대부분 Jekyll에 있었는데요. 지난번 Jekyll 설치와 블로그 만들기에 이어서 깃허브에서 Jekyll 블로그 배포하는 방법을 알아봅시다. 먼저 지난 글을 못 보신 분들은 맨 하단의 링크를 타고 들어가 주세요.

깃허브 블로그 배포용 Repository 생성하기

 

깃허브에서 뭔가를 배포하려면 일단 Repository가 있어야 합니다.

깃허브 블로그 역시 Jekyll로 블로그를 만들고 깃허브 페이지라는 깃허브 자체적 호스팅 시스템을 이용해서 배포해 주는 작업이기 때문에 Repository를 생성해줘야 하죠.

깃허브 Repository 생성

깃허브 로그인을 하고 좌측 상단의 고양이 모양을 클릭하면 바로 밑에 Repository 리스트가 나올 텐데요.

초록색 New 버튼을 클릭해 줍니다.

Jekyll 블로그용 Repository 생성

먼저 Repository Name에 이름을 입력해 줍니다.

이 이름이 중요한 이유가 바로 깃허브 블로그 기본 도메인 뒤에 붙는 주소이기 때문에 블로그 이름이라고 생각하시면 됩니다.

추가적인 정보로 계정.github.io로 넣으면 뒤에 뭐가 안 붙는 주소가 되는데 이건 계정 당 하나밖에 못쓰기 때문에 저는 다른 이름으로 넣었습니다.

예를 들어 제 ID 가 jkandrea니까 jkandrea.github.io라고 적으면 되겠죠.

그 외의 Repository는 깃허브 페이지에서 "jkandrea.github.io/[Repository명]" 이런 형태로 만들어지게 됩니다.

뭐 제목에 대한 설명은 이 정도로 해두고, 설명은 써도 그만 안 써도 그만이고 Readme 파일에는 체크를 해주세요.

저는 체크를 했다고 가정하고 설명을 이어나가겠습니다.

이렇게 이름, 설명, Readme 포함 여부 체크를 했다면 맨 하단의 Create Repository 버튼을 눌러 깃허브 Repository를 생성해 줍니다.

여기서 Public 말고 Private로 하고 싶은 분들이 있을 수 있는데 저는 한 번도 사용해 본 적은 없고 해당 서비스는 유료입니다.

깃허브 Repository 생성 성공 화면

이런 화면이 나온다면 깃허브 Repository 생성에 성공한 겁니다.

 

Jekyll 블로그 깃허브 배포용 설정하기

 

이어서 Jekyll 블로그를 깃허브에 배포하기에 앞서 몇 가지 설정을 잡아줘야 합니다. Jekyll 버전을 깃허브 블로그용 버전이랑 맞춰주는 것과 URL을 맞춰주는 작업인데요.

그렇다면 깃허브에서 사용하는 버전을 알아봐야겠죠.

https://pages.github.com/versions/

Dependency versions

여기 들어가면 깃허브 페이지에서 지원하는 Jekyll 버전 정보와 각종 Jekyll 플러그인 버전 정보가 나와있습니다.

깃허브 페이지 버전 정보

여기서 우리가 유심히 봐야 될 부분은 깃허브 페이지의 버전 정보입니다.

이걸 확인했다면 우리가 만든 블로그 폴더 내부로 이동합시다.

Jekyll 블로그 프로젝트 자동 생성 파일

그리고 표시된 Gemfile을 메모장으로 열어줍니다.

메모장을 하나 열고 그 창위로 이 파일을 드래그해 주면 됩니다.

열어보면 외계에서 온 영어들이 보입니다.

여기서 gem "jekyll", 버전이라고 된 부분의 앞에 #을 붙여줍니다.

그리고 거기서부터 5번째 줄 아래에 있는 # gem "github-pages", group: :jekyll_plugins 라고 되어있는걸 샵(#)을 지우고 gem "github-pages", "~> 깃허브 페이지 버전" group: :jekyll_plugins 이렇게 바꿔줍니다.

# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
gem "jekyll", "~> 4.3.2"
# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.5"
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
# gem "github-pages", group: :jekyll_plugins
# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
end

쉽게 말해 이렇게 돼있던걸 아래와 같이 바꾼 거죠.

# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
#gem "jekyll", "~> 4.3.2"
# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.5"
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
gem "github-pages", "~> 228" group: :jekyll_plugins
# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
end

이렇게 바꿨다면 저장하고 꺼줍니다.

 

다음으로 _config.yml 파일을 같은 방법으로 메모장에 열어줍니다.

중간쯤 보면 title : Your awesome title이라고 돼있는 부분이 있습니다.

여기는 블로그 타이틀이 들어갈 위치니까 이름을 하나 적어줍시다.

email과 description은 어쩌든 상관없고 baseurl에 /Repository명/으로 바꿔주고 url을 https://깃허브계정.github.io로 로 바꿔줍니다.

title: Jerry's Dev Center
email: jerry@unknown.com
description: >- # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: /JerrysDevCenter/ # the subpath of your site, e.g. /blog
url: https://jkandrea.github.io # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username:  jekyll

이렇게 바꿔주면 되는 거죠.

이렇게 바꿨다면 마찬가지로 저장하고 닫아줍니다.

이제 우리의 Jekyll 블로그는 깃허브 페이지에 올라갈 준비를 마쳤습니다.

깃허브 페이지에 Jekyll 블로그 올리기

 

이제 깃허브 페이지에 Jekyll 블로그를 올려주는 일만 남았습니다.

우선 아까 깃허브에서 만든 Repository로 들어가 줍니다.

깃허브 Repository 화면

상단의 화면이 보인다면 Add File을 눌러주고 Upload files 버튼을 눌러줍니다.

깃허브 페이지에 올릴 파일을 넣는 화면

그러면 Drag Files 어쩌고 나오는데 여기다가 아까 그 폴더의 파일을 넣어줄 겁니다.

_site와 .jekyll-cache 폴더 두 개를 제외하고 전부 드래그해서 넣어주세요.

Jekyll 프로젝트를 옮겨넣은 화면

이렇게 파일들이 올라올 텐데요.

Commit changes에 적당한 문구를 하나 넣어주고(아무거나 넣어도 상관없음)

Commit changes 버튼을 눌러줍니다.

이렇게 하고 나면 Code에 해당 파일들이 올라온 게 보일 겁니다.

 

깃허브 페이지 설정 화면

마지막으로 Settings 탭으로 이동해서 Pages를 클릭한 뒤 Brance에 None이라고 되어있는걸 main으로 바꿔줍니다.

아마 뒤에 root는 따라 바뀔 거고 이렇게 바뀐 걸 확인한 뒤 Save 버튼을 눌러줍니다.

그러고 나서 기다려주세요. 깃허브 블로그의 경우 반영되는데 시간이 좀 걸리기 때문에 기다림의 시간이 필요합니다.

한 2~3분 정도 기다리고 나면 GitHub Pages라고 되어있는 부분 바로 밑에 무슨 주소가 나오고 Visit site 버튼이 활성화됩니다.

이 Visit Site 버튼을 누르면 성공적으로 우리가 만든 깃허브 블로그에 접속된 것을 확인할 수 있습니다.

상단에는 깃허브 블로그 제목이 나올 거고 Jekyll에서 자동으로 생성한 Welcome to Jekyll이라는 포스팅이 하나가 등록돼 있죠.

그리고 주소는 다시 한번 말하지만 계정명.github.io로 Repository를 생성했다면 계정명.github.io라는 주소가 될 거고 다른 이름의 Repository를 생성했다면 계정명.github.io/Repository명/이 될 겁니다.

연결 문서 정리

마지막으로 문서 상단에 언급한 루비와 Jekyll을 설치하고 Jekyll 블로그를 생성하는 방법은 하단의 링크를 참고해주시면 감사하겠습니다.

 

2023.08.07 - [IT기타/코딩 블로그 운영] - 깃허브 블로그를 위한 루비와 Jekyll 설치하기

깃허브 블로그를 위한 루비와 Jekyll 설치하기