| VSCode에서 GitHub에서 Netlify로 | 웹사이트 배포하기 |

먼저 실행되는 로직을 간략하게 살펴보자면

 

VSC를 통해 웹페이지를 만들고

해당 소스코드를 Git에 업로드를 한 다음

Netlify에서 깃에 있는 소스코드를 불러와 

웹에 배포를 해볼 것이다.

 

사전준비 : 

install git

vsc setting

register in Netlify

 

---

 

1. Install Git

https://git-scm.com/download/win

Git - Downloading Package

상단 링크에 접속해 본인 pc사양에 맞는 버전을 다운 받아준다.

 

몇 번의 동의를 구하는 항목들을 지나고 설치를 완료한다.

 

설치가 완료되고 모든 것이 작동하는지 여부를 확인하거나 그냥 닫을 수 있다. 실행해주자.

 

초기 실행 화면

버전확인 - 정상적으로 설치가 완료되었는지 확인이 되었다면 이제 깃으로 푸시하는 방법을 알아보자.

 

 

2. VSC Setting 및 Git 배포

 

깃허브 접속 > New repositories

Create repository

링크 복사

vsc 좌측 바 > Source Control > Initialize Repository

VScode Terminal

git remote add origin (깃허브 레포지토리 주소) // 깃 레포지토리 연동

git remote -v // 연결된 origin 확인

 

깃허브의 메인 브랜치 이름이 master에서 main으로 변경되었지만,

git에서는 master가 메인 브랜치 이기 때문에 이름을 변경해주어야 한다.

git branch // 현재 branch 이름이 무엇인지 알려줌.

git branch -m master main // 브랜치의 이름을 master에서 main으로 변경

git branch // main으로 바뀌었는지 확인

깃허브 저장소에 있는 내용을 로컬 저장소에 반영

git pull origin main --allow-unrelated-histories // 처음에 한번 해주어야 정상적으로 로컬 레포지토리의 파일을 깃허브 저장소에 업로드 할 수 있음.

 

Changes 항목에 "+" (Stage All Changes)

Stage All Changes 클릭 이후

Commit

반드시 커밋 메세지 입력

깃허브 코드 업로드 되어있는지 확인.

 

깃허브에 코드 업로드의 다른 방법

git push -u origin main

 

업로드 완료

* 주의 사항 

netlify 배포시에 index.html이 맨 상위 디렉토리로 나와있어야 한다.

 

3. Netlify 배포

사이트 접속 후 Add new site

 

깃에 업로드 해둔 프로젝트 파일을 배포할 것이므로 

Import an existing project 클릭

github클릭

배포 희망하는 프로젝트 파일 클릭

Deploy site

 

링크 클릭

성공적으로 배포 완료