logo

𝝅번째 알파카의 개발 낙서장

[Jekyll] GitHub Pages를 이용해 나만의 블로그 만들기 - 4. Jekyll 쇼핑하기

게시글
⏰ 2021-06-07 14:42:11

D O W N

https://user-images.githubusercontent.com/50317129/90983201-582f1080-e5a7-11ea-970b-8d7d82cb2084.png
Jekyll Blog
이 게시글은 Jekyll Blog 시리즈의 4개 중 4번 째 게시글입니다.
https://user-images.githubusercontent.com/50317129/260317030-e4b8575b-f09e-47f4-ab70-168a817268c6.png

Table of Contents

https://user-images.githubusercontent.com/50317129/260317030-e4b8575b-f09e-47f4-ab70-168a817268c6.png

※ 본 게시물은 Jekyll 시절의 게시글을 토대로 복원한 게시물입니다.

개요

GitHub Pages는 꼭 Jekyll로만 호스팅해야하는 것은 아니다. 해당 Repository에 전통적인 HTML, CSS, JavaScript 파일을 저장해도 호스팅엔 무리가 없다. 하지만 이 경우, 자신이 직접 모든 페이지를 디자인해야하고, 코딩 이상의 깊은 미적 감각이 요구된다. 디자인은 상황에 따라 코딩보다도 더욱 고난이도의 지식과 정교한 작업을 요구하기 때문.

다행히 Jekyll 기반 테마를 사용하면 이러한 문제를 해소할 수 있다.

Jekyll 쇼핑

아래의 사이트들에서 Jekyll 테마를 다운로드 받거나 데모 페이지를 확인해볼 수 있다. 기본적으로 무료이며, 테마에 따라 일부는 비용 청구를 통해 더욱 향상된 테마를 제공해주기도 한다.

찾아보면 이 밖에도 여러 사이트가 존재한다. 🔗 Jekyll Themes를 예시로 확인해보자.

이렇게 수 많은 테마들이 준비되어있다. 테마별로 적합한 용도가 있기 때문에, 제공하는 기능을 잘 확인해야한다. 오로지 디자이너 개인의 의도와 가치관이 담겨있기 때문에, 내가 원하는 블로그와 테마의 방향이 일치한지 확인하자.

내가 Jekyll 시절 사용했던 테마는 🔗 Moon Theme다. 깔끔하면서도 편안한 느낌이라 마음에 들었다. 대부분의 테마는 위와 같이 직접 체험이 가능한 데모 페이지를 제공하고 있으므로, 이를 활용하면 테마 선택에 도움이 된다.

원하는 테마를 선택했다면, clone 작업을 진행하자. 거의 모든 테마는 해당하는 Repository URL을 제공한다. cline 작업을 위해 테마 Repository의 URL를 알아야 한다. URL은 아래와 같이 확인할 수 있다.

해당 Repository의 주소나 사진처럼 Code 버튼을 클릭하여 URL을 확인할 수 있다.

프로젝트를 복사할 폴더에서 Git Bash를 띄우자. 콘솔에 아래의 명령어를 입력한다.

git clone {Theme URL} {username}.github.io

위 명령어는 입력한 URL의 소스를 대상 경로의 {username}.github.io 폴더로 복사하는 명령어다. 명령어가 정상적으로 실행되면 대상 경로에 {username}.github.io 폴더가 생기고, 소스를 직접 확인할 수 있다.

하지만 아직 소스를 받았을 뿐, 내가 만든 Repository와 연동하지 못 했다. 아래의 작업을 통해 연동을 진행하자.

  1. clone된 프로젝트 폴더로 들어가서 Git Bash를 띄운다.
  2. git remote set-url origin https://github.com:{username}/{username}.github.io.git 명령어를 실행한다.
  3. git push를 통해 변경사항을 기록한다.

이 과정을 끝마치고 GitHub의 Repository를 보면, 텅 비어있던 예전과 달리 테마 소스들이 들어가있음을 확인할 수 있다.

빌드에 약간의 시간이 걸리므로(~ 1분) 조금 기다렸다가 https://{username}.github.io 주소로 접속해보자. 테마가 적용되어있다면 성공이다. 물론 아직 어떠한 커스터마이징도 이루어지지 않았으므로, 데모 페이지와 큰 차이는 없다. 앞으로 여기다가 게시글을 작성하고 블로그를 꾸미면 된다.

🏷️ Related Tag

# GitHub Pages(깃허브 페이지)
# Jekyll(지킬)
# Blog(블로그)

😍 읽어주셔서 감사합니다!
도움이 되셨다면, 💝공감이나 🗨️댓글을 달아주시는 건 어떤가요?
블로그 운영에 큰 힘이 됩니다!
https://blog.itcode.dev/posts/2021/06/07/jekyll-blog-jekyll-shopping