초보를 위한 깃허브 블로그 만들기(4). vscode로 블로그 관리하기

❗️모든 설치 과정은 MacOS Ventura(M1 Mac) 환경에서 진행됩니다 ❗️

안녕하세요! 깃허브 블로그는 잘 설치되었나요?
이번에는 Visual Studio Code로 깃허브 블로그를 아주 간편하게 관리하는 방법을 공유합니다.

1️⃣ Visual Studio Code 설치하기

Visual Sutdio Code Download Link로 이동해 주세요!
Mac을 선택해 주세요!
- 설치하는 과정에서 특별한 건 없습니다. 쭉쭉 넘어가 주세요!
설치가 완료되었다면 아래와 같은 화면이 뜹니다.

한국어 패키지 설정하기

저는 한국어 패키지가 설치가 되어있습니다. 영어 버전을 원하시는 분들은 건너뛰셔도 돼요!

왼쪽 확장(Shift + Command + X)을 눌러 줍니다.
Korean Language Pack을 검색 후 설치해 줍니다.

2️⃣ Github와 VScode 연결하기

VScode를 실행합니다.
열기를 눌러 줍니다.
전에 만들어 두었던 깃허브 폴더를 선택해 주세요!
control + shift + ₩를 눌러 터미널을 열어 주세요!

github에 push가 잘 되는지 확인해 볼까요?

 git add *
 git commit -m "Update Blog" #원하는 커밋 메세지 작성
 git push origin main

❗️이 과정에서 계정과 비밀번호가 필요할 수 있습니다. 비밀번호에는 반드시 토큰을 입력해 주셔야 합니다.
토큰 발급 바로가기

이제 vscode 터미널로도 로컬 서버를 열 수 있습니다!
bundle exec jekyll serve를 vscode 터미널에 입력 후, 여러분의 멋진 블로그를 확인해 보세요!

✅ 참고:
저는 127.0.0.1:4000 이라는 주소로 로컬 서버를 들어갈 수 있는데요.
이 서버는 깃에 푸시하기 전에 최종적으로 검토해보는 단계입니다.
따라서, 여러분의 변경사항을 로컬 서버를 통해 먼저 확인할 수 있는 장점이 있습니다.
또 깃에 업로드 후 블로그가 업데이트 되는 딜레이 시간(약 3분)이 있습니다.
로컬 서버를 이용하면 이러한 딜레이를 상쇄할 수 있기 때문에 로컬 서버를 이용하는 것이 블로그 작업에 매우 효율적입니다.

❗️주의: 계정 일치 확인하기

git remote -v 명령어를 통해 여러분의 계정과 일치하는지 확인해 주세요!

만약 일치하지 않는다면 다음 과정을 진행하면 됩니다.

  git remote add origin (저장소 주소) #깃허브 블로그 저장소
  git remote -v

지금까지의 과정 총정리

Mac에서 여러가지 패키지를 편하게 관리하기 위해 Homebrew를 설치했다
ruby를 독립적으로 이용하기 위해 rbenv패키지를 설치했다
로컬에서 깃허브 레파지토리를 관리하기 위해 git을 설치했다
루비 개발 환경을 갖추기 위해 gem install jekyll bundler를 통해 설치했다.
서버를 구동하기 위해 bundle exec jekyll serve를 입력했다.

🎉이상으로 깃허브 블로그 만들기 과정을 종료합니다! 깃허브 블로그 커스텀에서 뵙겠습니다!

Byeong hwi