2024-05-23(110일차) - 깃허브로 웹포트폴리오 배포하기

📅 24-05-23 110일차

스프링 JSP로 웹포트폴리오를 만들었고 이제 포트폴리오를 사용하려면 배포를 해야했다. 포트폴리오는 HTML CSS JavaScript로만 구현해놓았고, 백엔드 기능 구현이나 DB는 없어서 굳이 빌드하고 서버에 올려 배포하는 것이 번거로울 것 같았다. 다른 방법으로 배포하는 방법을 찾아보았는게, 깃허브로 웹페이지 만드는 방법이 있었다. 깃허브 계정과 소스파일만 있으면 되는 아주 간단한 방법이다!

깃허브 페이지 만기

1. 깃허브 계정 만들기 https://github.com/

2. Repository 생성

3. 소스 파일 만들기

   • 메모장에 html 작성하기
     • CSS는 style태그 안에 감싸기
     • JS는 script태그 안에 감싸기
   • 다른이름으로 저장 시 index.html로 저장한다
   • 꼭 파일명이 index.html이어야한다. 뭣도 모르고 다른이름.html로 저장했다가 404에러나왔다..
     

4. index.html 소스 파일 레파지토리에 업로드
   

   • Create new file 클릭
   • index.html 파일 드래그하고 커밋

5. Repository의 Settings -> Pages
   
   None을 main으로 바꾼 후 save
   
   

6. Pages 항목에서
   "Your site is published at http(s)://XXX.github.io" 라는 메시지가 뜨면 배포 성공

   • 배포성공 후 생성된 url로 접속하면된다
   • 소스 크기에 따라 소스가 반영되는 시간이 조금씩 다르다. 간단한 소스같은 경우엔 1분미만, 좀 많으면 5분 정도 후에 반영된다.

7. html 소스 수정하기

   • 페라지토리에서 커밋된 index.html에서 연필모양을 클릭하면 바로 소스 수정이 가능하다.
     
   • 커밋을 하면 또 5분 내외로 수정 된 html 소스가 반영되어 웹페이지에 보여질 것