GitHub Pages 만들기 일대기 (1) - Jekyll 테스트 까지

 

Web Page!

 

내가 있는 조그마한 조직에서 웹사이트를 만들면 어떨까? 라는 말이 나왔다. 자체적으로 서버를 구축하거나, 웹서버를 하나 빌리면 어떨까라는 생각이 들었지만, 웹사이트에 탑재될 내용이 그렇게 많지가 않은데, 굳이 그럴 필요가 있을까? 라는 생각이 들었다. 결국 서비스형 블로그와 같은 인터넷 상의 웹사이트 제공 서비스를 이용하였다.

 

구글 사이트와 깃허브 페이지스

 

구글 사이트

만들게될 페이지에 적합한 서비스로 구글 사이트와 깃허브 페이지스가 적당해보였다. 구글 사이트는 바탕화면에 아이콘 옮기듯이 만들 수 있는 도구를 제공하였다. 그래서 HTML, CSS 구조를 모르는 사람도 수준급의 사이트를 만들 수 있다는 장점이 있었다. 그래서 내가 아니더라도 다른 사람들이 사이트 유지보수에 유리한 점이 많았다.

 

구글 사이트 사용 모습

 

깃허브 페이지스

반면에 깃허브 페이지스는 구글 사이트와는 달리 사이트 생성 도구를 제공하지 않았다. 사이트의 모습에 관한 파일과 글들을 직접 정해진 형식을 통해 만들어 주어야했다. 이렇게 유지보수가 어렵다는 단점이 있긴 하였지만, 깃허브 페이지스는 그만의 장점이 있었다.

 

우선은 *.github.io 주소를 받을 수 있다는 점이었다. 학술과 관련된 곳 에서 github.io 주소는 도메인을 사지 않아도 무언가를 정말 코딩 쪽으로 열심히 할 것 같고 전문적인 기분을 주는 주소였다. 그리고 엄청나게 멋진 테마들이 MIT나 GPL등 오픈소스로 배포되고 있다는 점들이 있었다.

 

수많은 테마들 중 Lanyon이라는 이름의 테마, 자바스크립트 사용 없이 작동될 수 있다는 것이 신기했다.

 

무엇을 고르면 좋을까 생각하다가, 둘 다 만들어보기로 했다. 나는 깃허브 페이지스로 만들고, 다른 사람은 구글 사이트를 만든 다음, 뭐가 더 나을 것인지 판단해보기로 하였다.

 

깃허브 페이지스 일대기

깃허브 페이지스는 사용해본 적이 없어서 인터넷 글들을 많이 참조하면서 직접 부딪혀 볼 수밖에 없었다. 내가 찾아본 깃허브 페이지스의 작동 방식은 이러했다. 

 

 

Jekyll 프로그램 로고

 

깃허브 페이지스는 지킬(Jekyll)이라는 웹사이트 페이지 생성 프로그램으로 작동한다. 사용자가 Jekyll 형식으로 웹사이트 뼈대와 내용을 만들어서 깃허브에 업로드를 하면, 깃허브에서는 Jekyll을 이용하여 github.io 주소를 가진 웹사이트로 만든다.

 

즉 지킬에 맞는 웹사이트 레이아웃과 포스트 파일들을 업로드 하면 된다는 말이었다.

 

어떻게 만들면 좋을까 생각하다가 우선 컴퓨터에 Jekyll을 설치해 보기로 하였다. 리눅스를 사용하는 것이 귀찮아서 윈도우에서 작업하였다.

 

윈도우에 Jekyll 설치하기

리눅스 배포판들과는 달리 윈도우에는 git부터 리눅스 환경에 맞게 설치를 해주어야 했다. 깃허브 사이트에 설명이 잘 되어 있긴 했지만 어려운 건 마찬가지였다.

 

Jekyll은 ruby라는 언어를 사용하는데, 해당 언어는 윈도우에서 기본적으로 지원을 하지 않는지 별도로 ruby를 사용하는데 필요한 파일들을 설치해주어야 했다. 설치 순서는 아래와 같다.

 

1. rubyinstaller를 설치한다. Jekyll 설치 설명서에는 설치시, installer에 설정된 기본 옵션을 사용하라고 명시되어 있어서 MSYS2를 설치하는 방향으로 진행했다.

 

rubyinstaller 설치 화면

2. 파일 복사가 끝나고 나면 ridk install을 할 것인지 묻는 창이 나온다. 확인을 누르면 명령 프롬프트 창이 하나 띄워진다. 3번을 누르고 엔터키를 눌려서 설치를 완료한다.

 

설치 완료 화면

 

명령 프롬프트 창

 

3. 명령 프롬프트창이나 Powershell을 열어서 'gem install jekyll bundler' 를 입력한다.

 

Microsoft Windows [Version 10.0.17763.973]
(c) 2018 Microsoft Corporation. All rights reserved.

C:\Users\***>gem install jekyll bundler
-------------------------------------------------------------------------------------

 

Jekyll 웹페이지 테스트

 

웹 개발에 능력이 있는 사람이라면, 명령 프롬프트 창에 'Jekyll new .'를 입력하여 Jekyll에 필요한 기본 뼈대 파일들을 생성하여 입맛대로 페이지를 뚝딱뚝딱 만들고 깃허브에 올려서 페이지를 마음껏 구경하면 되지만, 나에게는 그 과정이 힘들었다.

 

깃허브의 도움말에는 git을 설치하여 다뤄보라는데, git을 많이 써보지 않아서 깃허브에 올라간 파일은 어떻게 지워야 하는지도 헷갈렸고, 파일을 잘못 수정하여서 다시 원상복구를 하고 싶은데 당최 revert는 또 왜 안 되는 것인지, 404오류는 또 왜 발생하는 것인지. 익숙하지 않은 탓에 여러모로 불편한 점을 겪었다.

 

우선은 깃허브에 업로드 문제를 뒤로 미루고, Jekyll 페이지 생성을 먼저 시험해 보기로 했다.

 

1. 원하는 Jekyll 테마를 다운로드 하고 압축을 푼다. 당연하지만 Jekyll 테마는 구글 검색을 통해서 쉽게 검색할 수 있다.

 

2. 명령 프롬프트 창에서 압축을 푼 Jekyll 테마 폴더로 이동한 뒤, 'Jekyll serve' 를 입력하여 서버를 연다.

 

C:\Users\latitude>cd Desktop

C:\Users\latitude\Desktop>cd test

C:\Users\latitude\Desktop\test>jekyll serve
Configuration file: C:/Users/latitude/Desktop/test/_config.yml
            Source: C:/Users/latitude/Desktop/test
       Destination: C:/Users/latitude/Desktop/test/_site
 Increㅈmental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 1.265 seconds.
 Auto-regeneration: enabled for 'C:/Users/latitude/Desktop/test'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

 

3. 로컬 주소인 http://127.0.0.1:4000/ 로 접속하여 표시가 잘 되는지 확인한다.

 

로컬 주소에 접속한 모습

 

이제 테스트 환경은 다 만들었고, 다음번에는 글 작성 및 깃허브 페이지 사이트 만들기를 하면 될 것 같다. 그냥 구글 사이트 쓴다고 할 걸 그랬나라는 생각이 조금씩 들었다.

 

 

[본문 SVG 파일]

 

jekyll-logo-black.svg

0.20MB

 

[출처]

 

구글 사이트 사진 - 출처: gsuite.google.co.kr/products/sites

Layon 테마 적용 사진 - 출처: github.com/poole/lanyon

Jekyll 프로그램 로고 - 출처: parkr CC BY 4.0 License