블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

2013.09.07 12:56 Git, 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

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.04.09 10:49 Git, GitHub/GitHub

.gitignore 설정을 깜빡하고 설정하지 않은 상태에서 git remote(GitHub)로 push 하였을 경우 삭제하는 방법



1) 삭제하기 

  - webstorm의 .idea 디렉토리가 GitHub에 push가 되었음 

  - .idea 를 삭제하자 

  


  - 명령수행 3 단계계

$ ll

total 24

-rw-r--r--   1 nulpulum  staff   59  4  6 16:04 component.css

-rw-r--r--   1 nulpulum  staff  473  4  9 09:30 component.js

-rw-r--r--   1 nulpulum  staff  633  4  9 09:30 component.html

drwxr-xr-x  12 nulpulum  staff  408  4  9 09:30 ..

drwxr-xr-x   6 nulpulum  staff  204  4  9 09:30 .

drwxr-xr-x  12 nulpulum  staff  408  4  9 09:56 .idea

$ git rm -r --cached .idea

rm 'angularjs/component/.idea/.name'

rm 'angularjs/component/.idea/component.iml'

rm 'angularjs/component/.idea/dictionaries/nulpulum.xml'

rm 'angularjs/component/.idea/encodings.xml'

rm 'angularjs/component/.idea/jsLibraryMappings.xml'

rm 'angularjs/component/.idea/misc.xml'

rm 'angularjs/component/.idea/modules.xml'

rm 'angularjs/component/.idea/scopes/scope_settings.xml'

rm 'angularjs/component/.idea/vcs.xml'

rm 'angularjs/component/.idea/workspace.xml'

$ git commit -m "remove webstorm .idea directory"

[master 80de3cc] remove webstorm .idea directory

 10 files changed, 352 deletions(-)

 delete mode 100644 angularjs/component/.idea/.name

 delete mode 100644 angularjs/component/.idea/component.iml

 delete mode 100644 angularjs/component/.idea/dictionaries/nulpulum.xml

 delete mode 100644 angularjs/component/.idea/encodings.xml

 delete mode 100644 angularjs/component/.idea/jsLibraryMappings.xml

 delete mode 100644 angularjs/component/.idea/misc.xml

 delete mode 100644 angularjs/component/.idea/modules.xml

 delete mode 100644 angularjs/component/.idea/scopes/scope_settings.xml

 delete mode 100644 angularjs/component/.idea/vcs.xml

 delete mode 100644 angularjs/component/.idea/workspace.xml

$ git push origin master

Counting objects: 7, done.

Delta compression using up to 4 threads.

Compressing objects: 100% (4/4), done.

Writing objects: 100% (4/4), 472 bytes, done.

Total 4 (delta 2), reused 0 (delta 0)

To https://github.com/ysyun/prototyping.git

   cc17d3a..80de3cc  master -> master


  - .idea 디렉토리가 삭제되었음 


  - git rm 옵션들

$ git rm -r --help

usage: git rm [options] [--] <file>...


    -n, --dry-run           dry run

    -q, --quiet              do not list removed files

    --cached                 only remove from the index

    -f, --force               override the up-to-date check

    -r                           allow recursive removal

    --ignore-unmatch      exit with a zero status even if nothing matched




<참조>

  - 원문 : Remove directory from remote repositories

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
TAG Github
2013.04.01 19:41 Git, GitHub/GitHub

낚시성 제목이지만 한번쯤 링크를 걸어 놓고 궁금한 사항 발생시 첫번째로 확인해 볼 레퍼런스 사이트를 정리해 본다 



Git 메뉴얼

  - git-scm.com 의 한글 번역 메뉴얼

 




명령어 레퍼런스

  - gitref.org : 명령어에 대한 예와 다이어그램이 잘 나와있음






Merge 와 Diff Tool 바꾸기 

  - git의 기본적인 merge, diff 툴을 좀 더 괜찮은 넘으로 바꾸어 사용하기

  - p4merge 툴로 바꾸기 : 다운로드 받아서 설치한다

  - extMerge 파일 생성

/Users/nulpulum> cd /usr/local/bin

/usr/local/bin> cat extMerge

#!/bin/sh

/Applications/p4merge.app/Contents/MacOS/p4merge $*


  - extDiff 파일 생성

/usr/local/bin> cat extDiff

#!/bin/sh

