Github Dashboard에서 시작
Dashboard 화면 왼쪽 Create repository 버튼을 클릭합니다.
원격 저장소 생성과 Push - by. UXKM
요약 설명
GitHub에 저장소(Repository)를 생성한 후, Gulp가 빌드하기 전의 원본 소스(src)와 루트 파일을 원격 저장소에 푸시하는 과정입니다.
7.1.1. 시작하기에 앞서...
중요합니다!
본 커리큘럼에서는 git과 GitHub의 개념 및 역할에 대한 설명은 제외되어 있습니다.
따라서 git과 GitHub를 처음 경험하는 분들은 본 페이지의 과정이 어렵고 생소할 수 있습니다.
천천히 꼼꼼하게 이 페이지의 커리큘럼을 따라 진행해 주세요.
7.1.2. Github 저장소(Repository) 생성
개인 Github 저장소(Repository)가 없다는 전제하에 진행합니다.
Github 계정을 생성하고 로그인하세요.
(계정 생성 과정은 생략합니다.)
저장소(Repository) 정보 설정 및 생성
- Repository name (필수): 저장소 이름 설정
- Description: 간단 소개 글 작성
- Add a README file: README.md 파일 생성
저장소 이름은 계정이름.github.io로 합니다.
(아래 이미지를 보면 예시된 계정 이름은 UXKM-Gulp으로 대문자가 섞여 있습니다. 이 경우 소문자로 변경해도 문제 없습니다.)
※ 본 커리큘럼에서 저장소 이름을 하나의 단어가 아닌 GitHub 주소로 지정하는 이유는 저장소 이름 자체를 도메인처럼 사용하기 위함입니다. 이렇게 하면 소스의 모든 경로를 루트 기준의 절대 경로로 설정할 수 있습니다.
※ 보통의 경우에는 저장소 이름을 목적에 맞는 하나의 단어로 정합니다.
위 정보 등록 및 Add a README file에 체크 후 Create repository 버튼을 클릭합니다.
저장소 생성 확인
전 단계에서 설정한 내용으로 저장소 생성이 완료됩니다.
Repository name과 Description에 등록한 내용으로 README.md 파일이 생성된 것을 확인할 수 있습니다.
저장소 주소 확인
초록색 Code 버튼을 클릭하여 저장소 주소를 확인합니다.
이 주소는 저장소와 로컬 프로젝트 폴더를 연결하는 데 사용됩니다.
7.1.3. 로컬(Local) 폴더와 Github 저장소(Repository) 연결
Github에 배포하기 위해 그동안 세팅했던 로컬의 Gulp 폴더와 새로 생성한 Github 저장소(Repository)를 연결해야 합니다.
GitHub Desktop이라는 편리한 도구가 있지만, 도구의 선택과 사용은 여러분의 몫이기에
본 커리큘럼은 기초적인 방법인 터미널을 사용하는 방법으로 진행합니다.
git init
Gulp로 작업한 폴더를 git이 관리하는 저장소로 만들기 위해 터미널에 아래 명령을 실행합니다.
git init가 정상으로 실행되면 파란 밑줄처럼 메시지가 나타납니다.
Initialized empty Git repository in D:/_uxkm/_gulp_setting/.git/ (UXKM이 세팅한 폴더 경로)
Initialized empty Git repository in 각자 Gulp를 세팅한 폴더 경로/.git/ (각자 세팅한 폴더 경로)
그리고 Gulp 폴더에는 반투명의 .git 폴더가 생성됩니다.
git remote add origin
Gulp 폴더를 저장소와 연결하기 위해 아래 명령을 실행합니다.
(아래 이미지, Github 좌측 상단부분의 계정 이름, 저장소 이름을 참고하세요.)
UXKM이 생성한 Github 저장소 기준으로 하면,
git remote add origin https://github.com/UXKM-Gulp/uxkm-gulp.github.io.git
각자 세팅한 Github 저장소 기준으로 하면,
git remote add origin https://github.com/계정 이름/저장소 이름.git
명령을 실행 후 아래처럼 아무런 결과 출력 없이 아래 이미지처럼 보이면 정상입니다.
로컬(Local) 폴더와 Github 저장소(Repository)가 정상적으로 연결되었는지 확인하려면 터미널에 아래 명령을 입력합니다.
위 이미지처럼 fetch, push 경로가 내가 git remote add origin으로 입력한 경로와 같게 나오면
Github 저장소와 정상적으로 연결이 완료된 것입니다.
7.1.4. Push 권한 설정
공개된 Github의 저장소는 누구나 Pull 요청(변경 사항을 가져오는 것)이 가능하지만,
Push 요청(변경 사항을 저장소에 반영하는 것)은 계정 소유자 및 저장소에 쓰기 권한이 있는 사용자에게만 허용됩니다.
이전 섹션에서 로컬 Gulp 폴더와 Github에 생성한 원격 저장소와 연결했지만 아직 Pull만 가능할 뿐 Push의 권한은 없습니다.
이 부분도 앞서 언급한 도구(GitHub Desktop 등)를 사용하면 편리하지만,
우리는 터미널을 이용하여 권한을 등록하고 원격 저장소로 Push 하는 과정까지 진행합니다.
권한 설정을 위해 Personal access tokens 생성
Github 페이지 우측 상단 프로필 이미지를 클릭합니다.
프로필 메뉴 하단 Settings를 클릭합니다.
Settings 페이지 왼쪽 메뉴 맨 하단 Developer Settings를 클릭합니다.
Developer Settings 페이지 왼쪽 메뉴 Personal access tokens 클릭 후 Tokens (classic) 클릭
Generate new token 버튼 클릭 후 Generate new token (classic)을 클릭합니다.
New personal access token (classic) 페이지에서,
Note에 토큰 이름 또는 사용 목적을 적고,
Expiration에서 토큰 만료 기간을 선택하고,
Select scopes의 모든 항목을 체크한 후
Generate token 버튼을 클릭합니다.
Token 생성이 완료되었습니다.
중요합니다.
토큰 생성 후 아래 페이지를 벗어나면 다시는 토큰 코드를 볼 수 없습니다.
토큰 생성이 완료되면 토큰 코드를 복사하거나 메모장에 저장하세요!
Github 원격 권한 등록(관리자 자격 증명)
방금 생성한 Personal access tokens과 Github 정보로 관리자 자격 증명을 진행합니다.
터미널에서 아래 명령을 실행합니다.
ex,
git remote set-url origin https://<복사한 토큰 코드>@github.com/<유저 이름>/<저장소 이름>
UXKM 기준으로 하면,
git remote set-url origin https://ghp_ajs···kl7aSDas@github.com/UXKM-Gulp/uxkm-gulp.github.io
아래 이미지처럼 결과 출력 없이 실행이 완료됩니다.
7.1.5. Github 저장소로 Push
로컬 Gulp 폴더의 루트 파일과 src 폴더를 원격 저장소로 Push 합니다.
이전 [2.4. Gulp 기초 세팅] 페이지에서
.gitignore 파일을 생성하여
dist 폴더 및 node_modules 폴더를
commit 대상에서 제외했기 때문에 Push 되지 않습니다.
기본 브랜치(branch)를 main으로 변경
Push 과정에서 혹시 모를 오류를 방지하기 위해 미리 이 작업을 진행합니다.
git branch -m <변경 전 브랜치명> <변경 후 브랜치명>
git branch -m master main
git pull
Github 저장소를 생성할 때 README.md도 같이 생성했기 때문에,
Push 과정에 충돌을 방지하기 위해 로컬 Gulp 폴더로 README.md 파일을 가져옵니다.
터미널에서 아래 명령을 실행합니다.
git pull origin <브랜치명>
git pull origin main
Pull 명령이 실행되고 원격 저장소에만 존재하던 README.md 파일이 로컬 폴더에 복사된 것을 확인할 수 있습니다.
git push
로컬 Gulp 폴더의 루트 파일 및 src 폴더의 모든 파일을 Github 저장소 main 브랜치로 Push 합니다.
터미널에서 아래 명령을 한 줄씩 따로 실행합니다.
아래 이미지는 터미널에 한 줄씩 명령을 실행한 결과입니다.
commit 되는 파일을 목록과, push 내용을 확인할 수 있습니다.
또한, README.md 파일만 존재하던 Github 저장소 main 브랜치에 방금 Push 한 파일들이 commit message와 함께 존재하는 것을 확인할 수 있습니다.
7.1.6. 만약 위의 과정이 진행되지 않는다면..
중요합니다. 이 섹션은 실패했을 때만 진행하세요.
git init부터 git push까지의 과정 중에
진행이 안되는데 원인을 모르겠다면 초기화하고 천천히 다시 시도해 보세요.
(Personal access token을 커리큘럼대로 따로 저장했다면 [권한 설정을 위해 Personal access tokens 생성] 이 부분은 생략해도 되지만,
[Github 원격 권한 등록(관리자 자격 증명)] 이 부분은 반드시 진행해야 합니다.)
원격 저장소 연결 끊기
터미널에서 아래 명령을 실행하면 원격 저장소와의 연결이 끊어집니다.
.git 폴더 삭제
Gulp 폴더의 .git 폴더를 삭제합니다.
이렇게 하면 원격 저장소와의 연결이 끊어지고
git add, git commit 기록이 완전 초기화됩니다.
git init 부터 다시 시작해 보세요.