깃헙에 아이디를 가지고 있다면 http://<id>.github.io 형식의 정적 홈페이지를 만들어 퍼블리싱 할 수 있다. AngularJS와 Bootstrap을 가지고 린(Lean)하게 자신의 홈페이지를 만들어 보자. 자신의 홈페이지를 한두시간만에 만들 수 있다. AngularJS와 Bootstrap을 사용하기 때문에 정적 홈페이지를 SPA(Single Page Application) 타입으로 클라이언트(브라우져)에서 서버의 도움(통신)없이 애플리케이션처럼 구동 될 수 있도록 만들 수 있다. 예) 쥔장 홈페이지 : http://ysyun.github.io/
1. 깃헙 계정 및 레파지토리
- https://github.io/ 에서 계정을 만든다
- <id>.github.io 레파지토리를 만든다. 예) 계정이 ysyun 이라면 레파지토리는 ysyun.github.io (저장소 이미 만들었음)
* 주의 : <id>.github.com 이 아니라 <id>.github.io 이다.
- 로컬 PC에서 git clone 한다
$ git clone https://github.io/<ID>/<ID>.github.io.git
예)
$ git clone https://github.io/ysyun/ysyun.github.io.git
2. AngularJS와 Bootstrap 템플릿 사용하기
- AngujarJS+Bootstrap Seed를 git clone 한다
$ git clone https://github.io/lbehnke/angularjs-bootstrap-seed.git
$ cd angularjs-bootstrap-seed/app
//app 디렉토리에 있는 모든 파일을 <ID>.github.io 디렉토리에 copy한다
$ copy * <id.github.io 디렉토리>
- index.html 에서 보여주고 싶은 메뉴를 수정한다. 반드시 메인 페이지는 index.html이고 root 에 위치해야한다
간단한 자기소개와 그동안 만들었던 제품에 대한 포트폴리오를 넣었다
<!-- Navigation -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#/intro">Yun Young Sik</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#/intro">Intro</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#/smartdashboard">Smart Dashboard</a></li>
<li><a href="#/edashboard">Pharos e-Dashboard</a></li>
<li><a href="#/pharosjava">Pharos Java</a></li>
</ul>
</li>
<!-- <li><a href="#/contact">Contact</a></li> -->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
- app.js 에서 routing정보를 수정한다. AngularJS의 routing 정보이다
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/intro', {templateUrl: 'partials/intro.html', controller: GenericViewCtrl});
$routeProvider.when('/smartdashboard', {templateUrl: 'partials/smartdashboard.html', controller: GenericViewCtrl});
$routeProvider.when('/edashboard', {templateUrl: 'partials/edashboard.html', controller: GenericViewCtrl});
$routeProvider.when('/pharosjava', {templateUrl: 'partials/pharosjava.html', controller: GenericViewCtrl});
$routeProvider.when('/project_b', {templateUrl: 'partials/project_b.html', controller: GenericViewCtrl});
$routeProvider.when('/contact', {templateUrl: 'partials/contact.html', controller: ContactViewCtrl});
$routeProvider.when('/imprint', {templateUrl: 'partials/imprint.html', controller: GenericViewCtrl});
$routeProvider.otherwise({redirectTo: '/intro'});
}]);
3. GitHub Push
- git push를 통하여 <id>.github.io 레파지토리에 올린다
$ git push
Counting objects: 10, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (6/6), 680 bytes | 0 bytes/s, done.
Total 6 (delta 4), reused 0 (delta 0)
To https://github.io/ysyun/ysyun.github.io.git
328f41e..ca12f7e master -> master
- push하고 5~10분후에 http://<ID>.github.io 을 호출한다 (웹퍼블리싱에 약간의 시간이 소요된다)
두시간 정도만 투자해 보자. 여러분의 멋진 github 홈페이지를 가질 수 있다
<참조>
'Git, GitHub > GitHub' 카테고리의 다른 글
| [GitHub] Git Remote로 잘못 push 된 디렉토리 삭제하기 (0) | 2013.04.09 |
|---|---|
| [Git] Git 메뉴얼 및 레퍼런스 목록 (0) | 2013.04.01 |
| [GitHub] Fork, Pull Request 개념 (1) | 2013.01.17 |
| [GitHub] Wiki에 Sidebar, Header, Footer 넣기 (0) | 2012.10.25 |
