웹개발 프로젝트(CSS/HTML)-#12 호스팅(hosting)(웹사이트 공개)(github에 호스팅)

오늘은 내가 만든 웹사이트를 공개할 수 있는 "호스팅" 이라는 개념에 대해서 알아보겠다.

 

호스팅 과정은 생각보다 간단하지..않다

 

일단 우리가 만든 웹사이트를 팔아야하는 물건으로 비유해보겠다. 그럼 그 사이트를 방문하는 사용자를 클라이언트라고 하며 

 

그 웹사이트를 파는 가게는 서버가 제공해주는것이다.

 

물건-웹사이트

손님-클라이언트

가게-호스트(서버)

이런 관계가 되는것이다.

 

이 비유를 가지고 웹사이트와 호스트의 개념에 적용해보자면

 

1) 클라이언트가 원하는 정보(쇼핑, 유튜브 등등)를 얻기위해 특정 주소로 찾아간다

 

2) 클라이언트가 원하는 정보를 요청한다

 

3) 서버는 그 요청이 유효한지 확인, 유효하다면 원하는 정보 제공

 

4) 클라이언트가 원하는 정보를 받는다.

 

다시말해서 원하는 정보를 요청give -> 정보를 제공take 과정이다.

 

호스트의 역할이 중요한것이다.

 

호스트를 만들어 주는게 호스팅의 뜻 아닐까 싶다.(사실 맞다)

 

그렇다면 호스트란 무엇이고 어떻게 사용하는지 보겠다.

 

위의 예시에서 호스트는 고객이 원하는 정보를 듣고 그 정보를 제공해주는 역할이라는 것을 알 수 있다.

 

호스트의 위치는 간단하게 내가 사용하고 있는 이 컴퓨터일수도 있고 "서버 컴퓨터"라고 하는 특수한 컴퓨터 일 수도 있다.

 

일반적인 호스팅 과정은 매우 복잡하다

 

고정IP주소도 할당받아야하고 컴퓨터를 24시간 가동시켜놔야하고 사용자 정보 보호나 해커들로부터의 안전장치를 위해

 

보안에도 신경을 써야한다고 한다...

 

그래서 보통은 호스팅을 대행해주는 업체를 활용한다.

 

우리는 지금까지 만든 2021MINIHOMEPAGE라는 정적 웹사이트를 

 

Github를 이용하여 호스팅해보겠다. 간단하게 호스팅할 수 있는 방법이다.

 

자 일단 먼저 깃허브에 내가 만든 파일을 업로드한다. 

 

깃허브 상단에 보면 overview 옆에 repository가 있다. 이 repository에 파일을 업로드 해주면 된다.

 

먼저 레퍼지토리에 내가 만든 웹과 관련된 이름으로 제목을 지어주고 레퍼지토리 하나를 생성해준다.

(레퍼지토리 이름은 자유지만 나중에 그 제목을 보고 구별할줄 아는게 좋으므로 최대한 관련된걸로...)

 

나는 mini-homepage라고 제목을 지었다

 

그리고 

 

레퍼지토리 안에 들어가보면 이렇게 Go to file / Add file 이라는 버튼이 보인다.

 

나는 파일을 추가할것이기 때문에 Add file 버튼을 눌러준다

 

그러면 Create new file 과 Upload file 이렇게 두가지가 보일것이다. 나는 이미 존재하는 파일을 올리는것이므로 Upload file을 눌러준다

 

그리고 쉽게 평소에 파일올려주는것과 똑같이 내가 만든 프로젝트의 경로를 찾아서 파일을 선택해주거나 

 

직접 깃허브 창으로 끌고와도 된다.

 

그리고 나서 밑에 Commit changes를 누르면 업로드가 된다.

 

여기서 위칸에 Commit changes라는 박스가 있는데 여기에는 간단한 설명을 추가해주는 공간이라고 보면된다.

 

Add files via upload 부분에 간단한 설명을 추가하면 실제로 그 설명글과 함께 파일이 업로드 된다.

 

이런식으로 업로드된것이 확인됐다면

 

지금까지 한것은 말그대로 업로드만 한것이다

 

이제 진짜 목표인 호스팅을 해보겠다.

 

해당 레퍼지토리의 상단 탭에 보면 맨 오른쪽에 Settings라는 택이 보인다 누른다.

 

맨 밑으로 내려보면 GitHub Pages라는 공간이 보이고 그 안에 Check it out here!를 누른다.

 

여기서 Source부분에 나는 Branch:main 으로 되어있지만 처음엔 None으로 되어있을것이다.

 

None을 main으로 바꿔주고 옆에 있는 Save 버튼을 누른다

 

창을 한번 새로고침(F5)해주고

 

위에있는 URL주소를 누른다.

 

그러면

 

404 오류 메세지가 뜬다.

 

이럴땐 당황하지 말고 

 

url주소에 직접 파일의 경로를 입력해서 들어가면 된다.

 

레퍼지토리에서 나의 홈페이지 경로는 mini-homepage라는 레포지토리안에 minihomepage라는 파일안에 minihomepage.html파일이 있다.

 

다시말해서 

 

mini-homepage/minihomepage/minihomepage.html 이렇게 되는것이다.

 

url주소를 보면 

 

이렇게 설정해주면

 

이렇게 내가 만든 웹페이지가 제대로 호스팅 되어서 잘 작동한다

 

실제로 우리가 추가해줬던 여러가지 기능들(링크, 스크롤, 드랍다운, gif파일 등등)이 모두 잘 작동된다

 

이제 저 url 주소만 있으면 나 뿐만이 아니라 모든 사람들이 내 홈페이지를 볼 수 있는것이다.

 

좀더 유용하게 공익을 위한 홈페이지를 만들면 보람 있을것같다.