서두
2022년 개발공부를 하면서 공부한 내용을 기록하는 습관의 필요성을 느꼈다.
한번 공부했던 내용을 까먹어서 나중에 또 구글링하는게 미련하게 느껴지기도 했고, 공부한 내용을 나의 언어로 바꿔서 정리하면 내 머릿속에 그래도 오래 남지 않을까.. 생각해서 올해부터는 기록하는 습관을 들이려고 한다.
그래서 개발 블로그를 시작하고자 했고, 여러가지 종류 중에 Jeykll을 활용한 Github 블로그로 만들어보고 싶어서 시도해봤다.
근데 Github 블로그를 만들어본다고 했는데 Velog에 글을 남기고 있는건.. 음 ㅎㅎ
Jekyll이란?
Jekyll은 Ruby로 만들어진, Markdown 및 HTML 파일을 가져와 선택한 레이아웃에 따라 완전한 정적 웹 사이트를 만들어주는 설치형 블로그다.
Jekyll을 설치하면 생성되는 _config.yml 파일을 편집하여 사이트의 테마 및 플러그 인과 같은 대부분의 Jekyll 설정을 구성할 수 있다.
Jekyll 설치(Mac OS)
1. Ruby 설치
1) rbenv(Ruby Version Manager) 설치
Ruby의 버젼을 관리해주는 프로그램이다. Homebrew로 아래 명령어를 통해 설치해보자.
$ brew install rbenv설치가 완료되었으면 ~./bash_profile에 아래의 명령어로 rbenv 설정을 해주자.
$ echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
$ source ~/.bash_profile 2) Ruby 설치
Ruby 공식 홈페이지 에서 최신 버젼을 확인하고 설치를 한다. 필자는 3.1.0 버젼으로 했다.
rbenv install 3.1.0그리고 로컬에서 사용할 Ruby의 버젼을 전역으로 설정해준다
rbenv global 3.1.0Ruby가 잘 설치되었는지 확인을 해준 다음
ruby -vrehash를 해준다. Ruby를 새로 설치했으면 rehash를 해야한다고 한다.
rbenv rehash2. Jekyll 설치
아래의 명렁어로 Jekyll을 설치해주자
gem install jekyll bundler이렇게 되면 Github 사용을 위한 Jekyll 준비는 끝났다.
+) Permission 오류
Jekyll을 설치할 때 You don't have write permissions... 라는 오류가 발생했다면 which 명령으로 ruby와 gem의 경로를 확인해보자.
$ which ruby
/usr/bin/ruby
$ which gem
/usr/bin/gem경로가 위와 같이 설정되어있다면, 쉘 설정파일(~/.bashrc)에 접근해서 아래의 내용을 추가해주자.
[[ -d ~/.rbenv ]] && \
export PATH=${HOME}/.rbenv/bin:${PATH} && \
eval "$(rbenv init -)"다음 경로를 다시해보면 아래와 같이 변경되어 있을 것이다. 다시 Jekyll을 설치해보자.
$ which ruby
/Users/유저명/.rbenv/shims/ruby
$ which gem
/Users/유저명/.rbenv/shims/gemGithub 블로그 만들기
1. Github에 Repository 생성
우측의 New 버튼을 클릭해서 새로운 레포지토리를 생성한다.
다음 Owner와 Repository name을 설정해준다.
Repository name은 아래와 같은 형태로 해야한다.
[Github 사용자 이름].github.io
설정을 마쳤으면, 레포지토리 생성을 마무리한다.
2. html 파일 생성
생성한 레포지토리를 로컬에 가져오자.
git clone [레포지토리 주소] [폴더명]간단한 html 파일을 생성해 블로그가 잘 만들어지는지 확인해보자
cd [폴더명]
echo "Hello World" > index.htmlPush를 해서 생성한 html을 remote에 업로드하자
git add -a
git commit -m "initial commit"
git push -u origin main3. 블로그 확인
push를 했으면, [Github 사용자 이름].github.io 에 접속해서 블로그가 잘 생성되는지 확인해보자.
잘 생성되었다
Github 블로그에 Jekyll 적용
1. Jekyll 생성
clone 받았던 폴더에 Jekyll을 생성하자
jekyll new ./혹시 아래와 같은 에러가 뜬다면
Conflict: [폴더 경로] exists and is not empty.
Ensure [폴더 경로] is empty or else try again with `--force` to proceed and overwrite any files.clone 받았던 폴더에 아까 만들었던 index.html 파일이 있어 생기는 오류다.
미련없이 폴더를 비운 다음 Jekyll을 생성하자.
Jekyll을 생성하면 아래와 같이 파일들이 생긴걸 확인할 수 있다.
만든 기본 Jekyll이 어떻게 생겼는지 확인하기 위해 로컬서버에 띄워보자
bundle exec jekyll serve
명령을 실행하면 위와 같이 Server address가 뜬다. 브라우저로 위 주소에 접속해보면
Jekyll이 잘 생성된 것을 확인해볼 수 있다
2. Jekyll 테마 적용하기
기본 테마는 상당히 밋밋하다. 맘에 드는 테마를 찾아 적용시켜보자.
위 사이트들 혹은 구글링을 통해 맘에 드는 테마를 찾아보자.
맘에 드는 테마를 찾았다면, 해당 테마의 Github 주소를 찾을 수 있을 것이다.
해당 테마의 Github에 들어가서 Download ZIP으로 파일들을 받아오자
받아온 파일의 압축을 풀고, 파일들을 블로그 폴더에 Ctrl+C V를 해준다.
요런 메시지가 뜨면 대치시키면 된다.
복붙을 완료했으면 bundle install을 하고 로컬 서버에 띄워보자
bundle install
bundle exec jekyll serve근데 서버가 실행이 안 되고 Liquid Exception이라는 오류 메시지가 떴다.
Liquid Exception: Liquid syntax error (line 6): Unknown tag 'include_cached' in /Users/sanghyunn/Desktop/무제 폴더 2/Blog/_layouts/post.html
------------------------------------------------
Jekyll 4.3.1 Please append `--trace` to the `serve` command
for any additional information or backtrace.
------------------------------------------------메시지를 읽어보면 include_cached 라는 Unknown tag가 있다는 건데, 이 include_cached는 사실 우리가 골랐던 Jekyll을 실행시키기 위해 필요한 플러그인이다.
해당 플러그인이 설치가 안 되어있어서 생긴 오류니 Gemfile에 include_cached 설치 명령을 추가해주자.
// Gemfile
...
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
gem "jekyll-include-cache" // 얘 추가
end
...
다른 플러그인들도 위처럼 Gemfile에 추가해주면 된다.
_config.yml에도 "이 플러그인을 사용한다"고 명시해놓아야 한다.
아래의 코드를 _config.yml에 추가하자
plugins:
- jekyll-include-cache필요한 플러그인들을 Gemfile에 추가했으면 bundle install 을 통해 새로운 플러그인을 설치해준 다음
bundle exec jekyll serve로 로컬 서버를 실행시켜보면
아까처럼 로컬 서버가 잘 실행되고
적용한 jekyll 테마가 잘 뜨는 걸 볼 수 있다.
3. 블로그 설정
_config.yml 파일에서 블로그를 설정할 수 있다.
예를 들어, 블로그의 제목을 변경하고 싶다면
title 부분을 변경해주면 된다.
그 외 기타 디자인들을 설정해줄 수 있다.
포스팅을 추가하고 싶으면 _posts 폴더에 마크다운 파일을 만들어주면 된다.
블로그 설정을 완료했으면 remote에 push 해주자
[Github 사용자 이름].github.io 로 접속했을 때도 Jekyll이 잘 뜨는 것을 확인할 수 있다.
마무리
Github 블로그는 Jekyll을 사용해서 블로그를 자유롭게 커스텀할 수 있는 장점이 있다.
하지만 내가 Github 블로그를 사용하지 않은 이유는
웹개발을 거의 안해봐서 html이나 js로 커스텀하는 것에 익숙하지 않아서다.. ㅎㅎ
공부한 내용 정리하려다가 의도치 않게 웹개발을 공부하게 되는 상황이 될 것 같았다. 추후에 웹개발도 차차 공부할 예정이라 그때 공부하게 되면 Github 블로그를 이용하게 될지도
참고 링크
