GitHub 블로그 오류 - GitHub beullogeu olyu

원인: 구글링을 하던 중 디자인이 유니크하고 심플한 블로그 디자인을 찾게 되어 해당 디자인으로 나만의 블로그를 만들어 보고 싶었다. 해당 블로그를 만들기 위해선 GitHub.io + jeklly theme을 활용한다는 것을 알게 되었다.

GitHub에서 Repository 생성

New Repository 버튼을 통해 Repository를 생성하여 이름을 설정한다.

주의) Repository명은 [본인아이디].github.io로 설정한다.

이제 나의 Mac으로 가져와서 작업하도록 설정한다. 내 Repository의 주소를 Clone 해온다.

복사 후 Terminal에서 Repository를 저장한 폴더로 이동 후 clone 명령어를 통해 가져온다. 성공했다면 해당 폴더에 Repository가 생성되어있을 것이다.

cd [your repository folder]git clone [clone url]

Jeklly Theme 설정

자신에게 맞는 테마를 찾은 뒤 해당 테마를 위와 같이 clone 혹은 파일을 다운 받아서 내 PC의 Repository 폴더에 내용물을 복사한다.

터미널에서 Repository로 이동한 후 해당 명령어를 통해 jeklly bundle을 설치한다.

cd ./(your repository.gitgub.io)
gem install bundler
bundle install

Bundle 오류 발생

bundle을 설치하려고 진행 하니 다음과 같은 오류가 발생했다.

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.An error occurred while installing eventmachine (1.2.7), and Bundler
cannot continue.
Make sure that `gem install eventmachine -v '1.2.7' --source
'https://rubygems.org/'` succeeds before bundling.

원인을 구글링한 결과 Ruby가 제대로 설치되지 않은 상태여서 생기는 오류였다. ( jekyll theme는 Ruby 기반의 bundle이다. 그렇기 때문에 Ruby 설치를 먼저 진행 했어야 한다.)

brew를 통해 ruby 설치를 진행했다.

brew install rubybrew link --overwrite ruby

설치 진행 후 ~/.zshrc에 환경변수도 설정한다.

vi ~/.zshrc  echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc
  export LDFLAGS="-L/usr/local/opt/ruby/lib"
  export CPPFLAGS="-I/usr/local/opt/ruby/include":wqsource ~/.zshrc

Jeklly bundle 설치 후 로컬 샘플 블로그 확인하기

bundle이 정상적으로 설치가 완료되면 아래 명령어를 실행하고 127.0.0.1:4000 주소를 확인한다.

 bundle exec jekyll serve

serve 실패 오류 발생

위의 명령어를 실행하니 다음과 같은 오류가 발생했다.

Generating...
Jekyll Feed: Generating feed for posts
done in 0.27 seconds.
Auto-regeneration: enabled for '/Users/dhoyle/myblog'
------------------------------------------------
Jekyll 4.2.0 Please append --trace to the serve command
for any additional information or backtrace.
------------------------------------------------
/usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve/servlet.rb:3:in require': cannot load such file -- webrick (LoadError) from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve/servlet.rb:3:in <top (required)>'

구글링을 한 결과 해당 github 페이지에서 해결 방법을 찾을 수 있었다.

아래의 명령어와 같이 webrick를 추가해주니 오류가 발생하지 않았다.

bundle add webrick

127.0.0.1:4000 접속

해당 url에 접속하여 로컬에서 내가 원하던 디자인의 샘플 블로그를 확인할 수 있었다.

username.github.io로 웹 호스팅 하기

지금까지 로컬 컴퓨터에서 블로그를 확인 했다면, 이제는 GitHub Pages에 올려볼 차례이다.

위에서 새로 생성한 username.github.io에 remote repository를 등록한다.

(git push -u origin master 명령어 실행 시 오류가 난다면 git pull를 사용한다.)

cd username.github.io/
git remote add origin {clone url}
git push -u origin master

git push까지 완료했으면 jeklly theme가 본인의 username.github.io repo에 업로드 된 것을 확인 할 수 있다. https://username.github.io 주소로 접속하여 블로그가 정상적으로 나오는 지 확인한다.

해결하지 못한 문제 발생😭

