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


  • 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/


저작자 표시
신고
Posted by leechwin