튜토리얼에도 고난과 역경이 있다.

깃 블로그 ) 1. github pages 준비하기 본문

나의 공부/기타

깃 블로그 ) 1. github pages 준비하기

내가 Nega 2022. 1. 26. 10:55
728x90

깃허브 블로그 제작기 시리즈의 첫번째 글입니다.

https://devinlife.com/howto%20github%20pages/github-prepare/

위 링크를 참고하여 따라하였음을 밝힙니다.

1. github pages 준비하기

  • github pages 준비하기 축약
    • 1-1 Ruby 설치하기
    • 1-2 Jekyll과 bundler 설치하기
    • 1-3 샘플 블로그 생성하기

1-1. Ruby 설치하기

  • Ruby를 먼저 설치해줍니다.저는 노란색으로 칠해진 버전을 다운받았고, with DEVKIT로 다운받았습니다.

  • 설치화면
    1. Accept license
    2. ![image-20220124153353808](../../../../Typora Images/image-20220124153353808.png)
    3. 원하는 파일 경로를 지정해줍니다.![image-20220124160502927](../../../../Typora Images/image-20220124160502927.png)
    4. 저는 D드라이브에 설치해주었습니다. 제 경험상 Path 관련한 체크사항은 꼭! 체크를 해주고 넘어가야합니다.
    5. MSYS2 Development도 설치해줍니다.
    6. ![image-20220124153433453](../../../../Typora Images/image-20220124153433453.png)
    7. Ruby 설치 완료
    8. ![image-20220124154118392](../../../../Typora Images/image-20220124154118392.png)
    9. MSYS2 Development toolchain설치
      • 처음화면
      • ![image-20220124154139988](../../../../Typora Images/image-20220124154139988.png)
      • 중간화면
      • ![image-20220124163246528](../../../../Typora Images/image-20220124163246528.png)
      • 완료화면
      • 캡쳐를 못했는데, 처음화면과 같이 Enter를 입력하라는 칸이 더 뜹니다. 이때, 엔터를 한번 더 쳐주면, 끝나게 됩니다.
    10. 4번 설치를 완료하고 나면, 자동으로 뜹니다. Enter를 한번 눌러주면 설치가 진행됩니다.

1-2. Jekyll과 bundler 설치하기

윈도우 검색창에 Start Command Prompt with Ruby를 검색 후, 실행하면 다음과 같이 창이 뜹니다.

![image-20220124174330385](../../../../Typora Images/image-20220124174330385.png)

다음 명령어를 사용하여 jekyll bundler를 설치합니다.

gem install jekyll bundler
  • 설치화면
  • ![image-20220124174529777](../../../../Typora Images/image-20220124174529777.png)
  • 완료화면
  • ![image-20220124174549466](../../../../Typora Images/image-20220124174549466.png)

1-3. 샘플 블로그 생성하기

  1. 블로그 폴더 생성jekyll new testBlog만약, D드라이브에 생성하고 싶다면, 명령어에 D: 를 입력한 후, cd 명령어로 원하는 디렉토리로 이동 한 후 똑같이 따라하시면 됩니다.
  2. ![image-20220124175156214](../../../../Typora Images/image-20220124175156214.png)
  3. 새로운 블로그를 생성하려면 다음과 같이 명령어를 입력합니다. testBlog라는 블로그 폴더를 생성합니다.
  1. 생성한 블로그 폴더로 이동cd testBlog
  2. 생성된 블로그 폴더로 이동합니다.
  1. 블로그 폴더에서 서버 실행bundle exec jekyll serve
  2. 다음 명령어를 이용하여 jekyll서버를 내 컴퓨터에서 실행합니다.

3-1. 정상 실행 화면

![image-20220124175752079](../../../../Typora Images/image-20220124175752079.png)

Server Running 인 상태로 창을 끄지않고 그대로 둔 후 인터넷 창에 localhost:4000으로 접속하면 다음과 같이 뜹니다. 빈 블로그 만들기가 성공했습니다!

![image-20220124175852735](../../../../Typora Images/image-20220124175852735.png)

3-2. 오류화면

​ bundle exec jekyll serve로 로컬에서 jekyll 서버를 구동하려고 하면 webrick을 로드하지 못했다는 오류가 발생할 수 있습니다.

​ Error 명 : Cannot load such file -- webrick (LoadError)

![image-20220124175320036](../../../../Typora Images/image-20220124175320036.png)

Ruby 3.x 이상에서는 webrick파일이 자동으로 포함되지 않아 발생하는 문제입니다.

다음 명령어를 통해서 이를 해결할 수있습니다.

bundle add webrick


참고사이트
반응형