두 번째 Step은 로컬에 Jekyll을 띄우고 원격에 push까지 할꺼에요😃
설치 순서는 순서는 rbenv > ruby > jekyll 입니다.
Ruby 설치
ruby를 설치하기 전에 rbenv먼저 설치하겠습니다.
rbenv는 루비 버전을 관리할 수 있는 툴입니다.
1
brew install rbenv
설치 가능한 버전을 확인해보겠습니다. 저의 경우에는 3.2.2 버전을 다운받을 수 있어 3.2.2 버전을 다운받겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
rbenv install -l
3.0.6
3.1.4
3.2.2
jruby-9.4.3.0
mruby-3.2.0
picoruby-3.0.0
truffleruby-23.0.0
truffleruby+graalvm-23.0.0
rbenv install 3.2.2
Jekyll은 Ruby를 통해 개발된 사이트 생성기입니다. 따라서 Jekyll을 설치하기 전 Ruby를 먼저 설치합니다.
루비 버전은 3.2.2로 설정하고 현재 버전을 확인해보겠습니다.
1
2
3
4
5
6
7
8
rbenv global 3.2.2
rbenv versions
system
2.6.9
2.7.0
2.7.2
* 3.2.2
본인이 어떤 Shell을 사용하는지 확인하기 위해 아래 명령어를 입력합니다.
1
2
3
echo $SHELL
/bin/zsh
본인이 이용하는 shell에 따라서 아래 명령어를 통해 환경변수 세팅을 합니다.
1
2
3
4
5
# zsh의 경우
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
# bash의 경우
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
bundler 설치 및 index.html 삭제
ruby에서 사용하는 패키지인 Gem의 의존성관리를 위한 의존성 관리 도구인 bundler를 설치합니다.
1
gem install bundler
이전 강의에서 만들었던 index.html을 삭제합니다.
1
rm -f index.html
Jekyll 설치
jekyll은 정적인 사이트 생성기라고 합니다.
정말 신기하게도 깃허브의 공동 설립자 톰 프레스턴 워너에 의해 개발되었습니다.
1
gem install jekyll
jekyll 기본 블로그를 설치합니다.
1
2
# jekyll new {소스 root 디렉토리}
jekyll new ./
반드시 clone한 소스의 root 디렉토리에서 위 명령어를 입력해야 합니다.
저의 경우 ~/Workspace/gun1507-test.github.io 가 되겠네요.
ll을 통해 확인해 보면 기본 파일들이 있습니다.
1
2
3
4
5
6
7
8
9
10
ll
404.html
Gemfile
Gemfile.lock
README.md
_config.yml
_posts
about.markdown
index.markdown
원격 저장소 push
git add, commit, push를 진행합니다.
1
2
3
git add .
git commit -m "add - jekyll install"
git push origin main
블로그 접근 및 확인
{Owner}.github.io 페이지 접속 후 index.html에 작성한 내용이 표출되는지 확인합니다. 
🔥만났던 오류🔥
jekyll이 이미 존재하고 있는 경우
jekyll new ./명령어 입력 시 오류가 나는 경우가 있습니다.
이 경우에는 jekyll new -f ./명령어를 입력해주세요.
1
2
Conflict: /Users/Workspace/gun1507-test.github.io exists and is not empty.
Ensure /Users/Workspace/gun1507-test.github.io is empty or else try again with `--force` to proceed and overwrite any files.
push 이후 githug-pages 에서 Gemfile 의존성을 충족할 수 없는 경우
build 과정에서 Warning: github-pages can't satisfy your Gemfile's dependencies. 오류가 나타났습니다. 
github docs에서 내용을 확인할 수 있었습니다.
1) 게시 소스로 사용하려는 분기가 저장소에 이미 있는지 확인하십시오.
2) GitHub에서 사이트의 리포지토리로 이동합니다.
3) 리포지토리 이름 아래에서 Settings 을 클릭합니다. Settings 탭이 보이지 않으면 드롭다운 메뉴를 선택한 다음 설정을 클릭합니다. 
4) 사이드바의 “Code and automation” 섹션에서 Pages 를 클릭합니다.
이후에 Jekyll Configure을 진행합니다. 
workflows를 만들 수 있는데 Workflow란 Actions의 상위 개념으로 작업흐름 자동화 과정입니다. 
아래 내용대로 입력해주세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
name: 'Automatic build'
on:
push:
branches:
- main
paths-ignore:
- .gitignore
- README.md
- LICENSE
jobs:
continuous-delivery:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
with:
fetch-depth: 0 # for posts's lastmod
- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: 2.7
bundler-cache: true
- name: Deploy
run: bash tools/deploy.sh
복사, 붙여넣기 후 오른쪽 위 Commit changes 를 진행합니다.
github Actions에서 Setup Ruby 과정 중 오류 발생한 경우
workfolw 내용을 만든 뒤 push를 진행했지만 Error: The process '/opt/hostedtoolcache/Ruby/2.7.8/x64/bin/bundle' failed with exit code라는 오류가 발생했습니다. 
원격 저장소에서 직접 Gemfile.lock 을 삭제 후 로컬에 pull을 진행하겠습니다. 
1
2
git fetch
git pull origin main
Gemfile.lock에 x86_64-linux 플랫폼이 없기 때문에 추가하도록 하겠습니다.
1
bundle lock --add-platform x86_64-linux
🚨이제 다시 push를 하기 전 꼭 .gitignore 파일을 수정합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# hidden files
.*
!.git*
!.editorconfig
!.nojekyll
!.travis.yml
# bundler cache
_site
vendor
# rubygem
*.gem
# npm dependencies
node_modules
package-lock.json
Gemfile.lock
deploy 과정에서의 오류
다시 한번 push를 진행했지만 Error: Process completed with exit code라는 오류가 발생했습니다.
tools/deploy.sh 가 없기 때문에 제 저장소에서 다운로드 한 이후 복붙 해주세요! tools 전체를 복붙 하고 push 하겠습니다.
Sass 버전 문제로 인한 '/' 함수 오류
로컬에서 테스트 하기 위해 bundle install을 다시한번 진행하고 아래 명령어를 통해 로컬에서 실행시켰습니다. 하지만 ‘/’ 나누기 함수를 실행할 수 없다고 합니다. 버전 문제인듯 해요.
1
2
3
4
bundle exec jekyll serve
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
...
수많은 해결 방법이 있겠지만 저는 ‘/’ 를 사용하지 않기로 했습니다. scss 파일의 ‘/’를 전부 ‘* 0.5’ 으로 변경합니다.
1
2
npm install -g sass-migrator
sass-migrator division **/*.scss