깃허브(GitHub)에 파일 올려서 배포하기
2025. 2. 5. 00:01ㆍIT
깃허브 파일 업로드
포트폴리오용으로 사용하던 호스팅이 있었는데 워드프레스를 설치하고 다른 용도로 사용하게 되면서 포트폴리오를 따로 올릴만한 대안이 필요했다.
얼마 되지도 않는 파일 몇 개를 올리자고 호스팅을 또 결제하는건 돈낭비 같아서 고민하다, 깃허브에 올려서 배포하면 된다는 생각이 들었다.
FTP보다는 귀찮지만 간단하게 올릴수 있다.
우선 깃허브의 개념에 대해 간단히 설명하자면 깃허브에 '원격저장소'를 만들고, 내 컴퓨터(로컬)에 '로컬 저장소'를 만들어서 이 두개를 연결시키고 파일을 업로드하면 끝
1. 깃허브(GitHub)에 가입하고 원격저장소(repository)를 만든다.
New를 클릭하고 Repository name를 입력하고, 배포할거니까 Public(공개) 선택하고 Add a README file는 설명서 같은거니까 필요하면 체크, 필요없으면 체크하지 않아도 된다.
이렇게 하면 파일하나 덜렁 있는 저장소가 만들어진다.
2. 깃허브를 로컬에 설치
GitHub Desktop 설치 - GitHub Docs
GitHub Desktop은 지원되는 Windows 또는 macOS 운영 체제에 설치할 수 있습니다.
docs-internal.github.com
3. 업로드 하고자하는 폴더 우클릭해서 깃허브 실행
Open Git Bash here 클릭
우클릭했는데 저 메뉴가 안보인다면 추가 옵션 표시를 누르면 뜬다.
4. 로컬 저장소 만들고 저장소끼리 연결
- 로컬 저장소 만들기
git init
- 로컬 저장소와 원격 저장소를 연결
- 원격저장소 주소는 https://~~~~ 전체입력
git remote add origin 원격저장소 주소
- 잘 연결이 됐는지 확인하고 싶다면
git remote -v
- 저장소끼리 연결이 잘 됐다면 파일을 올리기 전에 브랜치명을 수정해주는 작업을 해야한다.
- 처음 브랜치가 생성이 되면 'master'라는 이름으로 설정되어 있는데 이것을 'main'으로 변경
git branch -m master main
- 잘 변경됐는지 확인하려면
git branch
5. 파일 받기
저장소 연결도 됐고, 브랜치명 바뀐것도 확인했다면 이제 파일을 올려보자
파일을 올리기 전에 원격 저장소와 로컬 저장소의 상태가 같아져야 한다. 지금 원격 저장소에 README.md 파일이 있는데 이 파일이 로컬 저장소에는 없다. 이상태에서 로컬 파일들을 원격에 올려버리면 파일이 올라가지 않는다.
항상 저장소끼리 최신 상태로 맞춰줘야 한다.(실무에서도 파일 최신화 때문에 충돌 오지게 난다)
아까 브랜치 명을 main으로 바꿔줬으니, git pull origin main 이라고 입력한다.
git pull origin 브랜치 이름
폴더에 들어가보면 README.md 파일이 생겼다. 저장소를 만들때 README.md 파일을 체크하지 않았다면, 원격 저장소에 파일이 없으니 이 작업은 하지 않아도 된다.
6. 파일 올리기
- 파일 올리는 순서는 add > commit > push
6-1. add하기
폴더안에 모든 파일을 올릴거라 git add . 을 입력한다.
개별 파일로 업로드 하려면 파일명을 입력해주면 된다.
git add .
올렸는데 이메일과 이름을 입력해 달라고 한다.
git config --global user.email "이메일 주소"
git config --global user.name "이름"
6-2. commit하기
커밋 메시지는 수정사항이나 업로드 관련 내용을 적으면 나중에 알아보기 좋다.
git commit -m "커밋 메시지"
6-3. push하기
브랜치 이름은 main이니, git push origin main으로 입력
git push origin 브랜치 이름
원격 저장소에 들어가보면 파일이 올라간것을 확인할 수 있다.
7. 배포하기
저장소에서 settings로 들어가서 Pages 메뉴를 클릭
Branch 에서 배포를 원하는 브랜치를 선택하고 save
배포가 성공했다는 메시지와 URL이 보인다.
저장소에서도 배포 URL을 확인할 수 있다.
우측에 Deployments를 클릭하면 URL과 업로드 기록을 확인할 수 있다.
'IT' 카테고리의 다른 글
리액트 프로젝트에 PWA(Progressive Web Apps) 적용 (4) | 2025.02.06 |
---|---|
리액트 개발환경 세팅 (4) | 2025.01.28 |
CSS를 이용한 로딩 애니메이션 소스 (0) | 2025.01.27 |
클릭하면 최상단으로 스크롤 이동하는 버튼 소스 (0) | 2022.07.13 |
레이어 팝업 소스 - 딤(dim) 클릭 시 닫힘 (0) | 2022.07.13 |