github io 페이지 만들기 사용 방법은

 

안녕하세요 dev-길길IT입니다.

 

간단하게 홈페이지를 하나 만들어서 웹 호스팅을 할 일이 생겼습니다. 예전 같으면 클라우드와 같은 서비스를 사용하려고 찾아볼텐데요. 요즘은 이런 정적 웹 호스팅을 무료로 제공해주는 플랫폼이 많아졌습니다.

 

그 중 최근에 알게된 github io 페이지 서비스를 알려드리려고 합니다. 

정식 명칭은 GitHub Pages입니다. 코드 형상관리 서비스로 유명한 GitHub에서 개발 블로그 용으로 제공하는 기능이고요.

github와 호환이 되고, Jekyll테마를 통해 원하는 블로그 디자인을 꾸밀 수도 있습니다. 직접 개발을 할 수 있어 높은 자유도를 가지고 있는 것은 덤인데요. 이 모든 것이 무료입니다.

 

그 시작으로 어떻게 github io를 만들 수 있는지 소개해드립니다.

 

※ 목차

1. github io repository 만들기
2. github io index.html 페이지 만들기

 

 

1. github io repository 만들기

 

먼저 github의 계정이 있어야 합니다. 이메일만 있다면 빠르게 가입이 가능합니다. 저는 계정이 있다는 가정하에 설명을 드릴텐데요. 먼저 들어가보면 이렇게 Dashboard가 뜹니다. 여기서 Create repository를 선택해줍니다.

 

github io repository를 만들 때는 이름 규칙이 있습니다. [자기 자신의 이름.github.io]의 형태를 지켜주셔야 합니다. 또한 모두에게 오픈되어야 하는 서비스이기 때문에 public으로 설정해주고요. 빠른 배포 및 확인을 위해 Add a README file도 체크해줍니다. 설정이 다 완료되었으면 우측 하단의 Create repository 버튼을 눌러서 생성해줍니다.

 

git의 repository가 만들어졌으면 위와 같은 페이지가 뜹니다. 상단의 Settings 메뉴로 이동합니다.

 

그리고 왼쪽의 메뉴에서 Pages 항목으로 이동합니다. 여기에서 GitHub io Pages 설정을 할 수 있는데요. 기본적으로 readme 파일이 있다면 저렇게 "Your Site live at URL"과 같은 알림 메시지가 나오게 됩니다. 환경에 따라서 호스팅에는 약 5~10분 정도 소요될 수도 있습니다. 여기서 오른쪽의 Visit site 버튼을 누르면 바로 페이지로 이동합니다.

 

이제 여러분은 자신만의 웹 호스팅 사이트를 가지게 되었습니다. 처음에 뜨는 화면은 readme 파일의 내용이 출력됩니다. 이제 이것을 수정해서 나만의 웹 사이트를 만들 수 있습니다.

 

2. github io index.html 페이지 만들기

 

 

github io에서는 html 기반의 파일들로 웹페이지를 만들 수 있습니다. 그 중 index.html을 github.io repository에 넣어주면 메인 페이지로써 동작 시킬 수 있습니다. 테스트를 위해 우측의 add file 버튼을 눌러서 "Create new file" 메뉴를 선택해줍니다.

 

 

상단에 파일 명에 index.html을 적어줍니다. 그 후 파일 본문에 간단한 html script를 작성해주겠습니다. 그리고 우측 상단에 Commit changes를 눌러줍니다.

 

Commit 버튼을 누르면 가운데에 이렇게 팝업이 뜨는데요. 별다른 설정 없이 Commit changes 버튼을 눌러줍니다.

 

잠시 기다리면 이렇게 github io repository 안에 index.html 파일이 생성되었습니다.

 

한가지 확인할 사항은 해당 github io로 사이트를 만들 때 새로운 파일을 업로드하면 바로 적용되지 않았습니다. 서버에 반영되는데 최대 5분 정도의 시간이 걸렸구요. 그 이후 대부분 정상적으로 표시가 되는 것을 확인할 수 있었습니다.

 

 

다시 동일한 사이트로 들어가보면 index.html 파일에 구성하였던 script대로 웹 페이지가 표시되는 것을 확인할 수 있습니다. 이렇게 html 파일들을 이용해서 다양한 홈 페이지들을 무료로 구성할 수 있습니다.

 

활용도가 무궁무진 할 듯 합니다.