gh-pages 404 오류가 뜨거나 페이지 갱신이 안되는 경우

create-react-app을 사용해서 간단한 페이지를 제작하고, gh-pages를 사용해서 깃허브에 올렸는데 404가 떴습니다. 어리둥절해서 구글에서 해당 원인을 검색해봤는데 별짓을 다해도 404가 없어지지 않다가 딱 2가지만 고치니 정상적으로 페이지가 떴습니다.

1. package.json에서 홈페이지 주소를 확인해보자

package.json에서 homepage에서 github 주소를 입력하시게 될 텐데, 이 부분을 유의하셔야 합니다.

    ...
    
    "homepage": "https://{깃허브아이디}.github.io/{리포지토리명}/"
    
}

리포지토리명 뒤에 슬래시(/)를 반드시 입력해주셔야 합니다. 

이유는 모르겠으나 슬래시 없이 배포를 했을 경우 404가 뜹니다.

2. git push 했는지 확인해보자

정상적으로 배포를 한 뒤, 코드를 수정해서 다시 배포했는데 사이트가 기존과 똑같을 때가 있습니다. 저는 당황해서 기다려도 보고, 코드를 다시 수정해서 배포해봤는데 여전히 그대로였습니다.

그럴 때는 아래 코드를 따라 해 보세요.

$ git commit --allow-empty -m "gh-pages 배포"
$ git push origin 브랜치명 ## ex) git push origin main

테스트해보니 꼭 위 코드를 따라 할 필요 없이 어떠한 내용이든 push만 하면 배포가 정상적으로 되는 것 같습니다. 아마 push를 할 때 github pages에서 빌드가 발생하는 것 같습니다.