[GitHub] GitHub Pages 기능 활용해 웹페이지 호스팅하기

GitHub Pages란?

GitHub에서 제공하는 정적 웹페이지(static webpage) 호스팅 서비스로, 포트폴리오 사이트 같은 간단한 사이트를 만드는데 활용된다. 요즘에는 이곳에 Jekyll 이라는 서비스를 결합해 블로그를 만드는 경우도 있다.

이 글에서는 정적 웹페이지를 이용해 간단히 사이트를 올리는 만드는 방법에 대해 알아볼 것이다.

GitHub Page 만들 준비하기

GitHub Page를 만들기 위해서는 다음 두 작업을 먼저 해야한다.

템플릿 다운로드 하기
github 저장소 만들고 다운받은 템플릿 올리기

템플릿 다운로드 하기

이번 글에서는 https://html5up.net/ 에서 제공하는 photon이라는 템플릿을 활용해 실습을 진행한다. Photon은 CCA 3.0 license를 사용하므로, 저작자를 표시해야 한다는 점을 주의하자.

1. https://html5up.net/photon 사이트에 접속해 오른쪽 상단의 Download 버튼을 누른다

Photon by HTML5 UP

A simple (gradient-heavy) single pager that revisits a style I messed with on two previous designs (Tessellate and Telephasic). Fully responsive, built on Sass, and, as usual, loaded with an assortment of pre-styled elements. Have fun! :)

html5up.net

2. 압축을 풀면 다음과 같은 파일 목록이 나온다. 준비가 끝났다.

github 저장소 만들고 다운받은 템플릿 올리기

1. https://github.com/new 에서 저장소를 새로 만든다. 이 글에서는 저장소 이름을 demo-page라 한다.

GitHub: Where the world builds software

GitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...

github.com

2. 다음 명령어를 로컬에서 수행해 해당 저장소를 위한 git을 만들자

➜  git mkdir demo-page # demo-page 폴더 만들기
➜  git cd demo-page # 폴더 이동
➜  demo-page git init # 깃 저장소 시작
➜  demo-page git:(master) git branch -M main # 브랜치 명 변경
➜  demo-page git:(main)

3. 다음 명령어를 사용해 remote repo를 add한다.

➜  demo-page git:(main) git remote add origin https://github.com/[user name]/demo-page.git

이 부분에 대해 잘 알비 못한다면 https://kotlinworld.com/284 글을 참조하도록 하자.

[Git Remote] git remote, push를 이용해 Remote 저장소(GitHub, GitLab, etc)를 다루는 방법

git의 remote란 무엇인가? git에서의 remote 는 외부의 깃헙 저장소가 있는 url에 대한 alias(별칭)을 만들어 관리하기 위한 명령어이다. 이 명령어는 단순히 GitHub만을 위한 것이 아니며, GitLab, Garrit 과

kotlinworld.com

4. 그림 2의 폴더의 파일을 만들어진 폴더에 넣는다.

5. 다음 명령어로 추가된 파일을 git에 올리고 remote repository에 올린다.

➜  demo-page git:(main) git add .
➜  demo-page git:(main) git commit -m "git page demo"
➜  demo-page git:(main) git push origin main

자 여기까지 준비가 끝났다. 작업을 모두 완료했으면 다음과 같은 화면이 나온다.

GitHub Page만들기

자 이제 마지막 단계이다. 단순히 몇가지 설정만으로 위에 올린 웹페이지의 호스팅이 가능해진다.

1. GitHub Page를 만들기 위해 Settings-Pages 탭에 진입한다.

2. Source의 Branch를 main으로 바꾸고 영역을 /(root)로 바꾼후 Save한다.

3. GitHub Page가 만들어졌다. 다음 주소에 만든 웹페이지가 올라간다. 올라가는데 5분 정도 걸리니 커피 한잔을 먹고 오자.

https://[user name].github.io/[repository name]/

4. 웹페이지가 잘 올라간 것을 확인할 수 있다. 내부 내용은 index.html 파일을 바꿈으로써 수정할 수 있다.

데모 페이지

데모 페이지는 https://github.com/simplistudio/demo-page 다음 주소에서 확인할 수 있다.

GitHub - simplistudio/demo-page: Demo of GitHub Pages

Demo of GitHub Pages. Contribute to simplistudio/demo-page development by creating an account on GitHub.