Github static website 만들기

Nov 23, 2015 · 2 minute read · Comments
BlogGithub

Github Page란?

PHP나 ASP 같은 서버스크립트 베이스의 웹사이트는 올리지 못하더라도 HTML과 Javscript등으로 이루어진 사이트를 호스팅 할 수 있는 서비스. Github에 repository를 만들고 해당 repository에 index.html을 비롯한 파일들을 올리면 <username>.github.io URL로 접속이 가능하다. 물론 custom domain을 설정해서 사용할 수도 있다.

우선 Automatic Generator를 이용해 페이지 만들어보기(User or Organization Pages sites)

1. Github 가입하기: Github에서 가입하면 된다.
2. Repository 만들기
   • Github에 로그인 하면 나오는 메인페이지의 우측 상단 +New repository 버튼을 눌러 새로운 repository만든다.
   • repository를 만들때 본인의 <username>.github.io를 repository 이름으로 설정한다.
3. repository가 만들어진 후 해당 repository의 세팅에 가보면 Github Pages 옵션에서 Launch automatic page generator를 클릭하여 웹페이지를 만들 수 있다.
4. 만들어진 웹페이지는 userid.github.io주소로 접속 할 수 있다.

이제부터는 Git만 사용할 줄 안다면 해당 repository를 clone 하고 마음대로 html을 수정하고 push 하면 된다. (git 사용법을 잘 모른다면 github web ui에서 파일을 수정할 수도 있다.)

이미 git project 가 있는 상태에서 해당 repository에 대한 github page를 만드는 법.(gh-pages branch)

결론부터 미리 말하자면 각 project repository에 gh-pages라는 orphan branch(history가 없는 branch)를 만들고 해당 브랜치에 static pages들을 commit 하면 된다. 이렇게 하면 http(s)://<username>.github.io/<projectname> 주소로 해당 static web page에 접속이 가능하다.

이미 생성한 repository 있는 상태에서..

1. repository clone.

   $git clone github.com/user/repository.git
   # Clone our repository
   # Cloning into 'repository'...
   # remote: Counting objects: 2791, done.
   # remote: Compressing objects: 100% (1225/1225), done.
   # remote: Total 2791 (delta 1722), reused 2513 (delta 1493)
   # Receiving objects: 100% (2791/2791), 3.77 MiB | 969 KiB/s, done.
   # Resolving deltas: 100% (1722/1722), done.
   

2. gh-pages 브랜치 생성.

   $cd repository
   
   
   $git checkout --orphan gh-pages
   # Creates our branch, without any parents (it's an orphan!)
   # Switched to a new branch 'gh-pages'
   
   
   $git rm -rf .
   # Remove all files from the old working tree
   # rm '.gitignore'
   

3. 페이지 추가 및 push.

   $echo "My Page" > index.html
   $git add index.html정
   $git commit -a -m "First pages commit"
   $git push origin gh-pages
   

Creating Project Pages manually

Custom Domain 설정하기

1. 본인의 domain 호스팅 서비스에서 CNAME record 설정. ex) blog.example.com -> username.github.io (http:// 나 https://는 빼고 입력해야 함)
2. CNAME file 생성 : gh-pages branch에 CNAME이라는 파일을 만들고 blog.example.com 을 입력후 저장 & 커밋 & 푸시 (User page라면 master branch에)

Adding a cname file to your repository.
Tips for congiguring a CNAME record with your DNS provider.
About custom domains for Github Pages sites.