🤔 질문하기

[utterances-bot]

템플릿 관련해서 궁금한 점이 있으시다면, 👇 아래에 남겨주세요! 빠르게 답변드리도록 하겠습니다~!😋

[jihyunhillpark]

우와.. 줌코딩님 블로그가 아름답다고 생각했는데 이렇게 공유해주셔서 감사합니다~

[zoomkoding]

아이고~ @jihyunhillpark님 항상 응원해주셔서 감사합니당~🙏👍

[Ssongs2]

안녕하세요. 5. Blog 배포하기에서 npm run deploy 하면, Error: gatsby-node.js:40 nextSlug: next?.fields.slug ?? '', ^ SyntaxError: Unexpected token '.' 가 떠요. gatsby build가 안되는 것 같은데 뭐가 문제인지 모르겠어요

[zoomkoding]

@Ssongs2님 안녕하세요! 해당 이슈는 노드 버전 문제로 보이는데요! 관련 이슈 참고해서 노드버전 업그레이드 하시면 같습니다!🙏

[zoomkoding]

노드 버전 업그레이드 방법은 이 글을 참고하시면 좋을 것 같습니다! 방법이 길지 않아 바로 소개해드리면

Ubuntu Linux/Mac: 다음 명령어 실행하기

sudo npm install n -g
sudo n stable

Window: 홈페이지에서 재설치

[JUNG-BIN-KIM]

안녕하세요~ Gatsby 블로그 만들려던 차에 좋은 글 남겨주셔서 감사합니다~

5. Blog 배포하기 섹션의 npm run deploy 을 run 시키면

npm ERR! code EJSONPARSE npm ERR! file C:\Users\Username\Desktop\정빈\JUNG-BIN-KIM.github.io\package.json npm ERR! JSON.parse Failed to parse json npm ERR! JSON.parse Unexpected string in JSON at position 2100 while parsing '{ npm ERR! JSON.parse "name": "zoomkoding.com", npm ERR! JSON.parse "priva' npm ERR! JSON.parse Failed to parse package.json data. npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Username\AppData\Roaming\npm-cache_logs\2021-08-08T16_03_11_820Z-debug.log

라는 에러 메세지가 뜨는데요, 혹시 어떤 부분이 잘못된건지 대략적으로라도 알 수 있을까요?

[zoomkoding]

@JUNG-BIN-KIM 님 안녕하세요! 해당 이슈는 package.json 파일의 내용을 봐야 알 수 있을 것 같습니다! package.json 내용을 포함해서 이슈 남겨주시면 확인해보겠습니다!

[devToram]

안녕하세요! 블로그가 좋아서 따라해보는 중인데 혹시 4번 항목이 package.json이 아닌 packages.json이 맞나요??

[zoomkoding]

@JooEHyeon님 안녕하세요~! 블로그 관심 가져주셔서 감사합니다😀 네 오타가 있었네요, package.json이 맞습니다..! 다른 분들도 오해하실 수 있었을텐데 알려주셔서 감사합니다!🙏

[free-ko]

먼저 이렇게 좋은 블로그 만들 수 있는 방법을 알려주셔서 감사합니다!! 알려주신 대로 따라했는데 https://free-ko.github.io/ 로 들어가보니 README 내용이 나오는게 뜨던데 이게 맞을까요?

[zoomkoding]

@free-ko님 안녕하세요! 제 블로그 테마를 써주셔서 감사합니다🤩 제가 접속해보니 테마가 적용된 페이지가 나오는데요! 다시 한번 확인해보시겠어요?ㅎㅎ 아마 deploy하고 웹페이지에 반영되기 까지 시간이 좀 걸렸던 것 같습니다!

[free-ko]

잘 나오네요!! ㅎㅎ 감사합니다!!!

[devupkim]

zoomKoding님 안녕하세요! Gatsby 테마로 Github Blog를 만들어보려다가 잘 안되어서😢 이슈에 현재 상황을 남겨두었습니다. 시간 되실 때 어떻게 해결할 수 있는지 도와주실 수 있을까요? 부탁드려용!

zoomKoding님께서 도와주셔서 해결했습니다. 해결한 방법은 여기에 있습니다🤗

[zoomkoding]

@taehyunk124님 안녕하세요~! 주말동안 일이 있어서 이슈를 이제 확인했습니다! 😭 말씀해주신 문제는 저도 처음 보는 이슈라 오늘 밤에 확인해보고 연락드리겠습니다~!🙏

[free-ko]

