[GitHub] 정적 페이지 만들기

만드는 방법

---

1. 템플릿 다운로드하기

1. https://html5up.net 에서 원하는 템플릿 다운로드하기 (오른쪽 상단에 Download 누르면 됨)

   

2. 다운로드한 압축 파일에서 readme.txt, license.txt 파일 삭제

   

3. 원하는 경로에 다운로드한 압축 파일 내용물 이동

   나는 /Users/crystal/myPage 아래에다가 삭제하고 남은 파일을 풀었다. 윈도우도 아무 폴더에다가 풀어도 상관없음

   

2. Github Repository 생성

1. https://github.com에 로그인 후 New 버튼을 클릭해서 새로운 Repository 를 생성하자 (버튼은 Github 홈페이지 왼쪽 상단에 있다.)

   

2. Repository name 은 계정이름.github.io 으로 지은 후 Create repository를 클릭한다.

   내 계정이름은 park-chris라서 park-christ.github.io로 적었다.

   

3. 이런 화면창이 뜬다면 성공적으로 repository를 생성한것이다.

   

3. Github Repository에 파일 업로드

1. 템플릿 파일을 넣은 디렉토리에서 터미널을 연다.

   pwd를 입력해서 현재 경로를 확인한다. (windows에서는 cd였던거 같다.)

   

2. git을 초기화하고 로컬 저장소에 파일을 업로드하기 위해 아래 명령어를 터미널에 순서대로 입력한다.

	## 해당 디렉토리 git 초기화
	git init
	
	## 새 로컬 저장소에 현재 디렉토리에 있는 파일들 모두 업로드 (파일은 staged 상태)
	git add .
	
	## 로컬 저장소에 stage한 파일들 commit
	git commit -m "초기 템플릿"

1. 로컬 저장소에서 원격 저장소로 파일을 업로드하기 위해 아래 명령어를 입력한다.

	## branch 이름을 main으로 바꿈
	git branch -M main
	
	
	## 원격 저장소 추가
	## 예시: git remote add origin https://github.com/park-chris/park-chris.github.io.git
	git remote add origin [원격 저장소 주소]
	
	
	## 원격 저장소에 있는 main이라는 branch에 commit
	## 아래 명령어를 입력 후 username과 password를 물으면 아래 
	## "git push할 때 username과 password 입력" 참고
	git push -u origin main

[원격 저장소 주소] 확인하는 방법

원격 저장소 주소는 Github에 생성한 Repository에서 확인할 수 있다. 

git push할 때 username과 password 입력

 username : Github의 username password : access token - access token 발급 방법 : 1. Github > Settings > Developer settings > Personal access tokens > Tokens (classic) > Generate new token > Generate new token (classic)  1. Note 항목에는 본인이 원하는 거 아무거나 입력하고 Expiration에는 원하는 만료기간을 정한다.  1. 페이지 하단에 `Generate Token` 클릭하면 창이 뜨고 token을 복사할 수 있게 나온다. 이 token을 password 칸에 넣으면 된다. 

1. Github 페이지에 Repository로 가면 이렇게 파일이 업로드 된것을 확인할 수 있다.

   

4. Github page로 호스팅하기

Github > 생성한 repository > Settings > Pages 클릭하면 아래처럼 화면이 뜨는데 branch를 /docs로 바꾸고 save하고 다시 /root로 바꿔서 save하면 곧 연두색 박스처럼 뜬다. 그럼 이제 인터넷으로 내가 올린 템플릿으로 만든 페이지에 접근이 가능하다.

![13](/assets/img/GBD6/13.png)

결과

정적 페이지 수정하기

우리가 다운받은 템플릿을 써서 바로 Github에 올렸는데 그렇게 하면 나만의 페이지가 아니다. 글자나 그림을 내가 원하는 것으로 바꾸어줘야한다.

간단하게 아래 사진처럼 탭에 뜨는 사이트 이름을 바꿔보자!

1. Visual Studio Code나 기타 문서 편집기(메모장, notepad++ 등)로 페이지 소스 중에 index.html을 열어준다.

2. 태그안에 있는 글자를 바꿔준다.

   기존에는 Stellar by HTML5 UP 이었는데 Portfolio by 박수정 로 바꿔주었다.

   

3. 저장 후 소스가 있는 디렉토리에서 터미널을 연다. 터미널에 ls-la을 치면 아래처럼 assets, images, index.html 등등 나올 것이다.

	## 현재 디렉토리에 파일 검색
	ls -la
	
	## 전체 파일 commit하기 위해 로컬 저장소 저장 
	## 개별의 파일만 하고 싶을 경우 .대신 파일명
	git add .
	
	## git 상태 확인
	git status

git status 명령어 입력 후 아래와 같이 뜨면 된다.


![17](/assets/img/GBD6/17.png)

1. commit하고 원격 저장소에 업로드하기

	## commit 하기 
	## 예시 : git commit -m "타이틀 수정"
	git commit -m "커밋 메세지"
	
	## 원격 저장소에 push하기
	git push origin main

1. Github에 Repository에 가면 아래처럼 수정 이력이 나온다.

   

결과

사이트에 접속하면 우리가 변경한 부분이 나온다.