웹사이트 전체 로고
로고 배경

Astro 블로그 Github 연동

VSCode에서 Github 사용하는 방법

작성자 프로필 사진
kui-o

Astro 블로그 시리즈

들어가며

이전 글에서 Astro를 이용해 블로그를 구축했는데요.

블로그에 글을 작성하면 자동으로 배포돼서 누구든 볼 수 있게 하기 위해
준비 작업으로 Github 연동하려고 합니다.

Github란

현재는 블로그 파일들이 내 PC에 저장돼 있는데요
이 코드를 Github(깃허브) 서버에 올릴 겁니다.

Github에 올리게 되면
다른 기기에서도 언제든지 코드를 받을 수 있고,
누가 어느 부분을 수정했는지 이력도 볼 수 있고,
특정 시점으로 코드를 되돌릴 수도 있고,
코드가 변경되면 이를 인식해서 자동으로 배포되게 할 수도 있습니다.

더 자세한 내용이 궁금하다면 아래 글을 참고하세요.

Git 핵심 정리

Git 설치

  1. Git 공식 홈페이지에 접속합니다.
  2. 자신에게 맞는 ①OS를 선택한 뒤 ②설치 프로그램을 다운로드하여 실행합니다.

Git 다운로드 3. (선택) CMD 창에서 git -v를 입력하여 설치가 완료되었는지 확인합니다.

CMD
> git -v
git version 2.55.0.windows.2

Github 계정 생성

(이미 계정이 있다면 건너 뛰세요)

  1. Github 홈페이지에 접속합니다.
  2. 우측 상단에 Sign up 버튼을 누릅니다.

Github 홈페이지

  1. 구글, 애플 계정 연동 혹은 적절한 정보(이메일, 비밀번호, 아이디)를 넣어 계정을 생성합니다.

Github 회원가입

Github 연동

  1. ①상단메뉴 File > ②Open Folder > ③생성한 폴더 선택 > ④ Select folder를 눌러 폴더를 엽니다.

VSCode 폴더 열기

  1. ①소스제어 탭 > ②Github에 게시 > ③허용 선택

VSCode 깃허브 게시 버튼 화면

  1. 계정 연동을 진행합니다.

깃허브 OAuth 인증 화면

  1. 인증을 완료하면 상단에 팔레트가 뜹니다.
    원하는 ①레포지토리명이 있다면 작성합니다.
  2. 소스코드(블로그 파일)을 외부에 공개하지 않을 거라면 ⒜외부에 공개할 거라면 ⒝를 선택합니다.
    (가이드에서는 ⒜ 비공개를 선택했습니다.)

VSCode 레포지토리 생성 화면

  1. 만약 로그인 화면이 뜬다면 Sign in with your browser를 눌러 로그인합니다.

VSCode 레포지토리 생성 화면

  1. 생성 완료

VSCode 레포지토리 생성 완료 화면

Github 파일 추가 방법

  1. ①탐색기 탭을 눌러 폴더로 돌아간 뒤 src > content > blog 아래 github-test.md 파일을 생성합니다.

VSCode git-test.md 파일 생성 화면

  1. 내용을 작성합니다.
github-test.md
---
title: 'Github 테스트'
description: 'Github 동작 테스트를 위한 글입니다'
pubDate: 'Jul 13 2026'
heroImage: '../../assets/blog-placeholder-1.jpg'
---

## Github 구축 완료
Github에 Repository를 정상적으로 생상하였습니다.
코드가 정상적으로 업로드(Push) 되는지 테스트 해보겠습니다.
  1. ①소스제어 탭을 눌러 다시 Git으로 되돌아 옵니다.

VSCode Git 화면

  1. ①변경 내용 스테이징을 눌러 Git 대상 파일임을 명시합니다.
  2. ②커밋 메시지에 작업에 대한 내용을 작성합니다. 예) Add git-test.md
  3. ③커밋을 클릭합니다.
  4. ④커밋 내역이 쌓인 것을 확인할 수 있습니다.

VSCode Git 커밋 화면

  1. 변경내용 동기화를 눌러 Github 서버로 업로드(Push) 합니다.
  2. main(로컬)과 origin/main(서버)의 커밋이 같아진 걸 확인할 수 있습니다.

VSCode Git 푸시 화면

마치며

Git은 어렵지만 잘 사용하면 굉장히 편리한 도구입니다.

저도 처음에 협업용 도구라고만 생각해서 잘 쓰지 않았는데요
파일을 외장하드에 넣고 다닐 필요 없이 어디서든 수정할 수 있다는 건 굉장히 큰 매력 같습니다.

다음 글에서는 Github에 Push 하면 웹 서버에 자동으로 배포하는 방법에 대해 소개 드리겠습니다.
긴 글 읽어 주셔서 감사합니다.