[ $# -eq 7 ] && /usr/local/bin/extMerge "$2" "$5"


  - 환경설정 명령 : git config --global <옵션>

// 옵션들 

merge.tool=extMerge

mergetool.extMerge.cmd=extMerge "$BASE" "$LOCAL" "$REMOTE" "$MERGED"

mergetool.extMerge.trustexitcode=false

diff.external=extDiff


  - ~/.gitconfig 내역 변경

[merge]

tool = extMerge

[mergetool "extMerge"]

cmd = extMerge \"$BASE\" \"$LOCAL\" \"$REMOTE\" \"$MERGED\"

[mergetool] <-- 제거

trustExitCode = false

[diff]

external = extDiff


  - 사용법은 p4merge 툴로 바꾸기 참조하시라





기초 문법 다시 보자 





Git 원리 이해하기 


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.01.17 11:13 Git, GitHub/GitHub

Git 서버는 사내에 설치할 수도 있고 GitHub과 같은 서비스를 사용할 수도 있다. 아무래도 스타트업 기업이라면 GitHub의 Private을 이용하는게 좋겠다. GitHub에 대해 알아보자 


1) GitHub 가입하고 저장소 만들기

  - 일반적인 서비스 가입절차와 동일하다 

  - 상단 오른쪽 아이콘 "Create a new repo" 클릭하여 저장소를 만든다. (수동, 자동방식이 존재한다)

  - 최초 저장소에 README.md markdown 형식으로 readme 를 만들어 준다 

  - Admin에서 동료를 추가할 수 있다


2) 프로젝트 Fork

  - 권한이 없는 프로젝트에 참여하고 싶으면 Fork한다. Fork가 되면 자신의 Repository로 복제가 되고 이곳에 마음대로 Push 할 수 있다. 


3) Pull Request 

  - jQuery 원본 repo에서 자신의 리모트 repo로 fork 한다 (in GitHub)

  - 자신의 리모트 repo에서 로컬 repo로 clone 한다 

  - jQuery 원본 repo에서 pull(fetch->merg)한다 (master 브랜치 commit 내역을 맞추기 위함. 물론 conflict 나면 수정해야 겠다)

  - 자신의 로컬 repo -> 자신의 리모트 repo로 push 한다 

  - 자신의 리모트 repo인 jQuery를 jQuery 원본 repo 쪽으로 Pull Request 한다 (Pull Request 받아주는 약속이 OSS마다 틀리니 사전숙지함)

  - 즉, 자신의 리모트 repo 를 원본의 repo의 committer에게 Pull 해달라고 요청을 보내는 것이다


<참조> 

  - http://blog.outsider.ne.kr/866 : GitHub Fetch, Pull, Push, Pull Request

  - http://blog.outsider.ne.kr/644 : GitHub에 Branch, Tag push 하기 

  - http://blog.outsider.ne.kr/641 : GitHub에 있는 Branch 로컬로 가져오기 (git checkout -b [로컬브랜치명] [원격alias]/[원격브랜치명])

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2012.10.25 17:48 Git, GitHub/GitHub

GitHub의 Wiki는 단순 페이지만을 생성하는데, 일반 위키들 처럼 오른쪽에 목차가(Sidebar) 나오고 하단에는 footer등을 넣고 싶을 경우 다음을 참조하자 



내 프로젝트에서도 한번 써봐야 겠다. 그동안 wiki 페이지 기능이 단순해서 사용하지 않았는데, 확장을 할 수 있게 되어 있었다. 

  • OSS인 골룸(gollum)을 통해서 GitHub의 wiki를 확장할 수 있다
  • Sidebar 넣기 
    • _Sidebar.ext 파일을 만든다. 물론 내용은 wiki 형식을 따르면 된다 : .md파일이 없는 모든 sub directory에 영향을 미친다 (요건 체크해 볼일이다)
    • wiki git을 checkout 한다 (wiki의 Git Access 탭에서 git url을 얻으면 됨)
    • wiki repository를 local로 다 가져온후 _Sidebar.md 파일을 만든다
    • .md 파일안에 markdown syntax로 link를 [[link]] 형식으로 넣는다 
    • _Sidebar.md 파일을 commint한후 origin master에 push 한다 
  • Header 넣기
    • _Header.ext 파일 만든다 (wiki 포멧)
    • _Header.md 파일 만든다 (markdown syntax)
  • Footer 넣기
    • _Footer.ext 파일 만든다 (wiki 포멧)
    • _Footer.md 파일 만든다 (markdown syntax)  


요점만 정리했는데, 실제로 해볼일~~에구구

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
TAG Github
prev 1 next