📒Github Blog 만들기-1

22/07/31(1)

코딩뉴비의 Git Blog 만들기!

╰(°▽°)╯👏👏👏

호기롭게 시작하였으나...

많은 시행착오를 겪었습니다.

제 데탑 환경은 Window 였는데

blog를 서칭해 본 결과 MAC 환경에서 작업한 것들이 많았고😂

MAC과 같은 리눅스 환경을 구축해 보고자

ubuntu를 다운 받아 작업 했는데 여러 오류로 일단 STOP! (차후 ubuntu로 다시 만들어볼 생각)

제가 git blog builder로 이용할 기능은 Ruby와 Jekyll입니다.

먼저 둘에 대해 간단하게 정리해 볼까요?

---

• Ruby는 프로그래밍 언어명으로 정적 사이트 생성기(static website builder) jekyll에서 사용하는 프로그래밍 언어이다.

• Jekyll은 Ruby programming languge로 만들어져 있다.

• jekyll은 Github에 무료로 호스팅 가능하다.

• jekyll과 Github는 markdown언어를 사용한다.

---

ㅇㅇ그렇구나!

📚bolg build 시작!

✔️VSCode와 Github의 연동법을 익힌 후 아래 작업 착수.

　1. Ruby download 홈페이지에서 안정적인 릴리즈 버전을 다운로드. (나는 3.1.2-1 ver을 다운 받았다. jekyll가 32bit라는 글을 어디서 잠깐보았기에.)

　2. start command prompt with Ruby에서 블로그를 개설할 git 폴더로 경로 이동!

>cd {로컬 repo 폴더 경로.}

　4. Ruby에 Jekyll 설치.

✍

>gem install jekyll bundler

👉결과
✔️성공

만약 3.0이상의 버전을 다운 받는 다면 webrick 을 설치해 줍시다. Ruby 3.0 버전 부터 serve를 동작 시 webrick 오류가 생겨 날 수 있기 때문입니다.
오류가 생겨나고 webrick install을 해주어도 상관은 없습니다.

✍

>gem install webrick

👉결과
✔️성공

　5. jekyll 생성.

✍

>jekyll new ./

❗️ 여기서 에러가 뜨네요??

　👇이렇게👇

Error를 자세히 읽어보면 {폴더} is not empty라고 나와 있습니다.

✔️해결 방안

• 당황하지 말고 해당 폴더로 가서 파일을 전부 '삭제' 해 줍니다.

이제 jekyll new 를 하기 전에 폴더 안에 파일을 전부 삭제해 주도록 합시다. (.git 폴더 제외.)

　5-1. 다시 jekyll 생성!

✍

>jekyll new ./

👉결과
✔️성공

6. bundle install.

---

• bundle은 영어명 그대로 무언가를 묶어주는 역할을 한다.

  Q. 뭘 묶을까?

  A. 서로 참조관계가 있는 파일을 묶는다.

• 의존성이 있는 모듈을 묶어주기 때문에 시간도 절약되고 파일 크기도 줄어든다.

---

✍

>bundle install

👉결과
✔️성공

7. jekll sever.

지킬 서버를 작동시켜 봅시다.

✍

>bundle exec jekyll serve

❗️ 여기서 webrick 관련 에러가 생길 수도 있습니다.

　👇이렇게👇

블라블라~ 중간에 Error가 보입니다.
cannot load such file -- webrick (LoadError)

✔️해결 방안

• 당황하지말고 구글링 합시다.

• https://tmjb.tistory.com/131 이분이 매
  우 정리를 잘 해놓으셨네요.👍

  >bundle add webrick

• webrick을 설치하면 해결되는 문제였습니다.

• 위에서 설명했던 것 처럼 Ruby 3.0 ver부터 gem에 webrick가 포함되지 않아서 생긴 오류라고 합니다.
  

• webrick은 Ruby의 라이브러리 입니다.
  

7-1. 다시 jekyll sever 작동!

✍

>bundle exec jekyll serve

👉결과
✔️성공

8. jeckyll 접속

localhost:4000 or 127.0.0.1:4000 으로 접속하여 아래와 같은 화면이 뜨면 성공!

휴😅

📖참조

글꼴색상
https://velog.io/@euisuk-chung/%EA%BF%80%ED%8C%81-Velog-%EA%B8%80%EC%94%A8%EB%A5%BC-%EB%82%B4-%EB%A7%88%EC%9D%8C%EB%8C%80%EB%A1%9C-%EC%83%89%EC%83%81-%ED%98%95%EA%B4%91%ED%8E%9C

markdown
https://velog.io/@yuuuye/velog-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4MarkDown-%EC%9E%91%EC%84%B1%EB%B2%95
https://velog.io/@ybkim3603/Velog%EB%B2%A8%EB%A1%9C%EA%B7%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC

이모지
https://kr.piliapp.com/twitter-symbols/

palaco
https://velog.io/@yeseolee/%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C%EB%A5%BC-%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%97%90-%EC%98%AC%EB%A6%B4%EB%95%8C

github blog
https://wlqmffl0102.github.io/posts/Making-Git-blogs-for-beginners-2/