플러닝 Flearning

Static 사이트 쉽게 호스팅하기 (via Github) 본문

최신 기술 트렌드/Server

Static 사이트 쉽게 호스팅하기 (via Github)

플러닝 2016.05.13 01:15

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



1. 자신의 Github username에 맞춰 새로운 repository를 생성합니다. 저 같은 경우는 “cycorld.github.io” 로 만들어야 합니다.

2. 메뉴 중 Settings 에 들어가 Github Pages 섹션의 Launch automatic page generator 버튼을 클릭합니다.

3. 일반적인 에디터를 사용하듯이 내용을 작성합니다. 여기에서 사용하는 문법은 Markdown인데 위의 도구 버튼들의 도움을 받아 작성하시면 됩니다.

4. 마음에 드는 템플릿을 고릅니다. 템플릿을 선택하면 아래에서 미리보기를 할 수 있습니다.

5. https://{username}.github.io 로 접속하여 자신의 첫 홈페이지를 감상합니다.

6. 내용을 수정하고 싶으면 2번의 방법으로 찾아 들어가면 됩니다.


더 멋진 소개 페이지 만들기

앞에서 말씀드린 http://html5up.net/ 등의 사이트에서 예쁜 템플릿을 다운로드 받습니다. 그리고 아래 동영상을 참고하여 c9 이라는 클라우드 개발 플랫폼을 이용하여 템플릿을 수정하고 Github에 올려 보시기 바랍니다. 개발 및 툴에 대한 지식이 조금 있으신 분들은 c9과 같은 서비스를 사용하지 않고 자신의 컴퓨터 로컬 환경에 직접 필요한 툴을 설치하여 작업할 수 있습니다.

간단한 git 명령어 (자세한 내용은 git 강의 참조 : TK 링크 준비중)


1. git status : git의 상태를 보여줍니다

2. git diff : 파일들의 변경 내용을 보여줍니다

3. git add . : 변경된 파일들을 staging에 올립니다

4. git commit -m “작업 내용 요약" : staging 의 내용을 commit 합니다

5. git push : 추가된 commit 들을 remote 에 업로드합니다



사이트를 더 만들 수 있는 방법이 있나요?

네, 있습니다. 새로운 repository 를 만들고 Settings 에 들어가 Github Pages 를 생성하면 http://{username}.github.io/{repository} 로 접속할 수 있게 됩니다.


신고

'최신 기술 트렌드 > Server' 카테고리의 다른 글

Static 사이트 쉽게 호스팅하기 (via Github)  (0) 2016.05.13
0 Comments
댓글쓰기 폼