Gatsby 테마로 GitHub Blog 만들기 이슈

Question

Gatsby 테마로 GitHub Blog 만들기 이슈

devupkim opened this issue 3 years ago · comments

안녕하세요. zoomKoding님! 좋은 Gatsby-theme을 만들어 주셔서 감사합니다.
Gatsby와 Github Pages로 블로그를 만들려고 하던 중 Error와 저에게 발생하는 몇몇 이슈들이 있어 문의를 드립니다.

우선 만드는 과정은 zoomKoding님의 블로그 글을 참고했습니다.

저의 개발 환경은

Windows 10 버전 21H1 (빌드 OS 19043)
Nodejs v16.8.0 (기존에는 14.17.5 LTS 버전이 설치된 상태로 시도했는데 잘 안되어서 업그레이드 한 것입니다.)
npm 7.21.0
Clone은 Github Desktop으로 진행
쉘(?)은 git bash를 사용했습니다

블로그의 과정대로

Repository 생성하기
Repository 가져오기
까지 완료 후
Blog 설치하기 에서 다음과 같은 Warning이 나타났습니다. 이것은 찾아보니 플러그인으로 변경되었다고 하여 큰 문제는 아닌 것 같지만 일단 과정 중 일부이기에 썼습니다.

$ npm install
npm WARN deprecated gatsby-image@2.11.0: This package has been deprecated in favor of gatsby-plugin-image. The migration guide can be found here: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/.

added 2668 packages, changed 15 packages, and audited 2684 packages in 3m

65 packages are looking for funding
  run `npm fund` for details

