깃허브 블로그 만들기 - Four
테마 적용 후 설정
블로그에 테마를 설정하고 난 뒤 정상적으로 되었는지 확인을 해보자.
Window 사용자는 안된 것이 분명 있을 것이다..
1. 로컬 홈페이지 접속해서 새로고침(F5)한 후 프롬프트 창을 한 번 보자.
위 이미지 처럼 assets/js/dist에 js 파일이 없다고 뜰 것이다.
필자는 이 부분을 못보고 블로그의 다크모드가 적용이 안되어 이유를 한참을 구글링했다.
여기서 두 번째의 위기가 찾아왔다. 정말 정말 깃허브 블로그 안해 !! 할 뻔 했다.
하지만, 나 ! Vincent는 불굴의 사나이… 중꺾마의 마인드를 다시 한 번 새기고 차근차근 확인했다.
결국 언제나 그랬듯 답을 찾아냈다. 바로 위의 설명처럼 js파일이 없었던 것이다.
왜 js파일이 없었는가 찾아봤는데 Window에서는 bash tools/init을 안해서 그렇다고 한다.
init은 맥이나 리눅스에서 가능하다고 한다. 이에 관한 것은 잠시후 다시 적겠다.
2. js파일을 다운로드 받아보자.
js파일을 다운 받으려면 NODE_ENV=production npx rollup -c –bundleConfigAsCjs 코드를 실행해야 한다.
어떻게 실행하느냐… 필자는 여기서 또 엄청 헤맸다 ㅠ^ㅠ
위 이미지처럼 cmd에서 바로 명령어를 입력하면 실행을 할 수 없다.
왜 그런지 찾아봤더니 환경 변수 설정 차이, 명령어 해석 차이, 패스 설정 등이 있었다.
cmd말고 Git bash 에서 NODE_ENV=production npx rollup -c –bundleConfigAsCjs코드를 실행하니 되었다.
여기서 cmd에서는 왜 안될까 찾아봤는데 환경 변수 설정 차이가 문제인 것 같았다.
cmd는 set NODE_ENV=production을 사용하고, Bash에서는 export NODE_ENV=production을 사용한다.
여기서 필자는 cmd는 왜 set을 하고 git bash는 바로 실행이 가능한가 궁금해서 찾아봤다.
결론은 Git Bash는 Bash 스크립트 문법을 따르기 때문에 Bash에서 사용되는 인라인 환경 변수 설정이 가능하며,
이로 인해 해당 명령어를 바로 실행할 수 있는 것이다.
cmd에서 set을 이용하면 되는지 확인을 해보았다.
위 이미지의 노란색 부분이 바로 명령어를 실행한 부분이고,
보라색 부분이 set으로 환경 변수를 설정하고 실행한 부분이다.
보라색 부분이 에러가 났지만 딱 보아도 차이가 있지 않은가 ?
여기서 cmd와 bash의 차이를 알게 되었고, 까먹지 않도록 해야겠다.
이제는 진짜 테마 적용이 끝난거지 ?
라고 생각하면 필자와 아주 서먹서먹한 사이가 될 것이다.
왜냐하면, 우리는 바로 Windows를 사용하고 있지 않은가 ?
그렇다… Mac에서는 bash tools/init을 하면 자동으로 다 된다고 하던데..사실 잘 모름;;
Windows.. 사람을 강하게 키우는구나..
우리 Windows 용사들이여, 우리는 init을 하지 않았기 때문에 직접 파일 수정을 해야 한다 !
3. 아래 파일들을 삭제해보자.
.travis.yml 필자는 없었다.
_posts 폴더 하위의 파일들 chirpy에서 샘플로 제공해주는 post다. 필요없으면 삭제한다.
docs 폴더 삭제한다.
.github 폴더에서 workflows 폴더를 제외하고 다 삭제한다.
.github/workflows/에서 commitlint.yml, page-deploy.yml.hook를 제외하고 다 삭제한다.
page-deploy.yml.hook에서 .hook을 지운다.
4. 빌드 및 배포 파일을 설정해보자.
page-deploy.yml 파일을 실행해 들어가면
상단 부분에 위 이미지의 빨간 박스처럼 브랜치가 main, master 2개가 적혀있다.
여기서 본인의 브렌치와 맞지 않는 것을 주석처리 한다.
필자는 main이라 master를 주석처리 했다.
여기서 빌드 및 배포 파일은 CI / CD를 할 때 필요하다. 다음 포스팅에서 적겠다.
5. 종속성 설치를 하자.
프롬프트에서 루트 디렉토리로 이동해 bundle을 입력하자.
bundle을 하는 이유는 종속성 설치를 해야하기 때문이다.
이제는 진짜 진짜 끝난거지..?
후후… 아닐 것이다…
파일 초기화 및 설정은 거의 다 했다. 하지만 아직 많이 남았다…
깃허브 블로그 진짜 힘들구나 싶었다. 사람들이 다른 블로그 플랫폼을 쓰는 것이 이해가 되었다.
이제 깃 액션을 이용해 빌드와 배포를 하면 거의 마지막이 될 것 같다. 찐막 !!!
이 부분은 다음 미션으로 넘기겠다.
NEXT STEP.
다음 미션은 빌드와 배포를 하는 깃허브 액션을 설정해보자.