깃허브(github)로 웹사이트 무료 배포하기(github.io)

웹퍼블리셔나 프론트엔드 개발자 중 서버와 연동없는 정적 웹사이트를 배포해서 포트폴리오로 쓰는 경우가 있을 것이다.

웹사이트를 무료로 배포할 수 있는 방법은 여러가지가 있다.

닷홈(https://www.dothome.co.kr/)같은 무료 호스팅 사이트를 통해 배포할 수 있고 과거 나도 웹퍼블리셔 포트폴리오를 위해 닷홈을 통해 배포를 한 경험이 있다.

 

그런데 대부분의 코딩을 하는 개발자들은 깃허브를 쓸 것이고 정적 페이지의 경우 깃허브를 통해 간단히 배포가 가능하기 때문에 그 방법을 알아보자.

 

배포방법

 

1) 해당 프로젝트의 깃허브 레파지토리 접속

2) Setting 클릭

3) Pages 클릭

4) Branch 를 main으로 설정 후 Save 클릭(초기값은 none)

 

5) Visit site 클릭

 

6)사이트 접속 완료

---

참고사항

1) 레파지토리(Repository)가 private일 경우에는 배포 못함
처음에 그런 조건이 있는지 모르고 Settings > Pages를 들어가니까 아래와 같은 화면으로 보여졌다.

 

내용을 보아하니 Github Pages를 이용하려면 계정을 업그레이드 하거나 레파지토리를 public으로 바꿔서 이용가능한 페이지로 만들라고 하여 바로 public으로 변경했다.

https://time-memorizer.tistory.com/211

Github 레파지토리(Repository) private/public 변경

 

 

2) 이미지 확장자명

처음에 배경이미지로 쓸 이미지의 확장자명이 .JPG(대문자)로 되어있었다.

그런데 코드를 짤때는 이게 알아서 .jpg(소문자)로 인식되서 그냥 같은거라고 생각을 해서 코드에는 이미지 명을 .jpg로 적었다.

const images=["bg1.jpg","bg2.jpg","bg3.jpg"];

const chosenImage=images[Math.floor(Math.random()*images.length)];//랜덤으로 이미지를 선택
const bgImage=document.createElement("img");//이미지 태그 생성
bgImage.src=`images/${chosenImage}`;//이미지 태그의 src속성에 이미지 경로를 넣는다.
bgImage.classList.add("bg_img");//이미지 태그에 클래스를 추가한다.
document.body.appendChild(bgImage);//body태그에 이미지태그를 추가한다.

 

그런데 배포가 되고 나서 보니 이미지가 뜨지 않는 것이다.

그리고 나서 개발자도구를 통해 이미지 확장자 명을 .JPG로 수정해보니까 이미지 적용이 됐다.

그래서 결과적으로는 이미지 파일명도 .jpg(소문자)로 변경하고 코드도 .jpg로 해서 정확하게 통일 시켜놨다.

 

정확한건 아니지만 깃허브로 배포시 이미지 확장자명의 대소문자도 신경을 쓰는게 좋을것 같다.