WiseKim
WiseKim 관리자

Visual Studio 에 Github 연동하기


Visual Studio 에 Github 연동하기

Github 에 Jekyll 블로그를 업로드하기 위해서 Visual Studio Code 에 Github 를 연동합니다.
Visual Studio Code 를 실행한 후 왼쪽 메뉴의 Source Control 버튼을 클릭합니다.
그 후 Download Git for Windows 버튼을 클릭합니다.

walking



다음 외부 웹사이트로 이동하겠냐는 창이 뜨면 Open 버튼을 클릭합니다.
그럼 Git for Windows 를 다운로드 받는 사이트로 이동합니다.

walking



Git for Windows 사이트에서 64-bit Git for Windows Setup 을 눌러 다운로드 받습니다.

walking



다운로드받은 설치 파일을 실행하여 설치를 진행합니다.
별 다른 설정 없이 Next 버튼만 계속 눌러서 진행하시면 됩니다.

walking



Install 버튼을 눌러 설치를 시작합니다.

walking



설치가 완료되면 Finish 버튼을 누릅니다.

walking



다시 Visual Studio Code 로 돌아와 reload 버튼을 클릭합니다.

walking



Visual Studio Code 가 다시 실행되면 Initialize Repository 버튼을 클릭합니다.
그럼 로컬 환경의 Github Repository 가 생성됩니다.

walking



다음으로 Visual Studio Code 에서 Github 를 사용하는데 도움을 주는 확장 프로그램을 설치합니다.
왼쪽의 Extensions 메뉴를 클릭한 후 git 이라고 입력하여 검색합니다.
그리고 GitLens 와 Git Graph 두 개의 확장프로그램을 설치합니다.

walking



다시 Source Control 메뉴로 들어갑니다.
그럼 Changes 목록에 Jekyll 관련 파일 리스트가 나타납니다.
이 파일들을 모두 Github Repository 에 올리도록 합니다.
그러기 위해서는 앞서 생성한 로컬 Github Repository 를 연동해야합니다.
SOURCE CONTROL 항목의 끝에 더 보기(…) 메뉴를 클릭한 후 Remote - Add Remote… 메뉴를 클릭합니다.

walking



그 다음 상단의 입력창에 Github Repository 주소를 입력합니다.
이 때 Personal Access Token 을 함께 입력해야 합니다.
아래 형식으로 입력해주세요.

  • https://Token@github.com/WiseK/jekyll-blog.git

정확하게 입력하셨다면 아래의 Add remote from URL 을 눌러주세요.

walking



다음으로 remote name 을 설정합니다.
저는 origin 이라고 입력했습니다.
입력한 후 엔터 키를 누릅니다.

walking



그리고 터미널을 열어서 아래 두 명령어를 입력합니다.
Github 에 Commit 할 때 사용하는 이메일과 이름 정보를 설정하는 명령어입니다.
Github 에 가입할 때 사용한 이메일과 이름을 사용하시면 됩니다.

1
2
git config --global user.email "wisek@gmail.com"
git config --global user.name "WiseK"

walking



다시 Source Control 메뉴로 가서 Commit 이름을 입력합니다.
저는 first commit 이라고 입력했습니다.
해당 Commit 이 무엇을 나타내는지 알 수 있는 내용을 적으시면 됩니다.
그 후 Commit 버튼 옆의 더 보기 버튼을 누른 후 Commit & Push 버튼을 클릭합니다.
저는 Commit 과 Push 를 한 번에 했지만 Commit 을 한 후에 Push 를 따로 하셔도 무방합니다.

walking



팝업 창이 등장하면 Yes 버튼을 클릭합니다.

walking



Github Remote Repository 에 master 브랜치가 없어서 팝업 창이 등장합니다.
OK 버튼을 누르면 Remote Repository 에 master 브랜치를 생성해줍니다.
OK 버튼을 눌러 진행합니다.

walking



이제 Github 사이트로 이동하여 Repository 를 확인해보면 master 브랜치가 생성되어 있을 것입니다.
master 브랜치를 선택하면 Jekyll 블로그 관련 파일들이 모두 올라가있는 것을 확인하실 수 있습니다.

walking



다음 순서 : Jekyll 블로그 Netlify 배포를 위한 Github 연동



comments powered by Disqus