[GitHub] 자신의 홈페이지를 Github에 만들기

깃헙에 아이디를 가지고 있다면 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 홈페이지를 가질 수 있다 

<참조>

  - http://ID.github.io 홈페이지 만들기 

  - github-pages