깃 허브(github)를 이용한 웹 호스팅

깃허브를 이용해서 자신만의 홈페이지를 만드는 방법이다.

 

일단 홈페이지에 필요한 것들을 다 준비했다고 가정하자.(html 파일, CSS 파일  기타 등등)

이걸 설명하기에 앞서서 클라이언트와 서버의 개념을 알아야 한다.

간단하게 설명하자면,

 

 

서버와 클라이언트 사이의 관계

 

여기서 말하는 클라이언트는 일반적으로 우리가 사용하는 컴퓨터이다. 

컴퓨터에서 웹 브라우저(크롬, 파이어폭스와 같은)에 주소를 입력하게 되면, 입력한 주소에 관한 파일을   (그림에는 html) 서버가 클라이언트 쪽(우리의 컴퓨터 PC)으로 전해준다.

 

 

서버는 웹과 관련된 파일들을 가지고 있어야 하고, 당연하게도 서버의 전원이 켜져 있어야 한다.

우리가 일반적으로 가정에서 사용하는 컴퓨터도 서버로 사용할 수 있지만, 현실적으로 24시간 켜두기

힘들기 때문에, 온라인상에 제공하는 서버들을 이용해서 구현하는 것이 효율적이다.

 

물론 자신만의 서비스의 규모가 커지게 되어서 직접 서버를 구축해도 상관없지만, 금전적인 부담이 되기

때문에 여기서는 깃허브를 이용해서 구현할 것이다.

 

이미 온라인에는 많은 서비스가 있지만, 아마존이나 마이크로소프트에서 제공하는 것들..

내가 알기로는 일정 사용기간 이후로는 돈을 지불해야 한다.

 

그렇기 때문에, 깃허브로 해보자.

 

우선 깃허브 계정을 만들자.

 

구글에 깃허브라고 검색을 해서 아래의 페이지에 접속을 하자.

 

 

Sign up을 눌러서 계정을 만들어 주자.

계정을 생성 후에 로그인을 하면, 아래와 같은 상태가 된다.

 

 

 

왼쪽 상단에 있는 New 라는 버튼을 눌러서 새로운 Repository를 생성하자.

 

 

 

 

 

 

New를 누르면 아래와 같은 상태가 되는데, name 적는 란에 적당히 적어주고,  아래에 있는

  "add README file" 을 체크 후에 create repository 버튼을 누른다.

 

 

repository 생성이 완료된다.

여기에 웹페이지에 필요한 html 파일을 업로드 하면 된다.

업로드 방법은 아래 사진을 참고.

아래 보이는 곳에 파일을 드래그해서 업로드 해주면 됨.

 

 

아래는 업로드 예시.

 

commit changes 클릭.

여러개의 파일 업로드도 가능하다.

html 파일 중 하나는 index.html 이라는 이름으로 설정하는 게 좋다.

웹 페이지에서 index라는 이름이 일종의 키워드인데, 웹페이지의 대문페이지라는 의미이다.

 

 

 

 

그 후에 오른쪽 위에 있는 setting을 클릭한다.

 

 

아래로 스크롤을 하다 보면, 깃허브 페이지라는 곳이 있는데, 저기서 main을 선택해준 다음,

 

 

 

그 후에 아래와 같이 save를 눌러주게 되면, 윗 부분에 깃 허브를 서버로 이용해서 생성한 웹 페이지의 주소가 나온다.

이해를 돕기 위해서 번호를 표기했다.

 

여기까지 따라왔다면, 이제 가정에 별도의 서버를 구축하지 않고, 깃허브를 서버로 이용해서 자신만의 

웹페이지를 호스팅 할 수 있게 되었다.

 

 

https://daeeyong.github.io/webPractice/

Test App

웹 호스팅 방법을 설명하기 위해서 빠르게 작성한 html 파일로 생성한 웹 페이지이다.

 

구색만 갖추려는 걸 목적으로 작성해서 많이 엉성하긴 하지만, 이걸로 깃 허브를 이용한 웹 호스팅으로는 

충분하다고 생각한다.