GitHub 블로그 쉽게 만들기: Jekyll chirpy 테마 활용법

안녕하세요, 여러분! 오늘은 GitHub와 Jekyll chirpy 테마를 이용하여 블로그를 만드는 과정을 소개하려고 합니다. 초보자분들도 쉽게 따라 할 수 있도록 자세히 설명할게요!

시작 전 준비사항

먼저, 블로그를 만들기 위해 필요한 준비물들을 살펴봅시다.

• WSL(Windows Subsystem for Linux) 설치: Windows 사용자의 경우, Linux 환경을 사용할 수 있게 해주는 WSL을 설치해야 합니다.
• Ruby 설치: Jekyll은 Ruby 기반으로 작동하니, Ruby를 설치해야 해요.
• Jekyll 설치: Ruby가 설치되면, Jekyll을 설치할 수 있습니다.
• GitHub 가입: 블로그를 호스팅할 GitHub 계정이 필요합니다.
• Git 설치: GitHub에 블로그를 업로드하기 위해 Git이 필요해요.
• npm(Node Package Manager) 설치: 여러 JavaScript 라이브러리를 관리하는 데 사용됩니다.

이러한 도구들을 설치하는 것은 처음에는 조금 복잡해 보일 수 있지만, 한 단계씩 천천히 따라오시면 금방 익숙해 지실 수 있습니다.

설치 및 설정 과정

테마 포크하기

먼저, jekyll 테마 홈페이지에서 chirpy 테마를 선택하고, 테마의 GitHub 페이지로 이동해요.

오른쪽 위에 있는 Fork 버튼을 클릭해서 시작합니다.

여기서 중요한 점은, Repository name을 설정할 때 여러분의 GitHub 사용자 이름과 동일하게 설정해야 한다는 것이에요. 예를 들어, 사용자 이름이 'example'이라면 'example.github.io'로 설정해야 합니다. 이렇게 설정하면 GitHub가 여러분의 블로그 주소를 자동으로 만들어줘요. Repository name 입력 한 다음에는 Create fork 버튼을 눌러 줍니다.

Fork 동작이 완료되면, chirpy 홈페이지의 모든 내용이 사용자의 repository 로 복사됩니다.

Git Repository 클론 하기

이제 블로그를 설정하기 위해서 사용자의 로컬 폴더에 복사합니다.

CODE 버튼을 선택해서 나온 팝업에서 HTML이나 SSH를 선택하고 우측의 복사 버튼을 눌러서 url을 복사합니다.

이제 터미널 프로그램을 열어 Github Respository의 내용을 Clone합니다.

$ git clone git@github.com:Example/Example.github.io.git

Cloning into 'Example.github.io'...
remote: Enumerating objects: 9824, done.
remote: Counting objects: 100% (22/22), done.
remote: Compressing objects: 100% (21/21), done.
remote: Total 9824 (delta 2), reused 11 (delta 0), pack-reused 9802
Receiving objects: 100% (9824/9824), 4.38 MiB | 3.34 MiB/s, done.
Resolving deltas: 100% (5215/5215), done.

여기서 git@github.com:Example/Example.github.io.git은 이전에 복사한 url입니다. 'Example'은 여러분의 GitHub 사용자 이름으로 바꿔주세요.

테마 초기화하기

마의 기본 설정은 데모 값으로 되어 있으므로, 초기화 작업을 해야 합니다. bash tools/init 명령을 통해서 초기화 작업을 진행합니다.

cd Example.github.io # Clone한 Git Repository로 이동합니다.
bash tools/init      # 초기화 작업을 시작합니다.

사용자 정보 설정하기

이제 블로그에 여러분의 정보를 입력해 보겠습니다. _config.yml 파일을 열어서 사이트의 제목, 설명, 메뉴 등을 변경합니다.

