Github 블로그 만들기(2) - 로컬호스트에서 개발 환경 구축하기

18 Dec 2019

Reading time ~2 minutes

로컬호스트에서 개발 환경 구축하기.

맥OS를 사용하고 있지만 맥으로 GitHub 블로그를 만드는 포스팅은 많이 보았습니다. 개발을 시작하시는 분이 더 많이 쓰실 것 같은 윈도우에서 작업환경을 구축하는 것이 더 많은 사람에게 도움을 줄 수 있을거라 판단하여 작업환경을 윈도우에서 진행하였습니다.

로컬호스트에서 개발 환경 구축하기.

1. 루비(Ruby) 설치

루비 다운로드 페이지에 접속해 루비(Ruby)를 자신의 컴퓨터 OS에 맞게 설치합니다. 프로그래밍 언어의 하나인 루비를 설치하는 이유는 Jekyll이 루비로 만들어졌기 때문입니다.

윈도우로 진행하기로 하였으므로 아래 그림을 참조하여 빨간 네모로 표시된 부분을 클릭합니다.
아래 그림을 참조하여 빨간 네모 표시된 다운로드를 클릭합니다.
아래 그림을 참조하여 빨간 네모 표시된 부분을 클릭합니다. 저는 최신버전의 루비를 다운로드하였지만 jekyll 인스톨 시 호환성에 문제가 있는 경우도 있으니 꼭 최신이라고 좋은 것만은 아니니 검색하여 문제가 없는지 잘 확인하셔야합니다.
다운로드 받은 파일을 실행해 루비를 설치합니다. 설치가 끝나면 MSYS2을 설치하는 창이 뜨게 됩니다.

2. MSYS2 설치

MSYS2 설치화면이 뜨면 1번, 2번, 3번에 해당하는 내용을 차례대로 설치합니다.
- 1을 입력하고 엔터, 마찬가지로 2 엔터, 3 엔터를 차례로 입력하여 모두 설치합니다.
gem -v로 설치를 확인합니다.
- 여기서 Gem은 루비를 사용하는데 필요한 라이브러리를 설치하고 관리하는 루비에서 사용하는 툴입니다. gem을 통해 bundler와 jekyll을 설치하고 bundle 명령을 통해 jekyll을 실행하게 됩니다. 루비를 설치하셨다면 자동으로 설치되는 것으로 알고 있습니다.

3. Gem으로 Bundler와 Jekyll 설치

Jekyll 공식 페이지 를 참고하여 Jekyll을 설치합니다. 아래 두 명령을 실행하여 bundler와 jekyll을 설치합니다.
```
gem install bundler jekyll
bundle install
```

4. 블로그 디렉토리로 진입

cd 명령으로 블로그 디렉토리로 진입
ex) C:\Users\Ryu>cd Desktop
C:\Users\Ryu\Desktop>cd ryureka.github.io
C:\Users\Ryu\Desktop\ryureka.github.io>

5. 로컬호스트로 실행 후 블로그에 접속

블로그 디렉토리에 진입하였으면 bundle exec jekyll serve 명령을 입력하고 브라우저에서 http://localhost:4000 에 접속하여 로컬호스트에서 잘 작동하는 지 확인해줍니다.
여기서 테마 적용이 제대로 안될 시에는 ctrl+c 키를 눌러 명령을 종료하고 (종료가 안되고 y/n를 물어볼 경우 종료될 떄까지 y와 엔터를 입력해줍니다.) _config.yml 파일의 url: https://username.github.io 부분을 url: http://localhost:4000 으로 수정하고 다시 bundle exec jekyll serve 명령을 수행하여 localhost:4000 주소로도 블로그가 나타나는지 확인합니다.

6. 처리해주어야 할 부분

작업할 때는 로컬호스트에서 작업하므로 _config.yml파일의 url을 http://localhost:4000 으로 하여야 합니다.
소스코드를 수정하고 다시 bundle exec jekyll serve 명령을 통해 확인합니다. 소스코드 수정사항이 반영되는데 시간이 조금 걸릴 수도 있습니다. 그 과정에서 수정한 내용을 확인하려고 브라우저를 새로고침을 계속하게 되는데 이러한 번거로운 과정을 다음 포스트에 나오는 gulp를 사용하여 편하게 진행할 수 있습니다.
GitHub의 원격저장소에 올릴 경우에는 _config.yml 파일의 url을 부분 다시 username.github.io로 수정하여 올려야 합니다.