진혁님~ 궁금한게 있어서 또 질문합니다~😉 먼저 제공해주신 테마 잘 쓰고 있습니다~ 다름이 아니라 기존 테마의 썸네일 GIF 미모티콘을 변경하고 싶어서 작업하는데 잘 되지 않더라구요 ㅎㅎ;; 이폰으로 미모티콘 만들어서 노트북으로 전달해 다운로드 하면 mov 파일을 gif로 변경해서 적용해봤더니 모션이 엄청 느려 지는데, 혹시 미모티콘 GIF를 어떻게 만들었는지 궁금해서 질문 올려드려요 ㅎㅎ

[zoomkoding]

@free-ko님 안녕하세요! 미모티콘 GIF로 변환하는 방법을 올려야지 했는데 마침 물어봐주셔서 글로 작성해봤습니다! 움직이는 미모티콘 GIF 생성하기 글을 참고하시면 될 것 같습니다!👍

[free-ko]

감사합니다!! ㅎㅎ

[kdh92417]

안녕하세요 블로그를 참조하여 2가지 안되는 부분이있어서 해결한 부분이있는데요 도움이 될까봐 올려봅니다.

• git-pages 브랜치가 이미 있다고 에러가뜸 -> rm -rf node_modules/.cashe/gh-pages 삭제 (node_modules/gh-pages/.cashe 의 경로가아님)
• password 입력하라고해서 비밀번호 입력했는데 인증이안됨 -> 토큰입력방식으로 바뀌어서 본인 디벨롭세팅에가서 토큰 생성후 토큰 입력해야됨

[zoomkoding]

@kdh92417님 안녕하세요! @taehyunk124님도 말씀해주신 부분과 같은 이슈였고 같은 방법으로 해결하셨다고 하네요!👏 좋은 의견 남겨주셔서 감사합니다!👍

[kdh92417]

안녕하세요 진혁님 제가 구글노출을 시도해보고있는데, Google Analytics Tracking ID를 발급하고 URL까지는 등록했는데 주어진 advanced sitemap으로 구글서치콘솔에서 사이트맵을 가져오고싶은데, 계속 가져 올수 없다고해서요 ㅜㅜ 무슨오류인지도 모르겠고.. 혹시 진혁님은 구글서치콘솔에서 사이트맵을 어떻게 등록하셨나요?

[zoomkoding]

@kdh92417 님 안녕하세요! 저는 서치 콘솔에 아래와 같이 /sitemap.xml과 sitemap-pages.xml 이렇게 두개를 등록해두었습니다!

[zoomkoding]

혹시 지속적으로 문제가 있으시다면, 구체적인 내용을 포함해서 이슈 남겨주시면 확인해보겠습니다!🙏

[devupkim]

안녕하세요 @zoomKoding 님! 제가 Branch에 대해서 완벽한 이해를 하지 못해서인지도 모르겠지만..궁금한게 있습니다!
8.수정하고 배포하기 에서 Branch가 총 세 개(master, gh-pages, docs) 있는데요. 변경 사항들에 대한 모든 commit은 세 Branch 중 gh-pages로 하고 나머지는 건드릴 필요가 없는 것인가요?

[zoomkoding]

@taehyunk124님 안녕하세요! 말씀하신대로 다른 브랜치와 상관없이 gh-pages로 deploy하게 되면 블로그가 변경되는 걸 확인하실 수 있습니다! 그리고 master, docs에 커밋을 푸쉬하더라도 gh-pages로 deploy하지 않으시면 변동사항이 배포된 웹에 반영되지 않는다는 점 참고해주세요 👍

[devupkim]

오 그렇군요! 알려주셔서 감사합니다🙃

[zellyshu]

테마가 너무 이쁩니다ㅎㅎ 감사히 잘 사용하겠습니다!

[zoomkoding]

@zellyshu 님 안녕하세요~! 테마 잘써주셔서 감사합니다ㅎㅎ 쓰시다가 필요한 기능이나 궁금하신 점이 있으시다면 언제든지 이슈 남겨주세요~🙏

[ywbird]

@zoomkoding 님 안녕하세요! 블로그를 깃헙에 올릴때 이런 오류가 나는데 이유를 모르겠습니다...

info Done building in 69.3730617 sec

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! YwBook@1.1.0 deploy: `gatsby build && gh-pages -d public`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the YwBook@1.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\<username>\AppData\Roaming\npm-cache\_logs\2021-10-26T08_46_01_685Z-debug.log

깃헙에 push를 못하는 것 같은데... 원인을 아시나요..?

[zoomkoding]

