Kim Sanghwa

주어진 상황에 최선을
빌립보서 4:13

2 분 소요

VSCode로 GitHub Blog 포스팅

GitHub Blog

이 포스팅은 깃허브 블로그를 개설한 뒤에 보면 도움이 될 것이다. 깃허브 블로그를 만들어 본 사람은 알겠지만 생각보다 매우! 구글링이 필요하다… 다 만들어놓고 보니 별거 아닌것 같은데 처음에 만들때는 정말 포기하고 싶었다 …^^ (만드는 거 도와준 동기님.. 감사해요) 어쨌든 Visual Studio Code로 작업을 하는게 정말정말 편하다는 것을 이제 알았기에 누군가에겐 도움이 되겠지 하며 적어본다.

폴더 위치

깃허브 블로그를 만들었다면 (사용자명).github.io라는 폴더가 있을것이다. 아마? 따라서 VSCode의 로컬폴더도 저기로 설정해주자. 나는 kshway.github.io로 되어있다.

파일형식 및 이름

우리는 마크다운 문법을 써서 만들기때문에 .md파일을 만들어 사용할 것이다. 대체로 파일이름은 yyyy-mm-dd-제목.md 라고 작성하는데 이게 파일명 순서대로 포스팅 되는 것 같다. 그래서 같은날짜에 올린 글이면 먼저올린것과 상관없이 제목으로 순서가 정해지더라.. 고려해서 제목을 정해보세용.

Markdown 문법

위에 말한것처럼 깃허브 블로그는 마크다운 문법을 쓴다. 근데 뭐 금방익히는 것 같다. 글 몇개만 올려보면 손에 익음 ! 물론 아직 못 외운게 더 많지만 ㅎ 문법만 모아놓은 글도 한번 써봐야겠다.

미리보기

미리보기를 하는 방법은 크게 두가지인것 같다.

  1. VSCode 내에서 미리보기
  2. 로컬서버를 열어서 미리보기

VSCode 내에서 미리보기

사실 이게 제~~일 간단하다. 이거 없음 어떡할뻔했어 싶을 정도.. 다운받는 것도 너무 쉽다.
미리보기

왼쪽에 다섯번째 버튼(확장)을 누르고 사진에 보이는 것 같이 Markdown Preview Enhanced를 다운받으면 파일 창 오른쪽 위에 새로운 버튼이 생긴다.
2

저걸 누르면 아래 사진처럼 미리보기 창을 볼 수 있다.
3

로컬서버를 열어서 미리보기

이게!!! 진짜 에러가 많이 난다. 솔직히 나는 로컬서버 처음에 그냥 포기하고 계속 파일 업로드 시키면서 찐 서버 딜레이를 기다리며 작업했었다. 하지만 이렇겐 못하겠다 !! 싶어서 하나하나 에러 구글링하면서 해결했다.
대체로 로컬서버를 여는 방법은 다음과 같다.

  1. 블로그 폴더(사용자명.github.io)에서 cmd를 열기 또는 cmd에서 cd로 블로그 폴더로 이동
  2. bundle exec jekyll serve 입력
  3. 파일 저장 후 웹으로 http://127.0.0.1:4000 접속

성공하면 아래와 같은 화면이 표출되고 실제로 파일 저장만해도 바로바로 바뀐 블로그의 모습을 볼 수 있다. 굿굿 ! 이상한 에러가 뜬다면 포기하지 말고 꼭 구글링 해보시길….

4

커밋 및 푸시

VSCode가 진짜 똑똑하다 느낀게 내 깃헙에 있는 파일과 변동사항이 있는 부분을 다 알려준다. 처음에 깃헙자체에서 바꾼 파일들이 있는데(그럼 당연히 내 컴터에 있는 파일과는 다르겠죵?) 그 부분도 얘가 다 알려주니 감동이었다. 어쨌든 글을 올리는 방법도 굉장히 간단하다.

  1. 파일을 저장한다.
  2. 왼쪽 버튼 중 세 번째 아이콘을 누른다. (소스 제어)
  3. 변경사항에 보이는 + 버튼을 누른다.
  4. 메세지 창에 적고싶은 commit message를 작성한다.
  5. 위에 체크표시를 누른다.
  6. 푸시를 해준다.

5

하찮지만 열심히 그려봤다 푸히히 😊

포스팅 완료

이 과정을 다 하면 내 깃허브 repo에 들어가도 작성한 commit message와 함께 푸시된것을 확인할 수 있다. 실제로 블로그 주소로 접속해보았을때도 약간의 딜레이는 있겠지만 잘 작성된 것을 볼 수 있을 것이다. 👀

포스팅 마무리

어쨌든 깃허브 블로그를 쓰면서 느끼는 것은 왜 굳이 어려운 깃허브 블로그를 쓰는지 알겠다. 일반 글쓰기가 아니라 VSCode같은 툴 & Markdown 문법을 이용하니까 코드 작성하기가 너~~~~~무 편하다. 이런 포스팅 과정과 문법에 익숙해지기만 하면 적어도 코딩하는 사람들은 후회안할것이다. 추천 ! (글고 뭔가 약간 글을 적는데도 코딩을 하는 것 같은 멋짐이라 해야하나 ㅎ + 회사에서 적기 참 좋다 하하하) 그럼 다음 글은 뭐쓰징? Markdown 문법 써봐야겠다. 그럼 안녕 ! 🤗

댓글남기기

참고