Static 사이트 쉽게 호스팅하기 (via Github)
HTML과 CSS, Javascript 로만 이루어진 페이지를 Static 페이지라 부릅니다. 내 소개, 회사 소개 페이지 등 정적인 정보만을 전달하는 페이지를 제작한다면 템플릿을 활용하는 것만으로도 큰 효과를 볼 수 있습니다. 무료 템플릿은 인터넷에서 쉽게 구할 수 있습니다. ex) http://html5up.net
여기에 호스팅까지 무료로 할 수 있다면 더할 나위 없이 좋을 텐데요. Github을 통해 쉽게 static 페이지 런칭하는 방법을 알아보겠습니다.
Github 계정 만들기
우선 https://github.com 에 가입합니다. 이 때, username을 신경써서 만들어주세요. 저는 cycorld 입니다. 최용철의 약자 cyc와 world를 조합하여 만들었고, 인터넷 상의 nickname으로 사용하고 있습니다. 아무도 쓰지 않고 있었기에 cycorld.com 이라는 도메인도 얻을 수 있었습니다. username에 숫자를 넣는 것은 되도록 피하는게 좋습니다. 고유한 영어 이름을 지어보세요. (github username은 언제든 바꿀 수 있으니 너무 심각하게 고민하지는 마세요) 이렇게 신경쓰는 이유는 우리의 첫 웹 페이지의 주소가 github의 username으로 만들어질 예정이기 때문입니다. ex) https://cycorld.github.io
Github Page 생성하기
참고 : https://pages.github.com/
- 자신의 Github username에 맞춰 새로운 repository를 생성합니다. 저 같은 경우는 “cycorld.github.io” 로 만들어야 합니다.
- 메뉴 중 Settings 에 들어가 Github Pages 섹션의 Launch automatic page generator 버튼을 클릭합니다.
- 일반적인 에디터를 사용하듯이 내용을 작성합니다. 여기에서 사용하는 문법은 Markdown인데 위의 도구 버튼들의 도움을 받아 작성하시면 됩니다.
- 마음에 드는 템플릿을 고릅니다. 템플릿을 선택하면 아래에서 미리보기를 할 수 있습니다.
- https://{username}.github.io 로 접속하여 자신의 첫 홈페이지를 감상합니다.
- 내용을 수정하고 싶으면 2번의 방법으로 찾아 들어가면 됩니다.
더 멋진 소개 페이지 만들기
앞에서 말씀드린 http://html5up.net/ 등의 사이트에서 예쁜 템플릿을 다운로드 받습니다. 그리고 아래 동영상을 참고하여 c9 이라는 클라우드 개발 플랫폼을 이용하여 템플릿을 수정하고 Github에 올려 보시기 바랍니다. 개발 및 툴에 대한 지식이 조금 있으신 분들은 c9과 같은 서비스를 사용하지 않고 자신의 컴퓨터 로컬 환경에 직접 필요한 툴을 설치하여 작업할 수 있습니다.
간단한 git 명령어 (자세한 내용은 git 강의 참조 : TK 링크 준비중)
- git status : git의 상태를 보여줍니다
- git diff : 파일들의 변경 내용을 보여줍니다
- git add . : 변경된 파일들을 staging에 올립니다
- git commit -m “작업 내용 요약" : staging 의 내용을 commit 합니다
- git push : 추가된 commit 들을 remote 에 업로드합니다
사이트를 더 만들 수 있는 방법이 있나요?
네, 있습니다. 새로운 repository 를 만들고 Settings 에 들어가 Github Pages 를 생성하면 http://{username}.github.io/{repository} 로 접속할 수 있게 됩니다.
