Gatsby 테마로 GitHub Blog 만들기 이슈

[devupkim]

안녕하세요. 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를 사용했습니다

블로그의 과정대로

1. Repository 생성하기
2. Repository 가져오기
   까지 완료 후
3. 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.

5. 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 밖에 없었습니다. 그러나 그 이유가 무엇인지 잘 모르겠습니다.

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

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

1. 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/.
2. package.json에 이미 deploy에 해당하는 내용이 작성되어있음
3. 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
4. (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)
5. The childImageSharp portion of the query in this file will return null: undefined
6. Published 메시지 안나옴
7. branch에 gh-pages 가 없음
8. (당연하지만) 배포된 페이지가 원하는대로 빌드되지 않음
   이네요.

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

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

[zoomkoding]

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

[devupkim]

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

[zoomkoding]

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

[devupkim]

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

[zoomkoding]

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

이메일 주소: zoomkoding@gmail.com

[devupkim]

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

1. 설치부터 문제가 있던 것으로 판단해 [Repository 주소] / node_modules 폴더를 삭제 후 npm install으로 npm을 재설치해주었습니다.

2. npm install gh-pages --save-dev로 gh-pages 패키지를 설치

3. npm run deploy 후 info Done building in XX.XX sec라는 Line이 나오면 잠시 기다립니다.

4. 창이 하나 뜨고 Github 인증을 완료하라는 메시지가 뜹니다. 이 때 토큰 인증 로그인을 해도 되고, 저는 Browser에서 로그인을 진행했습니다.
   

5. 그럼 localhost주소의 웹페이지가 열리면서 Published라는 문구가 뜹니다.
   

6. 5번에서 Published라는 문구가 떴다면 Repository branch에 gh-pages가 생기게 됩니다.

7. 이후에는 zoomKoding님의 글 내용대로 따라하시면 배포된 페이지를 확인할 수 있을거에요.

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

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

[zoomkoding]

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