35 vulnerabilities (19 moderate, 16 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

그리고
4. Blog 배포 준비하기에서는 아래처럼 gh-pages라는 패키지를 설치 후, package.json에 있는 scripts부분에 "deploy": "gatsby build && gh-pages -d public"를 추가해야 한다고 써있기에 해당 파일을 열어보았더니 이미 delpoy부분에 동일하게 작성되어 있었습니다. 이 부분이 문제가 되지는 않을 것 같아 바로 다음 단계로 넘어갔습니다.

User@DESKTOP-00000000 MINGW64 /e/Programming/Github_Repository/taehyunk124.github.io (master)
$ npm install gh-pages --save-dev

up to date, audited 2684 packages in 23s

65 packages are looking for funding
  run `npm fund` for details

32 vulnerabilities (16 moderate, 16 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Blog 배포하기 에서
npm run deploy를 실행 했더니 아래와 같은 경고와 에러가 발생했습니다.
경고는 Gatsby의 버전 문제 때문인 것으로 판단했습니다. 또 발생한 에러와 관련해 해당 에러코드를 구글링 해보니 이런 이슈가 있었습니다. 그러나 제가 경험이 부족한 탓에 어떻게 처리해야 할지 잘 모르겠습니다.
그 이후에 발생한 경고는 이전 과정에서 제대로 호환되지 않았던 문제 때문인 것으로 생각합니다.
결정적으로 마지막 출력(info Done building in 120 sec) 이후 1시간 넘게 기다려 보았지만 Published 문구는 나오지 않았습니다.

User@DESKTOP-0000000 MINGW64 /e/Programming/Github_Repository/taehyunk124.github.io (master)
$ npm run deploy

> zoomkoding.com@1.1.0 deploy
> gatsby build && gh-pages -d public

╔════════════════════════════════════════════════════════════════════════╗
║                                                                        ║
║   Gatsby collects anonymous usage analytics                            ║
║   to help improve Gatsby for all users.                                ║
║                                                                        ║
║   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ║
║   To learn more, checkout https://gatsby.dev/telemetry                 ║
║                                                                        ║
╚════════════════════════════════════════════════════════════════════════╝
success open and validate gatsby-configs - 0.255s
warn Plugin gatsby-remark-images is not compatible with your gatsby version 2.32.13 - It requires gatsby@^3.0.0-next.0
warn Plugin gatsby-remark-prismjs is not compatible with your gatsby version 2.32.13 - It requires gatsby@^3.0.0-next.0
warn Plugin gatsby-remark-copy-linked-files is not compatible with your gatsby version 2.32.13 - It requires gatsby@^3.0.0-next.0
warn Plugin gatsby-remark-smartypants is not compatible with your gatsby version 2.32.13 - It requires gatsby@^3.0.0-next.0
success load plugins - 4.284s
success onPreInit - 0.089s
success delete html and css files from previous builds - 0.006s
success initialize cache - 0.015s
success copy gatsby files - 0.291s
success onPreBootstrap - 2.312s
success createSchemaCustomization - 0.433s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.585s
success building schema - 0.724s
info Total nodes: 104, SitePage nodes: 6 (use --verbose for breakdown)
success createPages - 6.596s
success Checking for changed pages - 0.016s
success createPagesStatefully - 0.550s
success update schema - 0.118s
success onPreExtractQueries - 0.004s

 ERROR

(node:9996) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at
E:\Programming\Github_Repository\taehyunk124.github.io\node_modules\postcss-js\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

success extract queries from components - 1.791s
success write out redirect data - 0.007s
success Build manifest and related icons - 0.323s
success onPostBootstrap - 0.438s
info bootstrap finished - 27.459s
warn You can't use childImageSharp together with zoomkoding.gif — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
success run static queries - 0.272s - 3/3 11.03/s
success run page queries - 0.182s - 9/9 49.46/s
success write out requires - 0.015s
success Building production JavaScript and CSS bundles - 70.376s
success Rewriting compilation hashes - 0.010s
success Building HTML renderer - 19.699s
success Building static HTML for pages - 1.281s - 9/9 7.03/s
info Generated public/sw.js, which will precache 14 files, totaling 508149 bytes.
The following pages will be precached:
/offline-plugin-app-shell-fallback/index.html
success Generating image thumbnails - 102.101s - 71/71 0.70/s
success onPostBuild - 0.342s
info Done building in 120.1355355 sec

또한 이후
6. Repository Source Branch 변경하기
과정을 시도해보려했으나 Source의 Branch에는 master(main)과 Docs 밖에 없었습니다. 그러나 그 이유가 무엇인지 잘 모르겠습니다.

그리고 배포된 페이지는 다음과 같습니다. 원하는대로 잘 빌드되지 않은 것 같습니다.

경고와 에러, 발생한 문제를 정리해보면

npm WARN deprecated gatsby-image@2.11.0: This package has been deprecated in favor of gatsby-plugin-image. The migration guide can be found here: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/.
package.json에 이미 deploy에 해당하는 내용이 작성되어있음
Plugin gatsby-remark-images, gatsby-remark-prismjs, gatsby-remark-copy-linked-files, gatsby-remark-smartypants에 대한 [Plugin Name] is not compatible with your gatsby version 2.32.13 - It requires gatsby@^3.0.0-next.0
(node:9996) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at \node_modules\postcss-js\package.json. Update this package.json to use a subpath pattern like "./*". (Use node --trace-deprecation ... to show where the warning was created)
The childImageSharp portion of the query in this file will return null: undefined
Published 메시지 안나옴
branch에 gh-pages 가 없음
(당연하지만) 배포된 페이지가 원하는대로 빌드되지 않음
이네요.

거의 모든 출력을 작성해서 죄송합니다만, 문제를 해결하는데 도움이 될까하여 길게 작성한 점, 이제 막 개발을 시작하는 입장인지라 모르는 것이 많아 스스로 해결하지 못한 것이 있는 점도 양해 부탁드립니다.
혼자서 해보다가 잘 안되겠어서 문의를 드립니다. 도와주시면 감사하겠습니다. 긴 글 읽느라 시간 내주셔서 감사합니다.

다시한번 npm run deploy를 시도해보니
fatal: A branch named 'gh-pages' already exists.이라는 메시지가 나오면서 종료됩니다.
구글링해보니 Github의 기존 repositoroy를 삭제 및 생성을 몇번하면서 프로젝트의 branch cache가 남아있어서 발생한 문제라고 하여 rm -rf node_modules/gh-pages/.cache를 통해 캐시를 삭제한 후 다시 시도했지만 똑같이 'fatal~~'이런 메시지가 뜹니다.

Jinhyeok Jeong · Answer 1 · Mon Aug 30 2021 17:47:17 GMT+0800 (China Standard Time)

@taehyunk124 님 안녕하세요!
이슈 남겨주신 부분은 주신 정보만으로는 문제를 찾기가 쉽지 않네요😂
혹시 오늘 밤이나 수요일, 목요일 저녁 중으로 괜찮은 시간 있으신가요?
화면 공유하고 같이 확인해보면 좋을 것 같습니다!

Taehyun Kim · Answer 2 · Tue Aug 31 2021 16:12:34 GMT+0800 (China Standard Time)

@zoomkoding 님 안녕하세요! 댓글 남겨주신 걸 이제야 봤네요! 바쁘실텐데 시간 내주신다면 저야 정말 감사하죠ㅠㅠ 제가 수요일 저녁엔 일이 있어서요.. 혹시 목요일 저녁 괜찮으실까요?ㅎㅎ

Jinhyeok Jeong · Answer 3 · Tue Aug 31 2021 22:29:04 GMT+0800 (China Standard Time)

네! 목요일 저녁 괜찮습니다!
@taehyunk124님 혹시 8시쯤 괜찮으실까요?

Taehyun Kim · Answer 4 · Wed Sep 01 2021 15:06:17 GMT+0800 (China Standard Time)

@zoomkoding 네! 저도 목요일 저녁 8시 괜찮아요! 연락은 어떻게 드리면 될까요?

Jinhyeok Jeong · Answer 5 · Wed Sep 01 2021 18:09:33 GMT+0800 (China Standard Time)

google meet에서 화면공유하면서 진행하면 좋을 것 같네요!
이메일 주시면 google meet link 보내드리겠습니다!

이메일 주소: zoomkoding@gmail.com

Taehyun Kim · Answer 6 · Sat Sep 04 2021 15:58:48 GMT+0800 (China Standard Time)

@zoomkoding님과 미팅을 통해서 해결한 내용을 남깁니다.

설치부터 문제가 있던 것으로 판단해 [Repository 주소] / node_modules 폴더를 삭제 후 npm install으로 npm을 재설치해주었습니다.
npm install gh-pages --save-dev로 gh-pages 패키지를 설치
npm run deploy 후 info Done building in XX.XX sec라는 Line이 나오면 잠시 기다립니다.
창이 하나 뜨고 Github 인증을 완료하라는 메시지가 뜹니다. 이 때 토큰 인증 로그인을 해도 되고, 저는 Browser에서 로그인을 진행했습니다.
그럼 localhost주소의 웹페이지가 열리면서 Published라는 문구가 뜹니다.
5번에서 Published라는 문구가 떴다면 Repository branch에 gh-pages가 생기게 됩니다.
이후에는 zoomKoding님의 글 내용대로 따라하시면 배포된 페이지를 확인할 수 있을거에요.

더불어 저의 경우 node_modules를 삭제 후 재설치를 했기 때문에 위에서 겪었던 fatal: A branch named 'gh-pages' already exists. 에러는 다시 뜨지 않았습니다. 다만 이 에러만 해결하고 싶으시다면 zoomKoding님 글의 댓글에서 @kdh92417 님께서 공유해주신 것처럼 rm -rf node_modules/.cashe/gh-pages 명령어로 cashe를 삭제하시고 진행하시면 될 것 같습니다.

혹시 다른 분들께서도 Gatsby 테마 설치에 문제가 있으실 때 도움이 되길 바랍니다!
( 귀한 시간 내서 도와주신 @zoomkoding 님께 정말 감사드립니다! 또한 댓글로도 에러 해결 방법을 남겨주신 @kdh92417 님께도 감사드려요😊 )

Jinhyeok Jeong · Answer 7 · Sat Sep 04 2021 18:37:45 GMT+0800 (China Standard Time)

@taehyunk124님 의견 남겨주셔서 감사합니다!!ㅎㅎ
블로그 운영도 화이팅하세용~🤗