7장 Visual Studio Code로 Git과 GitHub 사용하기 요약
07-1 저장소 만들기
작업 폴더 추가
- VS Code에서 모든 작업은 폴더 추가부터 시작
- 새 폴더 생성 후, 해당 폴더를 VS Code에 작업 폴더로 추가
파일 및 폴더 관리
- 새파일: 현재 폴더에 새 파일 생성
- 새폴더: 하위 폴더 생성
- 탐색기 새로 고침: 현재 폴더 내용 다시 불러오기
- 탐색기에서 폴더 축소: 하위 폴더 및 파일 숨김
저장소 초기화
- 좌측 사이드바의 소스 제어 아이콘 클릭 → "리포지토리 초기화"
- VS Code 하단 상태줄에
main브랜치 표시: 현재 브랜치 위치
Git 사용자 정보 설정
처음 Git 사용 시 다음 명령어로 사용자 정보 등록:
git config --global user.name "사용자 이름"
git config --global user.email "이메일 주소"07-2 버전 만들기
파일 만들기
- 폴더 이름 위에 마우스 포인터 → 새파일 클릭 → 파일명 입력
소스 제어 창 확인
- 소스 제어 아이콘에 숫자 표시: 변경된 파일 수 의미
파일 상태
U(Untracked): Git이 아직 추적하지 않은 새 파일
스테이징 하기
- 파일 옆
+클릭 시 스테이징 영역으로 이동 - 스테이징된 파일 옆
A: Added(추가됨) 상태
커밋 하기
- 스테이징된 파일은 커밋 가능
- 커밋 메시지 입력 후 체크표시 클릭
여러 파일 스테이징 및 커밋
- 새 파일 여러 개 생성 → 각각 스테이징 → 하나의 커밋 메시지로 커밋
스테이징 없이 커밋하기
M(Modified) 상태 파일: 변경만 있고 스테이징되지 않은 파일- 바로 커밋 시 확인창에서 "예" 선택 → 스테이징 없이 커밋됨
변경 내용 미리보기 및 취소
- 커밋 전 변경 내용 확인 가능
- 변경 취소 아이콘(되돌리기) 클릭 → 확인 후 변경 내용 취소
Git 로그 확인
터미널 열기 → 로그 확인 명령어 입력:
git log07-3 GitHub에 연결하기
원격 저장소 만들기
- GitHub에서 새 저장소 생성 → URL 복사
VS Code에서 원격 저장소 연결
-
소스 제어 → [원격] → [원격 추가]
-
주소 입력창에 GitHub 저장소 URL 입력
-
원격 이름 입력 (기본: origin)
-
연결 완료 시 fetch 관련 알림창 표시:
- 중요한 프로젝트: 예
- 간단한 실습 프로젝트: 아니요
원격 저장소로 푸시
- 소스 제어 → [풀, 푸시] → [다음으로 푸시]
07-4 브랜치 관리하기
새 브랜치 만들기
- 소스 제어 → [분기] → [분기 만들기]
새 브랜치에서 작업
- 브랜치 전환 후 파일 추가, 스테이징 및 커밋 수행
브랜치 전환
- 하단 상태줄 왼쪽에 현재 브랜치명 표시
- 클릭하여 다른 브랜치로 전환 가능
새 브랜치를 원격으로 푸시
- 브랜치 생성 후 푸시 시 GitHub에 해당 브랜치 자동 생성
브랜치 병합
- 소스 제어 → [분기] → [분기 병합]
- 선택한 브랜치를 현재 브랜치에 병합
8장 GitHub에 이력서 사이트와 블로그 만들기
1. 이력서 웹사이트 만들기
1) 사용할 파일 준비
index.html: 이력서 내용이 들어간 HTML 파일 (첫 화면은 반드시 이 이름으로 저장)style.css: 사이트 디자인용 CSS 파일- 이미지 파일 등도 함께 준비
- VS Code에서 파일을 열어 이미지, 링크 등이 정상적으로 작동하는지 확인
2) 저장소 복제(Fork)
- GitHub 로그인 → 예제 저장소로 이동 →
Fork클릭 → 본인 계정으로 복사 - 복제된 저장소 주소는
https://github.com/사용자명/resume형식 - VS Code에서 [리포지토리 복제] 클릭 → 저장소 주소 입력 → 로컬에 복제됨
3) 이미지 파일 교체
- 기존 이미지 파일 이름 유지하고 파일만 교체
예: 배경 이미지 →bg.jpg, 프로필 사진 →pf.png
4) index.html 수정
- VS Code에서
index.html열기 <funnycom>부분을 자신의 이름이나 사이트 이름으로 수정- 자기소개, 경력, 기술, 학력 등 이력서 정보에 맞게 내용 수정
5) 변경 사항 커밋
- 변경 후 VS Code 소스 제어 탭 클릭
- 변경된 파일 스테이징 → 커밋 메시지 작성 → 커밋
6) GitHub Pages 설정
- GitHub 저장소로 이동 → [Settings] 클릭
- 왼쪽 메뉴에서 [Pages] 선택
- 배포 브랜치(보통
main)와 루트 선택 → [Save] - 생성된 주소 예시:
https://사용자명.github.io/resume
2. 블로그 만들기 (GitHub Pages + Jekyll 테마)
1) 지킬(Jekyll) 테마 살펴보기
- 블로그 목적에 맞는 테마 선택
minimal,cayman,jekyll-theme-slate등 다양한 테마 존재
2) 테마 선택 및 적용
- GitHub에서
Jekyll theme검색 - 마음에 드는 테마 저장소 → Fork 클릭 또는 다운로드
3) 블로그 저장소 구성 및 설정
- 저장소를 만들고 테마 코드 복사 또는 Fork
_config.yml파일 수정: 사이트 제목, 소개, 작성자 정보 등 설정
4) 블로그 포스트 작성
_posts폴더에 Markdown 파일 생성- 파일명은
YYYY-MM-DD-제목.md형식 - 포스트 내용은 Markdown 문법으로 작성
5) 이미지 삽입
- 이미지 파일을
images또는assets/images폴더에 업로드 - 포스트 파일 내에 이미지 삽입 구문 작성:
- 변경사항 커밋 → GitHub에 푸시
참고
- GitHub Pages는 정적인 웹사이트만 지원 (백엔드 기능은 X)
- 개인 웹페이지, 포트폴리오, 블로그 등 간단한 사이트에 적합
