Jekyll을 활용한 github.io 만들기

in etc.

본 글은 기존 Notion에서 이전된 글입니다.

1. 새로운 GitHub Repository 생성

  1. Repository name은 username.github.io로 만들기

    image

  2. Repository 유형은 Public으로 만들기

    image

  3. Add a README file 체크하기

    image

2. Local 환경에 repository를 clone

1. Clone을 위한 주소 복사

image

2. Git Bash를 통해 원하는 위치에 git clone

image

3. 테스트를 위해 index.html 파일 생성

1. 파일 생성 및 내용 입력

  • cd 명령어를 통해 Git Bash의 현재 경로를 username.github.io 디렉토리로 변경하거나 username.github.io 디렉토리 내에서 Git Bash 창을 열어서 조작해야 함

image

image

2. 원격 저장소로 Push

image

4. 결과 확인

  • 브라우저에서 username.github.io로 확인해보면 잘 반영된 것을 확인해볼 수 있다.

image

5. Jekyll 사용하기

0. Ruby 설치

1. Jekyll 다운 받기

  • Git Bash에서 아래 명령어들을 실행
gem install bundler
gem install jekyll

2. 기존 index.html 삭제

rm -f index.html

https://supermemi.tistory.com/entry/나만의-블로그-만들기-Git-hub-blog-GitHubio

3. jekyll 프로젝트 생성

jekyll new ./ --force
  • 해당 디렉토리가 비어있지 않아서 conflict가 발생했다.
  • conflict를 해결하기 위해 –force 옵션을 추가하여 해결하였다.

image

4. jekyll을 로컬 서버에 띄우기

bundle exec jekyll serve

image

image

  • 사소한 경고들이 나오긴 하지만 정상적으로 동작하는 것을 확인할 수 있다.

5. Push

git add .
git commit -m "initialize jekyll"
git push

image

  • 정상적으로 Push 된 것을 확인할 수 있다.

Jekyll Hidejack 테마 적용

1. HydeJack Download

image

  • download 페이지로 이동

image

  • zip으로 설치 후 압축 해제

image

  • 압축 해제한 모든 파일들을 붙여넣기 (이미 존재할 경우 덮어쓰기 실행)
  • 이후 bundle exec jekyll serve로 테스트 진행

2. 오류 해결

  1. bundler::GemNotFound

    image

    • bundler 실행

  2. 파일 오류

    image

    • 루트 디렉토리에서 404.html, about.markdown, index.markdown 파일 삭제

  3. Dart Sass 오류

    image

    • 일단 스킵

3. bundle exec jekyll serve로 테스트 진행

image

  • 정상적으로 동작하는 것을 확인할 수 있다.

4. Push

git add .
git commit -m "jekyll-hydejack theme applied"
git push
  • build 실패 image
    • 해결법 : blog 폴더 내의 _config.yml 파일 편집 image
      • theme 부분을 주석 처리 (# 추가)
      • remote_theme 부분을 주석 해제 (# 제거)
        git add .
git commit -m "fix: theme applied"
git push

5. 확인

image

  • 정상적으로 Push 된 것을 알 수 있다! 이제 본격적으로 블로그를 활용해보자!

Reference