나의 https://username.github.io 주소로 접속한 결과 CSS가 적용되지 않는 문제가 있었다.

해결방법 1) _Config.yml 파일 baseurl, url 수정

구글링한 결과 가장 많이 나온 방법이다. github 블로그를 clone 하는 과정에서 기존의 작성된 경로와 나의 경로가 다른 경우 발생할 수 있다고 한다.

_config.yml 파일 안에 baseurl은 공백으로, url를 본인의 블로그로 변경해준다. (출처: https://github.com/mpa139/allanlab/issues/6)

url: "https://username.github.io"baseurl: "" 

해결방법 2) _Config.yml 파일 remote_theme 부분 주석 해제

_Config.yml 파일의 remote_theme 부분이 주석이 처리 되어 있다면 github server에 제대로 호스팅이 되지 않을 수 도 있다.

# theme: jekyll-theme-so-simple   <- 로컬 확인 시 반대로 해당 주석 해제
remote_theme: mmistakes/so-simple-theme

해결방법 3) 처음부터 다시 다른 순서로 진행해보기

지금까지의 순서가 아닌 다른 방식으로 진행을 해보면 어떨가 해서 처음부터 다시 해보았다. jeklly theme를 fork하여 내 repository로 만든 후 위의 해결방법처럼 Config.yml 파일을 수정하였지만 CSS 파일이 이상하게 불러와지지 않았다..😞

결론

나의 git 지식이 많이 부족하다. 기본적인 push, pull, commit 부터 기초지식 공부가 필요할 것 같다.

실패는 성공의 어머니다. 나는 포기한 것이 아니다. 실패를 일부러 한번 맛 본 것이다. 이 문제를 무기한 Backlog화 시키지 않고 주변의 지인을 통해 해결해 볼 것이다.👍

안녕하세요!

저는 jekyll server로 포스팅 전 테스트를 해보는데 의문의 오류가 발생해서 관련 글을 써봅니다.

우선 jekyll server로 확인했을 땐 전혀 문제가 없었는데 push 후 github.io에 들어가 확인하니 기능상 오류가 발생하더라구요.

1. 다른 날짜로 작성한 두 게시글 중 한 게시글의 날짜가 다르게 표기 됨
2. 또 다른 게시글 선택 시 해당 게시글이 아닌 다른 게시글로 연결됨

위 두 가지 문제가 발생했습니다. 두 게시글의 제목은 다음과 같았습니다.

2021-02-11-diary.md
2021-02-12-diary.md

이름은 똑같고 날짜가 다르죠!

1. 다른 날짜로 작성한 두 게시글 중 한 게시글의 날짜가 다르게 표기 됨

jekyll 서버에서 글 목록

github.io에서 글 목록

보이는 것처럼 위의 게시물 날짜가 바뀌죠! jekyll server의 날짜가 맞는 날짜입니다.

2. 또 다른 게시글 선택 시 해당 게시글이 아닌 다른 게시글로 연결됨

글 목록 중 아래 글을 선택해 보았습니다.

jekyll 서버에서 클릭 후 화면

github.io에서 클릭 후 화면

이처럼 같은 글을 선택했는데 다른 수행이 발생하네요…

결과적으로 목록 아래에 위치한 글은 github.io에서 볼 수 없게 되었어요!

다른 카테고리 내의 글과 같은 template을 쓰는데… 이런 오류가 여기서만 발생했습니다. 제 생각엔 글의 파일 제목이 url로 파싱되어 들어가는데 날짜 부분을 제외한 제목 부분이 같으면 안 되는 거 같아요.

만약 글의 파일 제목이 2021-02-12-diary.md라면 글 선택시 url은 /2021/02/12/diary.html로 변형됩니다.

3. 해결

위에서 예상한대로 두 글의 제목을 다음처럼 바꾸었더니 기능상 오류를 잡을 수 있었습니다.

2021-02-11-diary-01.md
2021-02-12-diary-02.md

결론

_posts 내의 post 파일의 제목의 날짜 부분은 Parsing 되고 뒤의 title 부분은 고유해야 한다.

감사합니다.

Text by Chaelin. Photographs by Chaelin, Unsplash.