필요해서 만드는 블로그 - Gtihub Pages + Jekyll (Windows) 세팅

정말 간만에 포스팅이네요.

도시로 리턴 후 이런 저런 플젝을 거치며 정신없이 벌써 1년 반이 지나고 상황의 변화도 생겨
"미뤄오던 포폴 정리를 해볼까?" 하고 가장 손이 덜 가며 비용 지출 덜 한 방법을 찾다 보니
별도의 호스팅(클라우드) 필요없이 github 계정과 jekyll 만으로 간단히 운영 가능한 방법이 있어 바로 시작해 봅니다.

깜박이는 기억의 기록 시작~ (이하 다나까 생략)

---

• 설치 환경: Windows 10
• github 저장소

---

잠시.. 개념 핥기

Jekyll 은 정적 사이트 생성기란다. (아.. 뭐래.. 참 정 안가는 용어다)
그냥 html, css로 홈페이지를 만들건데.. 생성, 연결, 관리하는 방법을 제공해 주는 도구 정도?
여튼 사용하면 편한 건 맞다.

도구 없는 삽질 상상... html,css,js 생짜로 코딩할 때 공통 header, footer, link 등 바뀌면.. 노동의 품질은 나락으로..

 

Ruby 설치 (Winodws)

Jekyll은 공식적으로 Windows를 지원하지 않는다는데... (왤까?)
비공식?적으로 가능한 가이드를 제공해 주고 있다. https://jekyllrb.com/docs/installation/windows/

간단히 다운받아 설치해주고 next.

Jekyll 설치 가이드를 따라가 본다.

https://jekyllrb.com/docs/

Quickstart

 

Jekyll 설치 시작

ruby 설치를 완료했다면 cmd 창을 열고 아래 순서로 jekyll 설치하고 로컬 서버 띄우기

// jekyll 번들러 설치
> gem install jekyll bundler

// jekyll 설치 버전 확인
> jekyll -v

// jekyll 프로젝트 생성
> jekyll new myblog

// 생성된 폴더로 이동
> cd myblog

// 로컬 서버 실행
> bundle exec jekyll serve
...
...
...
	Server address: http://127.0.0.1:4000/  <-- 브라우저로 접속
...

 

아래 처럼 jekyll 초기 화면이 보이면 설치 완료.

jekyll 초기 화면

 

 

Github Pages 저장소 준비

웹 접근 가능한 github page로 사용할 저장소 이름을 [github 아이디].github.io 형식으로 입력하고 생성

자세한 가이드는 pages 가이드를 참고  
https://docs.github.com/ko/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll

Jekyll을 사용하여 GitHub Pages 사이트 만들기 - GitHub Docs

 

루트 폴더에 Jekyll 설치 후 생성된 설정 파일인 _config.yml (야믈) 파일을 열어 설정 변경

_config.yml

아래 4개 항목을 내 정보에 맞게 수정한다.

• title: 사이트 제목
• email: 이메일 주소
• url: github page url (ex: https://mysite.github.io)
• github_usename: github 계정명
• theme: 사용하는 jekyll 테마가 있을 경우 입력

github 저장소에 push!

> git add .
> git commit -m "jekyll site commit"
> git push

이제,
http://[github 아이디].github.io  에 접속해 jekyll 초기 화면이 확인되면 간단히 성공이다.

만약 사용하는 jekyll 테마가 있는데 push 후 테마 적용이 안된 text만 보인다면 테마 플러그인 설치가 필요한데
로컬 루트 폴더에 있는 Gemfile을 열어 아래 플러그인을 추가해 주고

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
  gem "jekyll-remote-theme"    << 추가
end

번들 인스톨 실행

> bundle install

설치가 완료되면 로컬 jekyll 을 재실행

> bundle exec jekyll serve

다시 github에 push 후
https://mysite.github.io 로 접속해서 theme 가 잘 표현되는 지 확인

초기 화면이 제대로 보인다면 기본 설치는 모두 완료가 됐다.

 

이제 남은 건..
페이지 작성과 유용한 스니펫 활용을 위해 Jekyll 문서를 참고하자.

https://jekyllrb.com/docs/pages/

Pages

 

 

이중성의 한 쪽은 채웠으니 다른 하나는?

fin.