[ Github Pages ] 포트폴리오 사이트 만들기 (1) :: 초기 세팅 및 테마 적용

1. Github Pages 생성하기

1-1. Repository 생성하기

 

username.github.io라는 이름의 새로운 repository를 생성합니다. 여기서 username은 GitHub 사용자명을 의미합니다. 예를 들어 GitHub ID가 yourname이면 yourname.github.io가 됩니다 😄 그리고 전체 공개할 포트폴리오이므로 Public으로 선택해주세요

 

아래에 있는 Create Repository 버튼을 선택하면 새로운 레파지토리가 생성됩니다.

 

---

 

 

1-2. Repository Clone 받기

작업물을 저장하고 싶은 폴더에서 터미널을 실행시켜 해당 레파지토리를 클론받습니다.

git clone https://github.com/{USERNAME}/{USERNAME}.github.io.git
# {USERNAME}은 본인의 이름에 맞게 바꿔주시고 {}중괄호는 실제로는 작성하지 않습니다.

여기까지 하시면 보이시는 것과 같이 clone이 성공적으로 실행되었습니다.

 

---

 

1-3. 파일 생성 및 깃 푸쉬해보기

# 생성된 파일로 진입
$ cd {USERNAME}.github.io
# 파일 생성하기
$ echo "Hello World" > index.html

# 원격저장소인 github에 해당 변경사항 push하기
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin main

 

clone받은 파일로 진입하기 > index.html 파일 생성 및 Hello World 문구 작성하기 > 추가반영사항 커밋하기

 

---

 

1-4. github.io 접속해보기 (변경사항 확인하기)

여기까지 진행하시면 간단하게 웹사이트가 잘 구동되는지 확인 가능합니다.

https://{USERNAME}.github.io에 접속하면 Hello World라는 문자가 출력된 것을 확인하실 수 있습니다!

 

---

2.  jekyll 테마 적용하기

2-1. 테마 선택하기

http://jekyllthemes.org

 

해당 링크를 통해 마음에 드는 테마를 선택해줍니다. 저는 timer-bootstrap을 선택하였습니다 😊

 

---

 

2-2. 테마 다운로드

원하는 테마 깃허브 접속 > Code > Download ZIP 을 통해 다운로드합니다.

 

---

 

2-3. 테마 파일 복사하기

이렇게 다운로드 된 파일은 github.io 폴더의 안으로 이동해줍니다.

 

이렇게 다운로드된 모든 파일과 폴더를 이동하였습니다. index.html파일 자체가 가장 최상위에 존재해야한다고 해서 저는 theme 폴더 내 모든 파일은 source폴더와 같은 위치로 빼주었습니다.

 

---

 

2-4. 적용한 테마 원격에 저장하기

 

git add .
git commit -m "theme apply"
git push origin main(master) # git branch로 현재 작업한 파일명을 확인할 수 있습니다

 

이렇게 원격에 테마 적용이 완료되었습니다 :)

 

---

 

2-5. GitHub Pages 사이트 접속하기

 

Repository > Settings > Pages > Visit site

 

Success !

여기서부터는 나만의 포트폴리오로 파일을 수정하며 작업하면 됩니다 😆