HTML5 자습서 Github 페이지 만들기

준비물에서 만든 JS Bin 계정으로 간단한 HTML/CSS 코딩 연습을 할 수는 있지만 여러 파일로 구성된 제대로된 홈페이지를 만들려면 다른 수단이 필요합니다.

이 문서에서는 http://github.com 에서 제공하는 깃헙 페이지(GitHub Pages)를 활용하는 방법을 설명합니다. 깃헙 페이지를 이용하면 여러 페이지로 구성된 홈페이지를 만들 수 있습니다.

가입하기

  1. https://github.com/ 에 접속
  2. 사용자 ID, 이메일, 암호를 입력한 후 “Sign up for GitHub” 클릭
  3. 아무 옵션도 바꾸지 않고 “Finish sign up” 버튼 클릭. 특히 Help me set up an organization next 누르지 마세요.
  4. 가입 완료 화면이 나온 것을 확인합니다.
  5. 직전에 입력한 이메일 주소로 GitHub 에서 인증용 이메일을 보내는데, 해당 메일에 담긴 링크를 클릭합니다.
  6. “Confirm” 버튼을 누릅니다.

사용자 페이지 만들기

이제 홈페이지를 만들 차례입니다.

  1. https://github.com으로 이동합니다.
  2. 녹색 “New repository” 버튼을 클릭합니다.
  3. “Repository name”에는 본인ID.github.io라고 정확히 입력합니다. 예를 들어 가입시 입력한 본인의 아이디가 hello123이라면 hello123.github.io라고 입력하세요.
  4. “Create repository” 버튼을 클릭하세요.
  5. 이제 저장소가 만들어졌습니다. 이곳에 파일을 추가하면 http://본인ID.github.io 주소에서 누구나 볼 수 있게 됩니다.
  6. 파일을 추가하기 위해 “README” 링크를 클릭하세요. 파일명을 index.html로 변경하고, HTML 파일을 작성한 후 “Commit new file” 버튼을 클릭하여 저장합니다.

테스트

이제 홈페이지 저장소도 만들어졌고, 첫 HTML 파일도 만들어졌습니다.

GitHub 페이지는 처음 생성했을 때 약 10분 정도 기다려야 작동하기 시작합니다. 10분이 지난 후 http://본인ID.github.io로 접속했하여 홈페이지가 제대로 나타나는지 확인해보세요.

파일 추가/수정/삭제하기

가이드

HTML

CSS

자바스크립트