3분만에 Github Page 만들기
회사, 블로그, 포폴용 페이지 등에 활발히 쓰이고 있으며 kakao의 기술블로그로도 쓰이는 github page를 이용해 3분만에 홈페이지를 제작해보자.
Repository 생성
repository를 만들되 이름은 아무렇게나 해도 무방하다.
username.github.io 로 Repository name을 지정하면 username.github.io 주소의 기본 github page가 생성되고, 그 외의 이름으로 지정하면 username.github.io/지정한 이름이 주소가 된다.
나는 github_page_test로 지정했고, 따라서 주소는 SaintSilver.github.io/github_page_test 가 된다.
git init
이제 로컬에 폴더를 하나 만들고, repository를 생성하면 기본으로 제공해주는 아래 커맨드를 복사해서 git 저장소를 생성한 뒤 커밋-푸시하자.
echo "# github_page_test" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/SaintSilver/github_page_test.git git push -u origin master | cs |
제대로 푸시된 모습.
gh-pages
gh-pages 브랜치로 푸시하면 해당 브랜치 소스가 자동으로 github page로써 배포된다.
물론 master 브랜치로도 가능하지만 그럼 settings에서 건드려야 하는 한 단계 과정이 추가된다.
브랜치를 건드리나 설정을 건드리나 고생은 비슷하지만, 연습 겸 브랜치 추가로 진행.
아래 커맨드를 입력하면 gh-pages 브랜치를 만들고 변경한다.
git checkout -b gh-pages | cs |
브랜치가 gh-pages로 변경됐다.
index.html
시작페이지를 위한 index.html 파일을 하나 만들자.
일단은 <h1>태그 하나만 써 줬다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>첫 깃허브페이지입니다</h1> </body> </html> | cs |
push
그럼 이제 gh-pages 브랜치로서 첫 페이지가 될 index.html 파일을 추가하고 푸시하자.
git add index.html git commit -m 'added index.html' git push -u origin gh-pages | cs |
gh-pages 브랜치가 확인된다.
확인
repository의 Settings에서 스크롤을 밑으로 내리면 아래와 같이 자동으로 github page로써 프로젝트가 배포된 것을 확인할 수 있다.
master 브랜치만 보유하고 있다면 Source에서 master branch를 선택 후 Save 하면 된다.
output
예;; 끝입니다;;
