[MAC 개발 환경설정] github.io 깃허브 블로그 1탄. Ruby 설치 & GitBlog 생성

깃허브 블로그를 만들기 위해서 필요한 것.

1. Ruby
2. Jekyll (Jekyll 테마를 쓸 거면 필요)
3. Visual Studio Code

 

우선 맥북에는 기본적으로 Ruby가 설치되어있다. 이거 몰라서 이것저것 다 시도해보느라 오래걸렸다. 설치는 되어있지만, 엄청 오래된 버전이라 업데이트를 해줘야 한다.(맥북 2015 기준) 나는 홈브류를 이용해서 설치했다. 홈브류를 설치하는 법 모르시는분은 아래 포스팅을 참고하면 좋다.

 

https://skylarcoding.tistory.com/21

[Mac] 맥에 홈브류 (Homebrew) 설치하는 법

 

 

 

Ruby 설치

아래 과정을 순서대로 터미널에 입력한다. 

 

 

brew install rbenv
rbenv versions
rbenv install -l
rbenv install (다운받고 싶은 버전)
rbenv versions
rbenv global 3.2.2

 

 

Ruby 설정

~/.zshrc 파일에서 루비를 사용하도록 코드를 설정해야 한다.

 

 

~/.zshrc 파일 Visual Studio Code 로 열리도록 설정

~/.zshrc 가 vscode 로 열리게 할 필요 없는 분은 생략해도 된다.

vim ~/.zshrc

아래 내용을 추가하면 VSCode 로 열린다.

code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

esc 누른 후 :wq 입력하여 빠져나온다.

 

 

Ruby 설정 

이제 다시 zshrc 파일을 실행하고,

vim ~/.zshrc

 

아래 코드를 입력하면 된다. 그리고 저장해주기.

# ruby
[[ -d ~/.rbenv  ]] && \
export PATH=${HOME}/.rbenv/bin:${PATH} && \
eval "$(rbenv init -)"

 

 

Jekyll 설치하기

github.io 폴더 안에서 jekyll bundler 를 설치한다. 나는 잘 모르고 .github.io 보다 상위 폴더에 설치했는데, vscode 에서 폴더를 열고 나서 vscode 터미널로 재설치 해줬었던 것으로 기억한다.

gem install jekyll bundler
rbenv rehash

그리고 실제 github.io 폴더를 비워주고

(안 비워주면 아래의 .github.io exists and is not empty. 오류가 발생한다) 실제 경로 들어가서 파일 삭제해주면 된다.

 

 

io 폴더 터미널 안에서 작성한다.

jekyll new ./

 

그리고 번들 설치해주기.

bundle install
bundle exec jekyll serve

 

 

http://127.0.0.1:4000/

일단 github 에 내가 지금까지 설치한 것들을 올려본다.

git add .
git commit -m "커밋 메세지"
git push

 

 

 

누구는 새로고침하면 변한다고 했는데, 나는 새로고침해도 안 변해서 Github - Settings - Pages - Visit Site 로 들어갔다.

* Jekyll을 serve 한 상태로 push 하면 본인의 local 경로로 업데이트 된다고 한다 ㅠ

꼭 서버를 종료한 상태로 올릴 것 ! 물론 나중에 vscode 에서 수정하면 github.io 경로로 돌아가긴 한다.

 

검색해보니 위 방법이 안되면 아래 코드를 입력하라는 방법을 찾았다.

JEKYLL_ENV=production bundle exec jekyll build

* 이 코드는 사이트 산출물을 서버로 배포하는 방법이다. 그리고 이 명령어를 실행해서 만들어진 _site 디렉토리의 콘텐츠를 복사해 서버로 제공한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://zeddios.tistory.com/1222

왕초보를 위한 Github 블로그 만들기 (1)

https://danu.dev/macos/Mac-OS-settings-5/

M1 맥 개발환경 설정 - (5) Jekyll 환경설정

https://til.younho9.dev/docs/frontend/jekyll/step-by-step-tutorial-10-deployment/

[Step by Step Tutorial] 10. Deployment | 📝 TIL(Today I Learned)