@ywbird님 안녕하세요! 관련 에러 검색해보니 다른 분이 올려주신 이슈가 나오네요! 공감이 많은 의견을 보면 command 창에 git remote -v 명령어를 입력했을 때, origin이라고 명시된 것이 없다면 아래 명령어로 origin에 해당하는 레포를 추가해줘야 한다고 하네요.

git remote add origin <repository url>

그리고 다시 배포 진행해보시면 좋을 것 같습니다! 참고로 제 환경에서 git remote -v 명령어를 실행했을때 결과는 아래처럼 나옵니다.

origin  https://github.com/zoomKoding/zoomkoding.com.git (fetch)
origin  https://github.com/zoomKoding/zoomkoding.com.git (push)

[bhunji159]

줌코딩님 덕분에 블로그 잘 만들었어요!!! 감사합니다~!!!

[Kepler-442b]

깔끔하신 설명과 댓글의 트러블슈팅 도움을 받아 배포 했습니다 :) 감사합니다!

[mywnajsldkf]

줌코딩님 덕분에 블로그 잘 만들었어요 :) 혹시 마크다운 이미지 캡션 적용이 안되는 것 같은데 확인 부탁드려도 될까요?

[zoomkoding]

@bhunji159님, @Kepler-442b님 감사합니다!!ㅎㅎ 혹시 궁금하시거나 원하시는 기능 있으면 말씀해주세요!ㅎㅎ

[zoomkoding]

@mywnajsldkf님 안녕하세요! 말씀하신 이미지 캡션은 기존에 지원하지 않았으나 추가하는데 어려움이 크지 않아 바로 기능 추가했습니다! 캡션을 다는 방법은 이미지 밑에 캡션으로 보여주고 싶은 텍스트를 *로 감싸서 추가하시면 됩니다!

![이미지](이미지 주소)
*캡션*

[nobel6018]

안녕하세요 좋은 테마 공유해주셔서 감사합니다!!

설치 중에 다음과 같은 에러가 발생해서 질문드립니다

failed Building static HTML for pages - 0.339s

 ERROR #95312

