Github pages 찾는 법 / html파일 무료로 호스팅하기- 22.09.04

Github Page 섹션이 바뀌었다. 이전엔 setting page에 가면 하단에 내리면 있었는데 지금은 변경되었음.(2022.09.04)

github page는 ~github.io 로 시작하고 무료로 페이지 만들 수 있다. 개발 블로그 만들 때 잠깐 써봤지만 ruby 버전 맞추다가 운영 포기했었다.

파워포인트나 워드 상관없이 다른 이름으로 저장하기 하면 .html으로 만들 수 있는데 이 파일을 웹 상에 게시해서 해당 주소로만 들어가면 모두 볼 수 있는 방법 중의 하나가 github를 활용하는 것이다. demo 파일 올릴 때 정도로 쓰기는 유용하다. 깃허브 페이지는 이전에도 올렸는데 매번 업데이트 되어 바뀌다보니 다시 최신 일자로 업데이트 해서 포스팅한다. 

---

Github Pages 깃허브 페이지 위치

github pages 만들기: 

해당 리파짓토리repository의 Settings - 좌측 code and automation섹션의 Pages를 누르면 나타난다. branch 바꿔주고 저장하면 깃허브 페이지를 생성할 수 있다. custom domain을 설정하지 않을 경우에는 자동으로 해당 repository의 원본 이름이

본인 깃허브 아이디.github.io/해당repository이름 으로 생성된다.

---

html파일 깃허브 페이지로 호스팅

 

1) 깃허브 로그인 

2) New repository 생성

3) Repository name 설정

Repository name은 도메인으로 뜨니 만약 프로젝트 시연일 때는 해당 프로젝트 이름으로 넣어주면 좋다. 쇼핑몰 페이지 시연 A조라면 shopping-mall-demo-A 이렇게 하는게 주소 칠 때 더 알아보기 쉬울 것 같다.

Public으로만 설정해주고 create repository 버튼을 누르기.

(Private으로 해도 github pages 만들면 다 볼 수 있을 것 같은데 이것도 한 번 테스트해봐야지...)

4) 해당 리파짓토리에 파일 업로드 하기

이제 마크업 언어로 만들어진 파일을 업로드하기. 해당 리파짓토리 Code 하단에 보면 Go to file, Add file, Code 3가지 버튼이 있는 데 이 중에서 Add file 클릭

다음과 같이 뜨면 해당 파일을 drag해서 넣기. Commit changes는 넣어도 좋고 안넣고 commit changes 눌러도 된다. 적는 게 습관되어 initial commit, my ~ 어쩌구 적긴 했지만. Commit changes하면 해당 파일이 업로드 된다.

5) 설정 - github pages 만들기

다시 화면으로 돌아가면 좌측에 github pages가 뜨지 않는다. github pages를 만들러 repository의 하단의 setting을 클릭.

이 중에서 좌측 메뉴를 살펴보면 pages가 있다. pages를 클릭

다음과 같은 디폴트 값을 Brance를 설정해주고 save를 눌렀다.

다음과 같이 custom domain이 뜨는데 custom domain은 자신의깃헙아이디.github.io/만들domain이름 으로 변경해도 되는 것 같다.

6) 도메인 페이지 확인

이제 다시 리파짓토리 들어가면 우측 Environments 란에 github-pages가 생성된 걸 확인할 수 있다. Active라고 뜸. 그런데 깃허브 페이지를 수정하고 반영할 때는 약간의 딜레이가 있어서 당장 실행 안된다고 해도 1분 정도 기다리다가 다시 확인하는 게 좋다.

 

클릭해서 들어가면 실행되고 있는 걸 볼 수 있고 이제 도메인 페이지를 확인!

자신의깃헙아이디.github.io/리파짓토리이름

으로 들어가서 확인하면 끝!

이 페이지는 test page.

 

오늘은 여기까지 :)