깃허브 호스팅 방법 - gisheobeu hoseuting bangbeob

오늘은 간단하게 github를 통해서 정적 웹사이트를 웹호스팅 해보는 방법에 대해 정리를 해보고자 한다.

​

먼저 시작하기에 앞서 github에 로그인을 해줘야 한다.

(없다면 회원가입을 해서 계정을 하나 생성해주어야 한다.)

​

그렇게 생성된 github 내 계정을 들어가면 준비 완료!

만약 자신이 깃허브를 사용하고 있었고

웹호스팅을 하고 싶은 페이지를 깃허브 레파지토리에 올려져있는 상태라면

다음과 같이 그 레파지토리에 들어가 준다.

​

​

하지만 만약 깃허브를 처음이용하는 사람들이라면

새로운 레파지토리를 만들어 주어야 한다.

​

지금 설명할 것은 깃허브 신규이용자를 위한 레파지토리 생성 및 파일 업로드 방법에 대한 설명이다.

​

아래의 사진처럼 Repository를 누른 다음 우측 상단의 초록색 new 버튼을 클릭해준다.

그러면 다음과 같은 창이 뜨게 되는데

형광펜으로 체크해 놓은 곳은 내가 생성할 레파지토리 명을 쓰면 된다.

(Description에는 간단한 설명을 적으면 되는데 안 적어도 상관없다.)

​

원하는 이름을 적은 후, 하단의 초록색 "Create repository" 버튼을 눌러준다.

그러면 생성이 완료 되는데,

다시한번 repository로 들어가 보면 내가 방금 만든 repository를 확인할 수 있다.

​

그럼 방금 만든 레파지토리를 클릭해서 들어가면 다음과 같은 창이 뜬다.

밑줄 쳐 놓은 updating an existing file 을 클릭하면 업로드 창이 뜬다.

업로드 창이 뜨면 내가 웹호스팅을 하길 원하는 페이지를 업로드 해준다.

그 후 하단의 초록색 버튼을 누르면 정상적으로 나의 repository에 파일이 올라오는 것을 확인할 수 있다.

이렇게 하면 일단 웹호스팅을 진행할 레파지토리는 전부 준비가 되었다.

그럼 이제 다음 단계인 웹호스팅하기에 대한 설명이다.

먼저 웹호스팅을 진행하고 싶은 파일이 있는 레파지토리를 열어준다.

상단 위에 보면 setting이라는 부분이 있는데 그 부분을 클릭해준다.

그 후 페이지를 조금만 아래로 내려보면 옵션 중 github pages 라는 옵션이 나오게 된다.

여기서 콤보박스를 누른 후 master로 바꿔준 후 save를 눌러준다.

그럼 다음과 같이 자동으로 새로고침이 되는데,

방금 설정했던 github pages 설정 부분을 다시 가보면 아까전과는 다르게

새로운 url이 생겨있는 것을 확인할 수 있다.

​

우리는 앞으로 이 URL을 사용하면 무료로 웹호스팅을 할 수 있다!!!!

이제 호스팅을 할 준비는 완료가 되었다.

위에 뜬 웹페이지 URL을 복사해서 인터넷에 붙여넣기 해준 다음 뒤에 열고싶은 파일 이름을 적어준다.

그러면 다음과 같이 내가 만든 페이지가 뜨게 된다!!!

​

만약 jquery가 안먹을 경우 cdn 코드를 다시한번 살펴보자.

<script src="http://code.jquery.com/jquery-latest.js"></script>

이 코드로 되어있으면 jquery가 안먹는다...

github 에서는 latest가 안먹는다고 한다.

(는 내 경험담이다. 나도 알고싶지 않았다....)

​

때문에 만약 페이지 로딩 시 jquery가 안먹으면 다음의 코드로 jquery의 cdn 코드를 바꿔주도록 하자!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>