jekyll 테마 사용 | github 블로그 개설하기

👩‍🔧 jekyll 테마 사용해서 github으로 블로그 개설하기

 

🔥 목적 - Today I Learn 작성, 알고리즘 문제 풀이 

 

🔥 markdown 문법에 익숙해지고, github 잔디밭 생성을 위해..!

 

🔥 설치 방법 

 

---

1. jeklly setup

2. github 저장소 생성

3. github 저장소, jeklly 테마 합치기

4. jeklly 테마 다운

 

- 큰 틀로 설명하자면 이 네 단계를 거치면 된다.

 

---

0. ( ruby가 설치되어 있지 않다면, 아래 사이트에서 권장하는 버전으로 설치 후 진행한다. )

 

Downloads

 

1. jeklly setup

 

1. jeklly , bundler 설치하기

 

gem install jekyll
gem install bundler

jekyll -v //버전확인
bundler -v //버전확인

 

- ruby 설치 후, start Command Prompt with Ruby 터미널에서 진행

 

jekyll new {파일명}
cd {파일명}

 

-  파일명에는 새로 만들어질 파일명으로 작성한다. (본래 없던 파일을 적어도 됨)

 

 

실행

 

jekyll serve

 

- localhost:4000에서 블로그가 뜬다면 성공.!

 

 

2. github 저장소 생성

 

1. github new repo 만들기

- `계정 이름. github.io` 저장소 이름은 반드시 계정 이름으로 작성!

 

2. git 주소 clone 하기 

- 원하는 폴더에서 gitbash를 열어서 아래 명령어로 저장소를 clone 한다

 

git init
git clone "저장소 주소"

 

 

3. github 저장소, jeklly 테마 합치기

 

- 1번에서 설치된 폴더에 있는 모든 파일을 복사해서 → 2번 clone 한 폴더에 붙어 넣기

 

git add .
git commit -m "initial commit"
git push origin master

 

- github page와 jeklly project 연동 성공!

( +) 해당 github repo의 setting tab에서 github.io주소를 받을 수 있다.)

 

 

 

+4. jeklly 테마 다운

 

- 원하는 테마 찾기

 

Jekyll Themes

 

Free Jekyll Themes

 

- 테마 가져오는 방법 →  1. 해당 repo fork 하기 / 2. 압축파일 다운로드하기 (두 번째 방법으로 진행함)

 

- 생성한 github 폴더에 모든 파일을 삭제하고 해당 테마의 파일을 옮겨두면 된다.!

 

---

- 이 방법이 베스트는 아니라고 생각한다.. 

- 삽질 3번은 했다.. 해놓고 보니 별거 아닌데 왜 이리 헤맸을.. 까.. 

 

 

문제 해결

 

✅ 로컬 서버 연결하기 (11/24 ✔)

 

- 크롬으로 바로 연결되는 줄 알았는데, react처럼 명령어를 입력해야 로컬로 연결이 되나 보다.. 구글링..

 

터미널에서 아래 명령어로 로컬 연결

 

jekyll serve

 

- ❌ 문제 : Bundler::GemNotFound 에러 발생으로 로컬 서버 연결 실패

 

 

bundler //입력
jekyll serve //다시 시도

 

- ❌ 문제 : Gem::LoadError 에러 발생

 

 

bundle clean --force
jekyll serve

 

=> ❗ 해결 :  local host:4000 연결 성공!

 

 

✅ 다운로드한 테마 수정 (11/25 ✔)

 

-  테마 수정이 이렇게 오래 걸릴 줄 몰랐다.. 웬만한 건 수정 완료..!

- 다운로드한 테마에 portfolio 탭이 있었는데, 나는 portfolio는 따로 만들 것이기 때문에 해당 탭을 지우고 profile 탭으로 만들어뒀다 → 여기서 본래 있던 portfolio scss 파일 하고 엇나가서 시간이 오래 걸림..

 

✅ github에 page주소 받아서 올려둠 (11/25 ✔)

 

- 이때, 해당 페이지 주소를 바로 접속하면 404 에러가 뜬다. 시간을 두고 다시 접속하면 정상 접속됨