github page 배포 오류

[huiji0315]

• [x] link를 통해 다른 페이지로 이동시 github.io/[페이지] 형식으로 되어버려 오류 발생 -> github.io/scalar-webpage/[페이지] 형식으로 동작하게 바꿔주어야 한다.

• [x] 마찬가지로 localhost에서는 바로 잘보이는데 배포후에는 gatsby image가 blur 처리된 상태로 보이는 오류 발생

• [x] favicon 로고가 뜨지 않는 오류 발생

• [x] og:image를 적절한 image로 바꿔야함(현재 header image로 되어있음 but, 이것도 잘 안뜸)

[huiji0315]

실패한 시도 방법

1. gatsby-config.js에 pathPrefix: "/scalar-webpage" 추가
2. gatsby serve script 추가 및 실행
3. link주소를 직접 "/scalar-webpage/[페이지이름]으로 변경

[huiji0315]

gatsby path 문제 참고 링크

https://musma.github.io/2019/08/09/gatsby-js.html

https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/

[huiji0315]

• [x] 핸드폰으로 봤을 때 footer의 첫 줄이 두 줄로 나누어짐 -> SCALAR LAB © 2021 뒷부분 없애면 될 듯
• [x] 핸드폰으로 봤을 때 header에서 publication이 안보임 -> 로고를 없애면 될 듯

[huiji0315]

gatsby og:image path 문제 참고 링크

-> 어이없게 huiji0315.github.io가 아닌 huiji0315/github.io로 url 입력을 잘못해서 발생한 것이었다. 뭐가 잘못된지 깨닫는 데에만 정말 오랜 삽질을 하였다.

https://juneyr.dev/og-tag

https://developers.facebook.com/tools/debug

https://opengraphcheck.com/

https://developers.kakao.com/tool/clear/og -> 카카오톡의 경우 캐싱되어 초기화 필요

• [x] 그런데 local에서는 잘나오는 image가 다시 배포후에 image blur 발생...

[huiji0315]

계속 조건을 바꾸어가며 시도해본 결과, siteUrl만 제대로 입력하면 잘나온다. 그리고 gatsby clean을 통해 캐시를 한 번 초기화해주고 deploy를 해본 후에 console 창에서 image resource를 잘 가져오는지 시간을 가지고 지켜보면 된다.

[huiji0315]

정적 사이트 생성을 목적으로하는 프레임워크라 그런건지 배포하는 네트워크 상황에 따라 image의 업로드가 잘 안되기도 잘 되기도 하는 것 같다. image 오류가 발생하면 캐시 초기화 후에 deploy를 다시 한 번 시도해보자.