[9. Apr] Github.io 시작 #1

 며칠 전 부터 깃헙 io 블로그로 이전하고 싶어서 만드는 법을 찾아보았다.

Github.io로 블로그를 옮기려고 한 이유는 깃헙 블로그에 지금 티스토리에서 올리듯 TIL을 매일 올리고 커밋하면

하루에 한 개라도 잔디가 쌓이기 때문이다 ... ^^ (성실함의 지표랄까)

 

 

처음에 만드는 법을 찾고 무작정 예쁜 테마를 찾아보다가

jekyll에 처피가 인기가 많고 예뻐서 따라해보려 했는데, 이슈 하나를 해결하면 또 다른 이슈가 생기고,,,

이런 태초부터 시작하는 블로그 같은 걸 한 번도 만들어보지 않은 나에겐 너무 어려움이 많았다 !!!

주말에 날 잡고 엉덩이 붙이고 앉아서 깃헙 블로그 될 때까지 꼭 완성해보자 라는 생각으로 시작해보았다.

열심히 다른 테마들을 찾아보다가 내가 좋아하는 넷플릭스 테마를 발견했다 ,,, (반응형 너무 이뿌다 🙂)

 

>> 🔴 Jekflix Link 🔴 <<

 

jekyll.jekflix theme

---

먼저 Github.io 페이지는 Jekyll를 기본 정적 사이트 생성기로 사용한다.

Jekyll은 복잡한 코드를 작성하지 않고도 정적 웹 사이트와 블로그를 만들고 게시할 수 있는 Ruby 기반 도구이기 때문에, 
Ruby를 꼭 설치해주어야 한다.

gem도 설치해 주어야하는데, 간단히 말해서 Ruby의 gem 파일은 Ruby 프로젝트의 쇼핑 목록이라고 할 수있다.
gem 은 분산 패키지 시스템으로 라이브러리의 작성, 공개, 설치를 도와주는 시스템이라고 한다.

---

✔️ Ruby와 gem 설치법 

$ cd
// home으로 이동

$ sudo apt install ruby ruby-dev build-essential
// ruby 설치

$ gem install jekyll bundler
// jekyll bundler 설치

위와 같이 설치가 완료되면, 상단에 올린 깃헙의 jekflix 링크로 접속해보자!

---

사이트에 접속하고 오른쪽 상단에 fork 를 누른다.

(나도 다 만들고나서 알았는데 fork로 레포지토리를 가져가서 블로그를 만들면 깃허브 커밋 잔디가 안심어진다고 한다,,,
새로운 레포를 만들고나서 푸시하도록 하자,,,)

---

Repository name을 본인 github의 user name.github.io 로 변경한 후 Create fork를 클릭한다.

---

포크가 완료되면 포크된 레포지토리에 들어가서 위 사진대로 차례대로 클릭한다.

---

이제 터미널 창을 열어본다 !!

메인 home에서 본인의 github.io 를 작업할 폴더를 하나 생성한다.

$ mkdir githubio
// 폴더 이름(githubio)은 자유

$ cd githubio
// 방금 생성한 폴더로 들어간다.

$ git clone https://github.com/seay0/seay0.github.io.git
// 위 사진에서 복사한 내용을 붙여넣는다.

폴더를 하나 생성해서 방금 본인이 fork 한 테마 레포지토리를 나의 폴더 안으로 가져오는 내용이다.

---

$ git clone https://github.com/seay0/seay0.github.io.git
'seay0.github.io'에 복제합니다...
remote: Enumerating objects: 1635, done.
remote: Total 1635 (delta 0), reused 0 (delta 0), pack-reused 1635
오브젝트를 받는 중: 100% (1635/1635), 2.07 MiB | 17.49 MiB/s, 완료.
델타를 알아내는 중: 100% (848/848), 완료.

위와 같은 내용이 출력되며 clone이 완료되고 'ls' 명령어를 실행하면 방금 clone한 레포가 생성되어 있다.

$ ls
seay0.github.io

$ cd seay0.github.io
// 방금 clone한 폴더로 이동한다.

---

$ bundle

Fetching gem metadata from https://rubygems.org/............
Resolving dependencies...
Using public_suffix 5.0.1
Using rb-fsevent 0.11.2
Using colorator 1.1.0
...
Bundle complete! 7 Gemfile dependencies, 30 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

bundle 명령을 실행하면 Gemfile에 지정된 애플리케이션에 필요한 gem을 성공적으로 설치했다 등의 메시지가 출력된다.

---

$ bundle exec jekyll serve

원래대로면 이 상태에서 위 명령을 실행하면 서버가 http://127.0.0.1:4000/ 에서 호스팅 되며
웹 브라우저 창에서 테마가 표시 되어야 정상인데, 나 같은 경우에는 아래와 같은 오류가 하나 발생했다.

bundler: failed to load command: jekyll (/home/seay0/gems/bin/jekyll)
/home/seay0/gems/gems/jekyll-3.9.3/lib/jekyll/commands/serve/servlet.rb:3:in `require': cannot load such file -- webrick (LoadError)

검색해보니 bundle에 webrick이 설치가 안되었거나 추가가 안되어서 발생하는 오류라고 한다.

$ bundle add webrick

위 명령을 실행해보면,

Fetching gem metadata from https://rubygems.org/...........
Resolving dependencies...
Fetching gem metadata from https://rubygems.org/...........
Resolving dependencies...
...
Using webrick 1.8.1
...

위와 같은 결과를 출력하며 내용에 Using webrick이 추가된 것을 볼 수 있다.

---

다시 서버를 구동해보면

$ bundle exec jekyll serve
Configuration file: /home/seay0/githubio/seay0.github.io/_config.yml
            Source: /home/seay0/githubio/seay0.github.io
       Destination: /home/seay0/githubio/seay0.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
   PaginateContent: [posts] Generated 2+1 pages
   PaginateContent: 1 item could not be split (no separators?)
                    done in 1.073 seconds.
 Auto-regeneration: enabled for '/home/seay0/githubio/seay0.github.io'
    Server address: http://127.0.0.1:4000/

 

위 같은 내용이 출력되며 Server address에 http://127.0.0.1:4000/ 로컬 4000포트에서 서버를 실행중인 것을 볼 수 있다.

 

정상적으로 서버가 구동되었다!

이제 Ctrl + C 를 입력해 서버를 종료시키고, github에 push를 해준다.

$ git add .

$ git commit -m 'success'
[master 786daa1] success
 1 file changed, 2 insertions(+)
 
$ git push
오브젝트 나열하는 중: 5, 완료.
오브젝트 개수 세는 중: 100% (5/5), 완료.
Delta compression using up to 8 threads
오브젝트 압축하는 중: 100% (3/3), 완료.
오브젝트 쓰는 중: 100% (3/3), 298 바이트 | 298.00 KiB/s, 완료.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/seay0/seay0.github.io.git
   f24ede5..786daa1  master -> master

---

이제 브라우저를 켜서 본인의 레포지토리 이름을 그대로 실행해주면 테마가 정상적으로 적용된 모습을 볼 수 있다!!

이제 내 주소의 블로그를 나의 공간으로 꾸며보도록 하자 !