본문 바로가기

IT 이야기

Github를 통해서 무료로 웹사이트를 만들어보자



프로그래밍을 해본 사람들은 한 번쯤은 깃허브(Github)를 들어봤을 겁니다. 깃허브를 통해서 프로젝트를 공유하거나 웹사이트를 만드는 등 여러 가지 방법으로 활용할 수 있는데요, 저도 오늘 학교 과제 때문에 깃허브를 통해서 웹사이트를 하나 만들었습니다. 깃허브를 사용하면 github.io 도메인을 가지고 무료로 사이트를 하나 만들 수 있습니다. 하지만 인터넷에 자료가 얼마 없어서 꽤 고생했는데요, 그래서 이참에 제가 자료도 남길 겸 깃허브를 통해서 웹사이트를 만드는 방법에 대해서 알려 드리려고 합니다.





HTML 강좌 1 - HTML 편집 프로그램, 비주얼 스튜디오 코드 다운로드





깃허브를 사용하기 위해서는 먼저 회원 가입을 해 줘야겠죠. 사이트에 들어가신 후 회원 가입을 해 줍시다. 아이디와 이메일, 그리고 비밀번호를 입력하신 뒤 "Sign up for GitHub" 버튼을 클릭해 주세요. 참고로 나중에 웹사이트를 만들 때 아이디를 주소로 활용합니다. 참고하시면서 계정을 만들어 주세요. 


깃허브 사이트: http://github.com





아까 깃허브를 통해서 프로젝트를 공유한다고 했는데요, 깃허브 무료 회원은 프로젝트를 등록하면 무조건 공개 설정이 됩니다. 비공개로 설정하고 싶으면 매월 $7을 내야 하는데요, 중요한 게 아니니 무시하고 바로 "Continue" 버튼을 클릭해 주세요.




그다음에는 간단한 설문 조사가 있는데요, 프로그래밍 경력, 직업 등을 물어봅니다. 설문 조사를 하실 분들은 하신 뒤 "Submit" 버튼을, 별로 설문 조사를 하고 싶지 않으신 분들은 옆에 "skip this step"을 클릭하시면 됩니다.






그러면 회원 가입이 완료되는데요, "Start a project" 버튼을 클릭해서 시작해 봅시다.




앗.. 이메일 인증을 안 했네요. 인증 메일을 보냈다고 하니 이메일로 로그인 한 뒤 인증을 해 줍시다.




인증을 완료한 뒤 진짜로 프로젝트를 시작해 봅시다. 일반 프로젝트를 할 때는 레포지토리 이름은 아무 이름을 사용해도 상관없습니다. 하지만 지금은 일반 프로그래밍 프로젝트가 아닌 깃허브 웹사이트를 만들려고 하는 것이기 때문에 이름을 "아이디.github.io"로 설정해 줍시다. 아이디는 아까 회원가입할 때 사용한 아이디를 사용하고 소문자로 입력해 주세요. 레포지토리 이름을 이렇게 설정하면 아이디.github.io 도메인이 자동으로 생성돼서 웹사이트로 사용할 수 있습니다. 그다음 README 파일을 만든다는 항목에 체크해주고 "Create repository" 버튼을 클릭해 주세요. 






이제 "Create new file" 버튼을 클릭해서 웹사이트를 제작해 봅시다. 




html에서 가장 기본이 되는 파일은 index.html입니다. 대부분의 웹사이트 서버들은 모두 index.html을 시작 파일(?)로 설정해 두는데요, 깃허브도 마찬가지입니다. 그렇기 때문에 index.html 파일이 없다면 아이디.github.io 도메인으로 들어가도 웹사이트가 존재하지 않는다고 나옵니다. 파일 이름을 "index.html"로 설정한 뒤 간단한 html 코드를 입력해 줍시다(저는 아래 코드를 사용했습니다). 그다음 "Commit new file"을 클릭해 줍시다. 


<!DOCTYPE html>
<html>
<head>
    <title>제목</title>
<head>
<body>
    <h1>안녕하세요 토로토입니다</h1>
</body>
</html>




이제 인터넷 브라우저에 아이디.github.io를 입력하고 들어가 보시면 아래 사진처럼 웹사이트가 만들어져 있을 겁니다. 




개인 서버를 만들어 주는 것이기 때문에 잘 활용하면 온라인 게임, 블로그, 웹사이트 등 여러 가지 방법으로 사용할 수 있습니다. 저도 학교 과제로 온라인 게임을 만들어서 업로드했는데요, 잘 됩니다. html, css, java script 파일을 오프라인으로 작업하고 업로드할 수도 있기 때문에 고수분들은 잘 활용해 보시길 바랍니다.