[Github] Github 를 이용한 개인 홈페이지 만들기

Github 는 외부저장소로서 최고의 인기를 끌고있는데, 의외의 숨겨진 기능이 많이 있다.

일단 자신의 계정으로 만든 github 페이지에서 웹페이지 호스팅까지 해주는 놀라운 기능이 있다.

예를 들어 Github 에 https://github.com/XXX 라는 XXX 계정을 만들고 로그인을 하였다면,

자기계정을 prefix 로 가지는 이름으로 XXX.github.io 이라는 이름의 Repository 를 생성한다.

이 Repository 에 index.html 을 비롯한 css, javascript 등의 파일을 commit 하면,

계정명이 앞에 먼저붙는 XXX.github.io 페이지에 호스팅이 바로 된다.

필자는 leechwin 이라는 계정으로 Github 에 로그인후 기본적으로 아래와 같이 leechwin.github.io 저장소를 생성하니 다음과 같이 저장소가 생성되었다.

index.html, css, javascript, image 등의 파일을 커밋한 후

http://leechwin.github.io/ 으로 접속하니 개인 홈페이지처럼 동작을 잘 한다.

참고로 위의 사이트에 사용된 자바스크립트 라이브러리는 다음과 같다.

1. jQuery 

• 너무나 유명한 DomElement Control 라이브러리이다.
• CSS Selector 의 개념을 알고있다면 쉽게 사용할 수 있다.

2. Twitter bootstrap

• Web UI Component 들을 제공하는 라이브러리이다.
• jQuery Mobile 도 유명하지만, 심플하고 깔끔한 Desktop, Mobile Web UI 에 개인적으로 더 나아보인다.
• bootstrap-responsive.css 를 적용하면, 해상도에 따라 자동으로 레이아웃 조절이 가능하기때문에 N-Screen 대용도 가능하다.
• 

3. Timeliner.js

• Vertical Timeline 을 구성하기 위해 쓴 라이브러리이다.
• expand/collapse 등을 지원하여 화려한 Vertical Timeline 을 구성할 수 있다.
• Demo
• 

4. ColorBox.js

• Image 를 깔끔한 Dialog 에 담아 slideshow 등을 가능하게 해주는 라이브러리이다.
• Demo
• 

5. jQuery Timelinr

• Horizontal  Vertical Timeline 을 지원하는 라이브러리이다.
• 개인적으로 좀 조잡해보여 적용하였다가 Timeliner.js 로 옮겼다.
• Demo
• 

Github 는 각 프로젝트 저장소별로도 웹페이지 호스팅이 가능하다.

각 저장소마다 gh-pages 라는 Branch 를 생성하고, 이 Branch 에 index.html 을 비롯한 css, javascript 등의 파일을 commit 하면 바로 호스팅이 된다.

1. Github 에 https://XXX.github.io/Project1 이라는 XXX 계정의 Project1 이라는 프로젝트를 생성

2. Project1 저장소에서 gh-pages 라는 Branch 를 생성하고 이곳에 index.html 을 비롯한 파일들을 commit

3. 이 후 XXX.github.io/Project1 페이지에 접속하면 바로 웹호스팅이 된다.

참고: https://help.github.com/articles/user-organization-and-project-pages/