Gatsby 블로그 개발 후기 (feat. 에러 파티)
etc | November 27, 2021
블로그 유목민의 정착기
📑 극히 개인적인 플랫폼 비교 (구구절절 TMI)
나는 개발을 처음 시작했을 때부터 블로그에 글을 쭉 써 왔는데, 대부분 학교 강의나 유료 강의를 듣고 정리한 내용을 기록했기 때문에 호옥시나 저작권 상의 문제가 생길까 봐 항상 비공개로 글을 작성했다. (지금 작성글 100개 넘음...) 그런데 계속 비공개 글만 작성하기도 싫었고, 새롭게 배운 내용들을 정리할 필요성을 느껴서 나에게 맞는 블로그 플랫폼을 찾아다녔다.
개발을 처음 시작했을 때에는 그나마 제일 익숙하게 느껴졌던 네이버 블로그로 시작했다. 코드 스니펫도 추가할 수 있고 전체적으로 나쁘진 않았는데, 아무래도 네이버 계정은 사적인 용도로 사용하는 경우가 많아서 개발 용도와 분리하고 싶었다.
그 다음으로는 티스토리를 사용했다. 티스토리도 나쁘진 않았지만 글을 작성할 때와 저장하고 나서의 줄 간격이라든지 폰트 색상이 다르게 보여서 그게 좀 짜증났다,,, 😖 그리고 무엇보다 커스텀 하기가 복잡해서 패스했다. 그래도 에디터는 굉장히 잘되어 있어서 글 쓰기에는 편리했다.
벨로그도 고려를 했는데, 나는 커스텀 블로그를 만들고 싶은 아주 강한 욕구가 있었기 때문에 그냥 계정만 만들어 뒀다. 그런데 벨로그는 개발자 커뮤니티로서의 역할도 하는 것 같아서 아마 이 블로그와 병행하지 않을까 싶다. 🤔
아 그리고 노션은 협업툴 + 메모장처럼 쓰고 있는데 블로그 용도로는 글쎄,,, 잘 모르겠다.
그냥 나는 무엇보다도 깃허브 블로그를 만들고 싶었다. 그냥 github.io 라는 도메인이 너무 간지나 보였음 ㅎㅎ 처음에는 많이들 사용하는 Jekyll 테마를 사용했는데, 계에에속 겉잡을 수 없는 에러가 났다. 그런데 나는 Ruby를 배워 본 적이 없으니 어떻게 해결해야 할지 감도 안 잡혀서 깔끔하게 접었당. 😁
그러다 우연히 React.js 기반의 Gatsby 테마가 있다는 얘기를 들었다. 현재 프론트엔드쪽 공부를 하고 있기 때문에 React는 어느 정도 익숙한 상태였어서 그냥 바로 ‘Gatsby 블로그 만들기’를 검색하고 개발을 시작했다. 😤
Gatsby 테마
검색하면 많이 나오는 gatsby-starter-bee 테마로 만들었다.
zoomcoding-gatsby-blog 요것도 나중에 사용해 보고 싶다!
개발 과정
1. Repository 만들기
깃허브에서 Repository를 먼저 만들었다.
Import a repository를 해 준다.
원하는 테마의 clone URL을 입력하고, Repository의 이름은 ${github ID}.github.io로 지어 준다. Public / Private 는 상관없는 것 같다. 나는 다른 사람들에게 보여지는 게 싫어서 Private으로 설정했다. 그 다음 Begin import를 누르면
이렇게 열심히 import를 한다! 테마에 따라서 시간이 좀 걸릴 수도 있다. 완료되면 메일로도 알림이 온당
2. 초기 세팅
git clone ${clone URL}
cd ${clone URL}
npm install먼저 로컬에 clone 후 npm install을 실행한다.
3. npm install 끝없는 오류의 시작…
처음에는 잘됐다가 어느 순간부터 갑자기 오류가 생겨서 지난 3주 동안 굉장히 애먹었다. 🤦🏻♀️🤦🏻♂️ 원래 블로그 개발 회고글은 쓸 생각은 없었는데, 수많은 오류를 겪으면서 해결 과정을 작성하기로 마음 먹었다. 고생하고 있을 다른 누군가를 위해 🥺
그런데 뭐 때문에 해결된 건지는 나도 잘 모른다!!
1) Could not resolve dependency
npm install --force
npm install legacy-peer-deps오류와 함께 나오는 메세지로는 npm install --force나 npm install legacy-peer-deps를 실행하란다. 둘 다 실행했더니 이 문제는 해결된 듯했지만 또 다른 에러가 발생했다. (node_modules 폴더가 만들어지지 않았다.)
2) SyntaxError: invalid syntax (Python 관련?)
보기만 해도 어마무시하다. 😬 그런데 중간에 갑자기 python 어쩌구가 나와서 좀 띠용했다. 갑자기 왠 파이썬? 그래서 바로 구글링 해 봤다.
npm install --global windows-build-tools이걸 실행했는데도 에러를 뱉는다.
그래서 혹시나 하는 마음에 파이썬을 삭제하고 다시 설치한 후 npm install을 실행하니 놀랍게도 node_modules 폴더가 생겼다. 도대체 왜?????
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set
npm ERR! gyp ERR! stack at PythonFinder.failNoPython (C:\Users\---\Pib\configure.js:484:19)
npm ERR! gyp ERR! stack at PythonFinder.<anonymous> (C:\Users\---\Prb\configure.js:509:16)
npm ERR! gyp ERR! stack at callback (C:\Users\---\corinthion5:20)
npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19042
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\glitt\es\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd C:\Users\---\corinthionia.github.io\node_m
npm ERR! gyp ERR! node -v v16.13.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok폴더는 생겼는데 여전히 위와 같은 에러가 또또 생겼다. 그래서 또또 구글링 했더니
npm install —global —production windows-build-tools이걸 실행하라는데 나는 또또또 아래와 같은 오류가 생겼다. 욕하고 싶었다
npm ERR! code 1
npm ERR! path C:\Users\---\AppData\Roaming\npm\node_modules\windows-build-tools
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node ./dist/index.js
Downloading python-2.7.15.amd64.msi
npm ERR! [> ] 0.0% (0 B/s)
npm ERR! Downloaded python-2.7.15.amd64.msi. Saved to C:\Users\---\.windows-build-tools\python-2.7.15.amd64.msi.
Downloading vs_BuildTools.exe
npm ERR! [> ] 0.0% (0 B/s)
npm ERR! Downloaded vs_BuildTools.exe. Saved to C:\Users\---\.windows-build-tools\vs_BuildTools.exe.
npm ERR!
npm ERR! Starting installation...
npm ERR! Please restart this script from an administrative PowerShell!
npm ERR! The build tools cannot be installed without administrative rights.
npm ERR! To fix, right-click on PowerShell and run "as Administrator".그래서 cmd를 관리자 권한으로 실행한 다음
npm install —global windows-build-tools를 실행했다. 그런데 한~~~참을 기다려도 진행이 안 된다. 또또또또 구글링 했다.
이 글을 참고해서 겨우 완료했고 시간은 좀 걸렸다…
근데 또또또또또 오류가 ㅠㅠ;;;;;;;;;;;;;;;;;;;; 하
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.0 | win32 | x64
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "<string>", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?대충 이런 에러였는데 또 파이썬 어쩌구 하길래 ^^ 때려치우고 싶었다. 그래도 네가 이기나 내가 이기나 보자 하는 심정으로 또또또또또또 구글링 했다. 그래서 이 글을 보고 파이썬 2.7.18 버전을 설치해 봤다.
뭐지 이제 된 듯???
npm WARN deprecated gatsby-plugin-google-adsense@1.1.3: this package has been deprecated
added 723 packages, changed 1309 packages, and audited 2228 packages in 3m
117 packages are looking for funding
run `npm fund` for details
124 vulnerabilities (6 low, 68 moderate, 48 high, 2 critical)
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.드디어 npm install이 정상적으로 실행됐다 😭
여전히 vulnerabilities는 많이 뜨지만 npm audit fix는 사용하지 않는 게 좋다고 해서 그냥 놔 뒀다. (참고)
3. gh-pages 설치
npm install gh-pages --save-dev위 명령어를 실행하고
{
"scripts": {
"deploy": "gatsby build && gh-pages -d public"
}
}pakage.json 파일에 위 내용을 추가한다. (참고)
4. 배포하기
npm run deploy위 명령어를 실행하고 Published라는 메세지가 뜨면 성공! 🎉🎉 (참고)
5. Cannot find module 또 에러 ㅠㅠ
Error: Cannot find module 'C:\Users\---\node_modules\to-object-path\node_modules\kind-of\in
the package.json has a valid "main" entrydeploy 후 이런 오류가 뜨길래 해당 경로로 가 보니 index.js 파일이 없었다.
그런데 위에서 보다시피 엄청난 에러들을 겪고 매우매우 지친 상태였기 때문에 귀찮아서 그냥 바로 아래에 있는 index.js를 복사해서 해당 경로에 복붙 했다. 🤷🏻♀️
근데 진짜진짜 신기하게,,, 이렇게 하니까 됐다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
진짜 이게 왜 되지??? 라는 말만 100번 한 듯 그리고 감격의 눈물도 100 방울 정도 흘렸다,,, 😇
6. Github Repogitory에서 배포 Branch 설정
Github Repository의 Settings > Pages 에서 Source branch를 gh-pages로 변경한다. (참고)
7. 배포하기
Github Repository에 commit 후 아래 명령어를 실행하면 배포 완료~!
npm run deploy8. npm start 에러 ㅠㅠ
npm start를 실행하면 페이지가 무한 새로고침되는 현상이 발생했다.
사실 이거 때문에 멀쩡했던 블로그를 갈아엎었고, 다시 만드는 과정에서 갑자기 npm install 에러가 생겨서 복구를 못 하고 있었다. reload, refresh 등 어떤 키워드로 구글링 해 봐도 나 같은 상황에 처한 사람이 없길래 내가 뭘 잘못 건드린 건가 하고 거의 반 포기하고 있던 상태였다.
그러다가 gatsby repository를 찾게 되었고 거기에 등록된 issue들을 훑어 보았다.
그런데
infinite reload spinning
ㅠㅠ 드디어 나랑 같은 문제가 생긴 사람들을 찾았다.
해당 issue에서는 port 번호를 바꾸면 된다고 한다. 그렇게 간단하게 해결된다고? 🤔 라는 생각으로 반신반의하며 package.json 파일에서 포트 번호를 변경해 주었다.
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop -p 3500",임의로 3500으로 설정해 봤다.
그런데 진짜 놀랍게도 이번에도 성공했다 ㅠ
후기
이렇게 간단하게 해결될 문제였는데 난 3주 동안 뭘 한 거지??? 😇🙃 기쁘면서도 좀 현타가 왔다. 이게 개발자의 삶인가? 그렇게 생각하니 진정한 개발자의 길에 한 발 내딛은 것 같아서 기쁜 것 같기도? 하하하
암튼 그 다음엔 gatsby-meta-config.js 파일도 수정하고 뭐 이것저것 커스텀 했다. 별거 없어서 새로 포스팅하기도 뭐 하고 일단 이 글 쓰는 데 지금 거의 4시간이 걸려서 벌써 블로그 그만두고 싶다 ㅎ
![[Joohyun Kim]](/static/03977b3b98003fd0a4a4f23f6d757699/a12fc/profile.png)