GitHub Pages

Ad


GitHub에서 계정별 사이트와 프로젝트 사이트를 만들어 서비스할 수 있는 기능을 제공하고 있습니다.

예제로 제 페이지프로젝트 페이지를 보시고, 어떻게 서비스할지를 생각해 보시기 바랍니다.

GitHub Page 만들기

저장소 준비

계정이름.github.io 라는 이름으로 저장소를 생성합니다.
예를 들어 계정이름이 bbonkr 이면 bbonkr.github.com이라고 만듭니다.

저장소를 만들었으면 로컬에 맵핑을 하고 사이트에 필요한 파일을 추가합니다.
html, js, css 등을 추가하고 서버로 동기화합니다.

처음부터 작성할 여력이 없으면, 템플릿도 제공하므로 확인해보시기 바랍니다.
저장소 페이지에서 Settings 메뉴를 클릭하여 설정 페이지로 이동합니다.

GitHub 섹션의 Launch automatic page generator 버튼을 클릭해서 이동된 페이지에서 사이트 내용을 입력하고, 아래쪽의 Continue to layouts 버튼을 클릭하면 템플릿을 선택할 수 있는 페이지로 이동됩니다.
원하는 템플릿을 선택한 후 Publish page 버튼을 클릭하면 저장소에 필요한 파일들이 추가됩니다.
이렇게 템플릿을 사용하여 기본 구조를 잡고, 원하는 내용을 추가해 나가는 것도 좋은 방법으로 보입니다.

저는 HarooPress라는 페이지 생성 프로그램을 통해 사이트의 내용을 추가하고 있습니다. 관심있으시면 HarooPress 저장소를 방문해보시기 바랍니다.

사이트 연결

저장소에 파일을 추가하고, 동기화를 완료한 후, 웹 브라우저를 실행하고 주소창에 저장소 이름과 같은 URL (계정이름.github.com)로 이동하면 사이트를 사용할 수 있습니다.

제가 만든 페이지는 여기: bbonkr.github.io입니다.

네, 주소창을 보면 bbon.me라는 도메인이 보여집니다. 이와 같이 소유하고 있는 도메인으로 연결도 가능합니다.

도메인 연결

소유하고 있는 도메인으로 서비스하기 위해서 필요한 건 도메인 정보를 변경하는 것과 저장소에 CNAME 이라는 파일을 추가하는 것입니다.

CNAME 파일 추가

저장소에 CNAME 이라는 파일을 추가하고 내용은 연결할 도메인을 입력해 두는 것입니다.

저장소의 CNAME 파일의 내용을 확인하시면 간단히 이해가 되실 것으로 생각됩니다.

도메인 설정

도메인 정보를 변경하는 것은 도메인 관리 업체마다 다른 형태일 것으로 생각됩니다만, 제가 이용하고 있는 가비아라는 업체에서 관리되는 형식은 아래와 같습니다.

호스트(IP) 정보

bbon.me 192.30.252.153

이 부분은 GitHub Help: Tips for configuring an A record with your DNS provider 페이지에서 정확한 정보를 확인할 수 있습니다.

GitHub Project Page 만들기

GitHub 에서 저장소 별 페이지도 서비스하고 있습니다.
먼저 저장소별 페이지의 접근 URL은 다음과 같은 형식으로 사용합니다.

계정이름.github.io/저장소이름

Project page 추가

저장소 정보 페이지로 먼저 이동합니다.

그리고 gh-pages 라는 이름으로 브랜치를 추가합니다.
브랜치의 이름을 꼭 gh-pages라고 작성해야 합니다.

그 후, gh-pages 브랜치에 프로젝트 페이지의 내용으로 사용될 파일을 추가하고 서버로 싱크하면 프로젝트 사이트를 사용할 수 있습니다.

프로젝트 페이지도 계정이름.github.io 페이지와 동일한 방법으로 템플릿을 사용할 수 있으므로 템플릿으로 추가한 후 내용을 채워나가셔도 됩니다.


위 내용은 GitHub Help 페이지에서 page, project page, cname등의 검색어로 검색하면 더 상세한 내용을 확인하실 수 있습니다.