Github pages로 블로그 만들기(1)
Github pages를 이용한 블로그 만들기는 여러 절로 구성되어 있습니다.
여지껏 Notion에 TIL을 작성해 오다가 문득 이런 생각이 들었다. 공부한것을 나만 보기엔
조금 아깝지 않는가?라는 생각 말이다. 그래서 지금이라도 남들한테도 조금 티를 내보기 위해
블로깅을 시작하기로 했다.
그래서 플랫폼을 생각해보다가 Github 잔디도 채우며 두 마리토끼를 잡을 수 있는 Github Pages를 이용하기로 했다.
사실 이 글을 거의 3일전에 준비했지만 준비중 여러가지 에러가 많이 생겨 지금에서야 적게 되었다.
Github Pages란 무엇인가?
Github 저장소에 있는 내용을 바탕으로 무료로 웹페이지를 통해 보여줄 수 있는 서비스이다. 즉 무료로 웹 서버를 구축할 수 있다. 그리고 깃허브에서 제공하는 정적 사이트 호스팅 서비스로 정적 사이트 생성기인 Jekyll을 지원한다
정적 사이트 호스팅 서비스란
정적 웹페이지는 쉽게 말해 동적 웹 페이지와 반대 되는 말로써 서버에 있는 데이터를 스크립트에 의해 가공하여 전달하는 것이 아니라 서버에 미리 저장되있던 파일을 그대로 전달하는 사이트를 호스팅하는 서비스를 말한다.
즉 따로 가공이 필요없는 정적인 데이터를 미리 빌드하여 저장한 것을 호스팅 해주는 서비스라고 할 수 있다.
그리고 이 블로그를 준비하면서 접하게된 jekyll에 대해서도 간략하게 알아보겠다 jekyll은 정적인 웹사이트 생성기로 Ruby언어를 기반으로 제작되었으며 마크업 언어로 작성된 텍스트를 이용하여 레이아웃을 사용해 정적 웹사이트를 생성해주는 도구로 생각하면 편하겠다.
이제 본격적으로 설치를 해보겠다 현재 Windows10 환경에서 설치를 진행하였다.
Ruby와 Jekyll 설치
Jekyll을 사용하기 위해선 Ruby가 설치 되어 있어야 하므로 Ruby부터 설치해보겠다. 나는 현재 윈도우 환경에서 진행하고 있기에 윈도우를 기준으로 설명하겠다.
Windows10 환경에서 진행할때 혹시 계정명이 한글이라면 영문으로 바꾸고 시작하자. Ruby가 한글 지원이 좋지 못하기 때문에 에러가 발생할 수 있다고 한다.
루비 다운로드 : https://www.ruby-lang.org/ko/downloads/
해당페이지로 이동하면 각 OS별로 설치하는 방법이 설명 되어있는데 필자는 Windows환경이므로 위 페이지에 있는 RubyInstaller 링크에 들어가서 설치를 해보겠다.
해당 링크를 들어가서 Download를 누르면 아래페이지가 나오는데 아래 표시한데로 추천 버전이 존재하니 해당 버튼을 눌러 다운을 하였다.
다운을 받고 설치를 완료하자
아래 사진을 표시한 이유는 디폴트 설치영역이 C:이지만 필자는 C에 용량이 얼마 남지 않아 어쩔수없이 D:로 설치하는 것이니 착오 없길 바란다. 나와 같은 이유가 아니라면 특별히 건드릴것 겂이 install을 하길 바란다.
설치가 완료되면 아래와 같이 나오는데 1번 3번을 선택하라 나오는데 우린 1번을 선택하여 설치를 이어가자.
아래와 같은 화면이 표시되었다면 설치가 완료된 것이다. 다음 단계로 넘어가자
루비를 모두 설치하고 bundler를 설치한다.
gem install jekyll bundler
설치가 제대로 되었는지 확인한다
C:\Users\com>jekyll -v jekyll 4.2.0
bundler는 Ruby application 개발을 위한 일관된 환경을 제공한다.
우린 gem의 dependency관리하는 기능을 이용할 것이다.
node.js에 npm이나 python pip과 같은 역할이라고 생각해도 될듯하다 추후
bundle install을 이용하여 Gemfile에 있는 젬들을 설치할 것이다.
여기까지 준비과정은 모두 마쳤다. 이제 다양한 Jekyll Themes에서 마음에 드는 템플릿을 골라보자
- http://jekyllthemes.org/
- https://jekyllthemes.io/free
- http://themes.jekyllrc.org/
- https://github.com/topics/jekyll-theme
필자는 jasper2라는 Theme를 골라서 이용해보겠다.
테마를 가져와서 사용하는 방법은 fork와 download가 있지만
조금 더 설명하기 간편한 download를 이용하겠다.
테마를 다운받고 압축을 푼다 필자는 미리 D:/blog폴더를 준비하여
해당 폴더에 압축을 풀었다. 혹시 CMD를 두려워하는 사람을 위해 자세하게 적겠다.
필자는 명령 프롬프트(cmd)를 이용하여 진행하였다.
C:\Users\com> D: // D드라이브로 이동
D:\>cd blog // blog폴더로 이동
D:\blog>bundle install // 해당 폴더 Gemfile에 있는 젬 설치하는 명령어
다음과 같이 표시 된다면 정상적으로 설치가 된것이다.
이제 jekyll을 이용하여 사이트를 빌드하여 로컬 서버에 적용한다
D:\blog> bundle exec jekyll serve
여기서 끝났다면 좋겠지만 아쉽게도 아래처럼 에러가 하나 발생한다 다른 테마에서도 발생안할수도 있지만 혹시 발생한다면 아래에 있는 문구를 복사하여주자
그리고 해당 테마가있는 폴더로 와서 Gemfile을 열어준다 필자는 워드패드로 열어서 이용했다. 해당 파일 가장 아래에 위에서
복사한 문구gem 'wdm', '>= 0.1.0'를 붙여 넣고 저장해 준다.
다시 CMD창으로 넘어와 ctrl-c로 작업중지를 해준다. 두 번 눌러주면 될 것이다.
그리고 bundle install을 다시 실행해 주자.
설치가 완료되면 다시 bundle exec jekyll serve를 입력해주자.
그럼 아래와 같이 나올 것이다. 이제 로컬 서버가 열렸다.
표시된 주소를 브라우저창에 입력해보면 해당 블로그가 잘 열린것을 확인 할 수 있다.
이어지는 부분은 다음 블로그에서 이어서 작성하도록 하겠다.