github 블로그 테마 (험난한) 적용기

이전 첫 글을 정말 각오하면서 다음 글부터는 반드시 공부한 것이나 프로젝트한 과정을 올릴 것이라고 다짐하였는데 기존 ‘jekyll’ 테마는 그냥 쓰기에는 읽기에도 불편하고 글을 작성하는데에도 불편하였기에 사람들이 많이 쓰는 ‘chirpy’테마로 교체 한 다음에 작성할려고 하였으나 이 마저도 적용하는데에 오류가 넘쳐났기에 몇 시간이나 허비하고 말았다. 본격적으로 자바나 스프링부트에 대해서 공부한 것보다 몇 시간 동안 오류가 왜 일어났는지에 대해서 검색하고 깃허브 명령어나 여러 기능에 대해서 더욱 공부한 것이 새삼 느껴진다.

이제는 ‘chirpy’테마도 우여곡절 만에 적용도 했으니 이 또한 훗날 이 과정을 또 밣을 것을 우려하여 오늘을 마지막으로 어떻게 테마를 적용했고 이 과정에서 어떻게 오류를 처리했는지, 다음에는 제대로 된 글글이 나오기를 바라면서 복기하도록 하겠다.

chirpy 테마 적용

chirpy 설치 방법은 여러가지가 있다.

1.chirpy starter를 통해 직접 설치하는 방법

2.github에서 소스를 fork 받아서 만들기

3.소스를 zip으로 받아서 설치

본인은 3번째 방법을 사용하여 설치하였다.

chirpy 테마 설치

chirpy에 들어가서 zip를 내려 받는다.

Repository 사용

• 기존의 Repository저장소가 있다면 임의로 사용해도 상관 없으나, 어제도 만들었다시피 github의 기본 도메인을 사용할 때는 .github.io 형식으로 만들어야 한다. 이름을 잘못 정했다면 Repository의 Settings에서 언제든 바꿀 수 있다.
• 나의 실수 : 원래 같았으면 Repository 생성하고 어제와 같이 했으면 .github.io를 주소창에 입력하면 들어갔어야 했는데 계속 "404에러"가 일어난 것이다. 그래서 이것 또한 열심히 검색한 결과 몇몇 사람들은 https://[깃허브 아이디].github.io/[저장소 이름] 이런 식으로 접속을 한다는 것이다. 그럼에도 나는 이 방법으로 접속되지 않았는데 https://[깃허브 아이디].github.io/[저장소 이름].github.io로 하였더니 접속이 된 것이었다. 성공했을 때는 이중으로 저장소를 생성했나 싶었는데 이건 시간이 남아있을 때 더 알아보고 이 해결 문단을 수정해야겠다.

로컬에서 chirpy 사용

1. cmd를 실행시켜 내가 정한 경로에 만들어둔 저장소 깃허브를 clone 해준다

   git clone {생성해둔 저장소 깃허브 주소} 

2. 다운 받은 ‘chirpy’테마 폴더를 압축을 푼 후 모든 파일을 clone한 로컬 폴더에 덮어씌운다. 허나 이대로 다시 ‘github’로 push 하면 build 과정 중 에러가 일어난다. 그러므로 Chirpy 테마를 초기화 시켜준다.

   리눅스에서는 간단한 bash를 써서 init을 하면 된다고 하나, 나는 윈도우를 쓰고 있기에 수동으로 해야한다.

3. 로컬 폴더에서 삭제해야할 목록
   • Gemfile.lock 파일.
   • docs폴더 및 디렉토리. (내가 다운 받은 Chirpy 테마에는 docs가 없었다.)
   • .travis.tml 파일.
   • _posts.docs (자신이 쓴 .md파일이 있다면 그거는 남겨도 상관없을 것이다)
   • .github 폴더에서 workflows 폴더를 남겨두고 파일 전부를 지우기.
   • .github/workflows/에 commitlint.yml과 page-deploy.yml.hook 외에 다 지우기
   • page-deploy.yml.hook파일의 .hook를 지우기.
4. cmd에서 내가 작업할 폴더로 이동 후 bundler.

   >cd {user git repo 폴더 위치} 
   >bundle install

5. config.yml파일에 url:에 나의 github url를 넣어준다.

   url : 'http://username.github.io'

6. 다음으로 로컬로 jekyll 서버를 구동해서 블로그 홈페이지 확인

   bundle exec jekyll serve 

7. 확인을 했으면 github로 add,commit,push를 하자

   >git add . 
   >git commit -m "입력하고 싶은 메세지"
   >git push -u origin main

push를 하고 github.io들어가면 적용이 되었어야 했으나….

--- layout: home # Index page ---

로컬에서 확인했던 깔끔한 블로그가 아니라 위의 코드 한줄 띡 하나만 나를 반겨주었다. 그래서 또 검색을 하여 찾아본 결과, github 설정에서 pages 탭에 source를 ‘GitHub Actions’로 바꿔야한다.

그러면 깃허브에서 ‘jekyll.yml’를 설정할 거냐고 물어보는데 당연히 커밋하고 push를 했으나 이또한 빌드가 실패하게 된다.

그래서 깃허브 빌드 로그를 살펴본 결과 ‘_config.yml’파일이 인코딩이 잘못되어 저장이 된 것 같았다.

그래서 로컬에 있는 파일 인코딩 UTF-8에서 UTF-8(BOM)으로 저장하여 push한 결과 제대로 해결되었다.