이전 글과 이어집니다.

머리말


글을 쓰는 사람은 Visual Studiuo Code를 적극 활용하였습니다.
이전 글에서 GItHub 설정을 끝냈다. 오늘은 블로그에 원하는 테마를 적용시키자 .

Ruby


Jekyll을 사용하려면 Ruby를 다운로드 받아야한다.

https://rubyinstaller.org/downloads/
위 링크에 접속한다.

image
=> Ruby+Devkit 3.2.2-1 (x64)를 다운받았다.

실행하면

image

해당 화면이 나오는데 약관에 동의하고 next
계속 next 해주면 된다.

Jekyll 설치


1. Jekyll 다운 받기

???.github.io 폴더에 들어간 후
터미널에서 아래 명령을 실행한다.

gem install bundler
gem install jekyll

2. 기본적인 틀 만들기

터미널에서 아래 명령을 실행.

jekyll new./

3. Bundle 설치

다운로드 받은 것을 실행시킨다.
터미널에서 아래 명령을 실행.

bundle install

4. Jekyll을 로컬 서버에서 실행해보기

터미널에서 아래 명령을 실행.

bundle exec jekyll serve

글을 쓰고 있는 사람 처럼 VSCode를 사용하고 있다면 명령을 실행한 후

image

http://127.0.0.1:4000 부분에 마우스를 Ctrl키를 누른채 클릭하면 된다.
VSCode를 안쓴다면 그냥 http://127.0.0.1:4000 접속

성공 화면

Jekyll Theme 고르기


위 링크에서 아무 링크나 들어가서 원하는 테마를 고르면 된다.
나는 https://jekyll-themes.com/에서 테마를 골랐다.

image

나는 이 테마로 블로그를 만들기로 정했다.
앞으로 포스팅은 Jekyll-Theme-Yat을 기준으로 포스팅을 하겠다.
아래 Download를 클릭하면 GitHub 사이트로 연결된다.

image

Code를 누르고 Download ZIP을 클릭해서 소스들을 다운 받으면 된다.

GItHub Repository 연결


아래 순서로 터미널에 입력하면 된다. (현재 경로가 ???.github.io인 상태)

git init
git remote add origin 주소

주소는
image
여기에 나온 주소를 쓰면 된다.
이제 Repository와 폴더가 연결이 됐을 것이다.

이제 앞에 다운 받은 소스 코드들을 ???.github.io에 붙여넣는다.

image

다운로드 받은 ZIP파일 압축을 풀고 안에 있는 파일들을
???.github.io 폴더에 붙여넣기 하면 된다.
중복되는 파일이 있으면 그냥 덮어쓰기

로컬에서 확인하기

터미널에서 아래 내용을 실행.

bundle install
bundle exec jekyll serve

디자인은 필자가 수정한 것이니 무시하면 된다.

GItHub에 add, commit, push

터미널에 아래 명령을 실행.

git add * 
git commit -m "my blog"
git push --set-upstream origin main
git push

GitHub로 돌아가서

image

빌드 및 배포가 제대로 되는지 확인하면 된다.
초록 불이 나온다면 성공

성공!






2탄 끝


기본적인 GitHub Pages 블로그 만드는 방법이 끝났다.

다음 글에서는 YAT 테마 기준으로 기본 설정을 변경하는 방법을 알아볼 것이다.

이상.