오늘은 제가 블로그를 구축했던 방법에 대해 이야기 해보려고 합니다.

블로그 spec.

Github Pages
Jekyll 루비 기반의 정적 웹사이트 생성기
Chirpy jkyll 테마
Github Actions 기반의 자동 배포
웹페이지 생성을 위한 기본적인 HTML, Javascript, CSS 문법
Markdown

뭔가 어려운 말들이 엄청 적혀있는거 같지요?🤔

하지만 하나하나 모두 알고 있지 않아도 괜찮습니다. (깊게 뜯어 고치려면 필요하겠지만요.)

이번 기사에서는 기본적인 블로그 만들기에 대해 진행 해 보겠습니다.

준비물

1. Linux

linux 는 선택사항 입니다만, 제 경험상 Windows에서 Jekyll 빌드하고 Github repository에 pull하면 side effect가 좀 많았습니다.

저는 그래서 Ubuntu나 WSL위에서 진행하시는 것을 권장합니다만, 쓰고싶지 않으셔도 괜찮습니다.

우리에겐 만능 Google님이 있으니까요!

2. Ruby

Jekyll은 Ruby 위에서 동작하는 웹사이트 생성기이기 때문에 Ruby 설치가 필요합니다.

jekyll 공식 홈페이지의 설치 방법을 따라 진행해 봅시다.

UBUNTU, Debian

아래와 같이 Ruby 및 필수 패키지를 설치합니다.

sudo apt-get install ruby-full build-essential zlib1g-dev

gem 설치 경로를 설정합니다.

  
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

jekyll과 bundler를 설치합니다.

bundler는 npm, pip 등과 같은 일종의 패키지와 프로젝트를 관리해주는 툴 이라고 생각하시면 됩니다.

gem install jekyll bundler

Windows

ruby installer를 이용해 설치하시면 됩니다.

설치 하신 후에 WT, PowerShell, CMD 등의 명령창에서 jekyll과 bundler를 설치합니다.

gem install jekyll bundler

macOS

Homebrew를 설치합니다. 있다면 건너뛰셔도 됩니다.

  
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

아래와 같이 ruby를 설치합니다.

  
brew install chruby ruby-install
ruby-install ruby

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.2" >> ~/.zshrc # run 'chruby' to see actual version

아래와 같이 jekyll을 설치합니다.

gem install jekyll

3. 테마

우리 블로그의 테마를 선택합니다. jekyllthemes와 같은 테마를 모아놓은 사이트에서 고르시거나 구글링하여 고르시면 됩니다.

물론 Jekyll로 직접 페이지를 구현할 수도 있습니다!

이번 기사에서는 이 블로그의 테마인 Chirpy 테마를 이용해 블로그를 만들어보겠습니다.

4. Github 계정

Github 사용 방법은 여기서 따로 이야기하지는 않겠습니다.

Chirpy 테마 적용하기

테마를 적용하는 방법은 여러가지가 있습니다.

소스를 다운로드 후 repository 생성
Github에서 지원하는 Template 사용 기능을 통해 생성
Demo 페이지 fork

이 중에서 2번은 아래와 같이 Public template에 한해서만 사용할 수 있다는 단점이 있습니다. chirpy starter repository

제 경험상 3번이 side effect가 발생할 가능성이 제일 낮기 때문에 3번으로 진행하겠습니다.

repository fork

chirpy demo repository의 fork 버튼을 눌러 내 repository로 fork합니다. fork jekyll-theme-chirpy repository fork 버튼

이때 repository 이름은 <github 아이디>.github.io의 형태로 만들어야 합니다.

내 repository Fork 한 후 생성된 repository

repository clone

이제 생성한 repository를 수정하기 위해 local에 clone합니다.

code 버튼을 누른 후에 마음에 드는 방식으로 clone 해주면 됩니다.

초심자의 경우 제 추천은 Open with GitHub Desktop을 이용하여 clone하는 방법입니다.

다른 git client를 이용하려면 보안 설정 같은 것들이 필요할 수 있거든요 😅

아무튼 이제 local에서 블로그를 한번 실행해봅시다!

테스트

아래 명령어를 입력해서 실행 해 봅시다

bundle
jekyll serve

아래와 같이 출력되면 정상적으로 실행 된것입니다.

  
Configuration file: C:/Users/kimuj/OneDrive/Documents/GitHub/KimEJ.github.io/_config.yml
 Theme Config file: C:/Users/kimuj/OneDrive/Documents/GitHub/KimEJ.github.io/_config.yml
            Source: C:/Users/kimuj/OneDrive/Documents/GitHub/KimEJ.github.io
       Destination: C:/Users/kimuj/OneDrive/Documents/GitHub/KimEJ.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 1.577 seconds.
 Auto-regeneration: enabled for 'C:/Users/kimuj/OneDrive/Documents/GitHub/KimEJ.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

command not found 같은 메시지가 출력된다면 jekyll설치가 제대로 안된 것 입니다. jekyll 공식 홈페이지를 참고하여 다시 설치 해 주세요

이제 http://127.0.0.1:4000/로 한번 접속 해 보겠습니다.

test serve 화면

위와 같이 화면이 나온다면 정상적으로 만든 것 입니다!

템플릿 초기화

아래와 같은 방법으로 템플릿을 초기화합니다.

Linux & macOS

tools/init.sh
[INFO] Initialization successful!

위와 같이 출력된다면 정상적으로 초기화 된 것입니다!

windows

windows에서는 자동으로 초기화 시켜 줄 방법이 없습니다…😅

아래 파일들을 직접 삭제하여 초기화를 진행해 줍니다.

.travis.yml
_posts 폴더 하위의 파일들
docs 폴더

Git Push

이제 우리 템플릿을 github에 올려봅시다.

actions 탭의 자동 배포 장면

github에 올리고 repository의 actions 탭을 보면 위와 같이 뭔가 2개가 생겼습니다.

잠시 후에 보면 아래와 같이 성공했다는 표시가 뜨게 됩니다.

actions 성공 장면

<github 아이디>.github.io 페이지로 이동해보면 우리가 올린 페이지가 뜨게 됩니다!

TODOs

우리가 올린 블로그는 제 블로그랑 사뭇 다를겁니다.

아직 기사도 하나도 없구요.

다음 기사에서는 블로그 커스텀과 포스팅 방법에 대해 이야기 해 보려고 합니다!

다음 기사에서 만나요!

Jekyll로 github pages에 블로그 구축하기

준비물