"localStorage" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

  4 |
  5 | function ThemeSwitch() {
> 6 |   const storedIsDarkMode = localStorage.getItem('isDarkMode');
    |                            ^
  7 |   const [isDarkMode, setIsDarkMode] = useState(JSON.parse(storedIsDarkMode));
  8 |
  9 |   useEffect(() => {

  WebpackError: ReferenceError: localStorage is not defined (from plugin: gatsby-plugin-material-ui)

  - index.js:6
    zoomkoding.com/src/components/theme-switch/index.js:6:28

  - gatsby-ssr.js:33
    [zoomkoding.com]/[gatsby-plugin-material-ui]/gatsby-ssr.js:33:47

  - api-runner-ssr.js:116
    zoomkoding.com/.cache/api-runner-ssr.js:116:28

  - static-entry.js:267
    zoomkoding.com/.cache/static-entry.js:267:11

[zoomkoding]

@nobel6018님 안녕하세요! 확인해보니 최근 버전 업그레이드를 진행하면서 버그가 있었네요!😭 버그 해소해서 다시 풀 받으셔서 진행하면 문제없이 되실 겁니다!🙏

[nobel6018]

빠른 버그 픽스 감사합니다~~ 정상적으로 deploy 됩니다 즐거운 주말 되세요!! :)

[danny3314]

안녕하세요 줌코딩님!! 도와주세요 shield.io 배지 서너개를 2칸 정도 공백 간격을 두고 가로로 넣고 싶은데 start나 deploy해보면 배지가 줄바꿈 되어있어요.

   이렇게 사이에   넣어봐도 npm deploy에서는 줄바꿈이 되어서 출력돼요

[zoomkoding]

@danny3314님 안녕하세요! 이미지를 병렬로 처리하시려면 아래 같이 div로 감싸신 후에 뱃지를 추가하시면 될 것 같습니다!

<div style="display: inline-flex; gap: 5px;">
    <img src="https://img.shields.io/badge/version-1.0-white?style=plastic"/>
    <img src="https://img.shields.io/badge/version-1.0-white?style=plastic"/>
</div>

[danny3314]

@zoomkoding님 진짜 정말정말 감사합니다ㅜㅜ 오늘부터 제 롤모델은 줌코딩님이세요!!

[Yeji9]

안녕하세요! 5.Blog 배포하기 과정에서 오류가 나서 질문드립니다!

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.486s 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 - 12.121s success onPreInit - 0.346s success delete html and css files from previous builds - 0.018s success initialize cache - 0.038s success copy gatsby files - 0.812s success onPreBootstrap - 4.493s success createSchemaCustomization - 5.964s success Checking for changed pages - 0.002s success source and transform nodes - 0.773s success building schema - 1.554s info Total nodes: 97, SitePage nodes: 6 (use --verbose for breakdown) success createPages - 9.684s success Checking for changed pages - 0.040s success createPagesStatefully - 0.635s success update schema - 0.171s success onPreExtractQueries - 0.047s

ERROR

(node:10424) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\GitBlog\Yeji9.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 - 2.367s success write out redirect data - 0.009s success Build manifest and related icons - 0.307s success onPostBootstrap - 0.431s info bootstrap finished - 63.451s success run static queries - 0.805s - 3/3 3.73/s success run page queries - 1.919s - 9/9 4.69/s success write out requires - 0.107s success Building production JavaScript and CSS bundles - 74.000s success Rewriting compilation hashes - 0.013s success Building HTML renderer - 25.329s success Building static HTML for pages - 1.682s - 9/9 5.35/s success Generating image thumbnails - 118.209s - 63/63 0.53/s info Generated public/sw.js, which will precache 14 files, totaling 535030 bytes. The following pages will be precached: /offline-plugin-app-shell-fallback/index.html success onPostBuild - 0.358s info Done building in 168.7989669 sec

bash: /dev/tty: No such device or address error: failed to execute prompt script (exit code 1) fatal: could not read Username for 'https://github.com': No such file or directory

이유를 알 수 있을까요? 좋은 테마 공유 감사합니다!🙇🏻‍♀️

[danny3314]

다른 깃헙 블로그 구독하는 것은 어떻게 할 수 있나요?

[zoomkoding]

@Yeji9님 안녕하세요! 해당 이슈는 블로그 관련 이슈가 아니라 깃헙 관련 이슈인 것 같습니다! 관련 내용은 이 글을 참고해보시면 좋을 것 같습니다.👍

[zoomkoding]

@danny3314님 안녕하세요! 현재 테마에서는 다른 깃헙 블로그를 구독하는 기능을 따로 제공하고 있지는 않습니다!🙏

[Yeji9]

@zoomkoding 정말 감사합니다!! 잘 해결했어요🙇🏻‍♀️🙌🏻 만든 홈페이지에서 블로그 이외의 포스트 목록을 만드려면 최신 버전으로 업데이트해야 하는지도 궁금합니다!

[danny3314]

@Yeji9 index.md 상단에 categories를 작성하면 자동으로 추가됩니다.

예를들면 index.md 열어서

emoji: title: date: author: tags: categories: 블로그 featured 프론트엔드 백엔드

이렇게 하면 공백 기준으로 4개가 자동으로 생깁니다^^

[danny3314]

@zoomkoding 님! 근데 tags는 적어봐도 화면에 출력되는게 없는 것 같은데, 그렇다면 tags는 필요가 없는것일까요..?

[yoonminsohappy]

@zoomkoding 안녕하세요! npm 스크립트 실행 과정 중 발생한 에러와 관련하여 질문드립니다.

구글링해보니 gatsby 버전을 업그레이드 / gatsby-image 대신 gatsby-plugin-image를 다운로드를 시도해보았으나, 해결되지 않고 있습니다.

Missing onError handler for invocation 'building-schema', error was 'Enum "ImageFormat" cannot represent value: "auto"'.
Stacktrace was 'GraphQLError: Enum "ImageFormat" cannot represent value: "auto"

[yoonminsohappy]

@zoomkoding 안녕하세요! npm 스크립트 실행 과정 중 발생한 에러와 관련하여 질문드립니다.

구글링해보니 gatsby 버전을 업그레이드 / gatsby-image 대신 gatsby-plugin-image를 다운로드를 시도해보았으나, 해결되지 않고 있습니다.

Missing onError handler for invocation 'building-schema', error was 'Enum "ImageFormat" cannot represent value: "auto"'.
Stacktrace was 'GraphQLError: Enum "ImageFormat" cannot represent value: "auto"

이 부분 참고하여 해결하였습니다! gatsby 구버전에 존재하던 이슈여서, gatsby 버전을 업데이트 했더니 해결되었습니다!

[yoonminsohappy]

@zoomkoding 안녕하세요! deploy 스크립트를 실행하는 중에 계속해서 이슈가 발생해서 도움을 청하고자 질문 드립니다. GraphQL 에서 발생하는 이슈이며, gatsby-node.js 파일에 문제가 있다고 나옵니다. 혹시 공유해주실 사항이 있다면 부탁드립니다! 감사합니다!

TypeError: Cannot read property 'children' of null