본문 바로가기

공돌이의 오늘생각/티스토리 블로깅

[Github Pages, HTML5] 무료로 간단한 개인페이지 만들기

연구실 홈페이지 기초작업을 하면서 이것저것 알게되었다.

예전에 Dropbox만으로 Static HTML 페이지 구축하는거 해보았으나 그닥 쓸모가 없었던...


그냥 연습삼아 기억날때 해둬야지 싶어서 

Github Pages 에 HTML5 를 이용해 반응형 개인페이지를 구축해보았다.

무료이고, 간단하고, 무엇보다 심플하고 예쁘고.

만든 개인 홈페이지 링크 : http://kickflipin.github.io/index.html


 Github Pages 는 https://pages.github.com/ 에서 설명된대로 

아주 손쉽게 만들어볼 수 있다.


1. 먼저 GitHub에 가입한 후, New Repository를 생성 

이때 Repository명을 "아이디.github.io" 로 설정


2. HTML5 UP 사이트에서 원하는 테마를 다운

HTML5 UP 링크 : http://html5up.net/

제가 사용한 테마는 identity 테마입니다


3. index.html 대신 다운 받은 파일들을 컴퓨터의 아이디.github.io 를 클론한 폴더에 이동

Hello World를 표시하는 페이지 index.html 를 만들도록

Github Pages에는 설명되어 있습니다만, 그대로 하시면 당연히 ”Hello World"만 나오겠죠


4. 이동한 파일 중 index.html 의 내용을 수정

index.html 을 그냥 클릭하시면 웹브라우저에 나타날 뿐이므로, 별도의 에디터 필요


5. Commit & Sync 또는 명령어를 통하여 Github 에 업로드


6. 웹브라우저에서 아이디.github.io 접속

업로드 되고 약간의 시간(5분?)이 지나야 합니다. 


참고로, 홈페이지 주소를 예쁜걸로 바꾸고 싶으시면, DNS 도메인 구매가 필요합니다.

https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/