항목	설명
lang	웹 페이지의 언어(지원하는 언어의 종류는 여기 에서 확인)
timezone	Timezone(한국은 Asia/Seoul)
title	블로그의 타이틀
tagline	블로그의 서브 타이틀
description	블로그 소개
url	블로그 주소 ("https://{my_github_username}.github.io" 형식)
github_username	github username
social_name	이름이나 닉네임
social_email	이메일 주소
social_links	소셜 링크 주소
avatar	프로필 사진 링크 (/assets/img/ 디렉토리 안에 이미지를 저장)
paginate	메인화면 한 페이지에 보여줄 게시글 갯수

로컬에서 블로그 실행하기

모든 설정이 끝나면 로컬 컴퓨터에서 블로그를 실행해 보아요. 먼저 필요한 패키지들을 업데이트하고, bundle exec jekyll serve 명령으로 블로그를 실행합니다.

$ bundle install
$ bundle update
$ bundle install
$ bundle exec jekyll serve

Configuration file: none
            Source: /Minokim82.github.io_old/_posts
       Destination: /Minokim82.github.io_old/_posts/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 0.181 seconds.
 Auto-regeneration: enabled for '/Users/kimminho/Workspace/Minokim82.github.io_old/_posts'
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.

위와 같이 서버가 실행되면 http://127.0.0.1:4000 서버 어드레스를 확인할 수 있는데요, 이 주소를 웹브라우저에 입력해서 접속합니다.

위와 같이 나타나면 기본적인 구성은 완료되었습니다.

블로그 적용하기

이제 누구나 블로그에 접속할 수 있도록 git push -u origin +master 명령으로 서버에 올려 보도록 하겠습니다.

$ git add -A                             # 변경 파일 적용
$ git commit -m "Set User Information"   # git에 적용
$ git push -u origin +master             # github에 upload

Enumerating objects: 29, done.
Counting objects: 100% (29/29), done.
Delta compression using up to 8 threads
Compressing objects: 100% (19/19), done.
Writing objects: 100% (21/21), 243.12 KiB | 1.42 MiB/s, done.
Total 21 (delta 10), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (10/10), completed with 4 local objects.
To github.com:Example/Example.github.io.git
 + 74f1662...74ba53f master -> master (forced update)
branch 'master' set up to track 'origin/master'.

github에 수정 사항이 업로드 되면 github에서 자동으로 빌드가 동작하고, 블로그 페이지(Example.github.io)를 확인할 수 있게 됩니다.

빌드 동작에는 일정 시간이 소모 될 수 있어서 블로그에 반영사항이 바로 확인 되지 않을 수 있습니다. 빌드 상태를 확인하고자 한다면, Github Repository에서 Actions 항목에서 확인할 수 있습니다.

이미지 처럼 모든 항목이 Pass 되어야 블로그가 적상적으로 반영됩니다.

첫 포스트 작성하기

이제 첫 글을 작성해 보겠습니다.

포스트는 마크다운 형식으로 작성되며, _posts 폴더에 저장됩니다. _post폴더가 없는 경우에 폴더를 생성해 주세요.

파일 이름은 '2024-01-27-첫-포스트.md'와 같이 '년-월-일-제목.md' 형식으로 만듭니다.

---
title: 포스팅 제목
date: YYYY-MM-DD HH:MM:SS +09:00
categories: [메인 카테고리, 서브 카테고리]
tags:
  [
    태그1,
    태그2,
    태그3,
    .
    .
    .
  ]
---

포스트에는 제목, 날짜, 카테고리 등의 메타데이터를 본문 작성 전에 포함해 줘야합니다.

첫 글 작성 후에는 처음 블로그를 적용했던 것처럼 github에 업로드 해줍니다.

$ git add -A
$ git commit -m "Update post: 2024-01-28-Install-docker-on-ubuntu"
$ git push

업로드 완료 후에 다시 블로그 페이지(Example.github.io)로 접속합니다.

맺음말

이렇게 해서 GitHub를 활용한 Jekyll 블로그 만들기에 대한 기초적인 부분을 알아보았습니다. 처음에는 다소 복잡하게 느껴질 수 있지만, 한 단계씩 차근차근 따라오시면 분명 성공할 수 있습니다.