Github Page와 Jekyll로 웹 사이트 제작하기 (블로그,포트폴리오)

웹사이트를 제작하여 무료로 호스팅까지 할 수 있는 방법이 있습니다. Jekyll라는 오픈소스로 정적 웹 사이트를 생성한 후 Github pages를 이용하면 무료로 정적 웹사이트를 호스팅이 가능합니다. Github Page와 Jekyll를 이용하면 개인 블로그, 포트폴리오, 이력서 등 다양한 사이트를 제작하여, URL만 배포하면 누구든지 콘텐츠에 접근 가능하도록 환경 구축이 가능합니다. 이번 포스팅에서는 Github Page와 Jekyll로 이력서, 포트폴리오, 블로그에 해당하는 웹 사이트를 제작하고 호스팅 하는 방법에 대해 다루어 보겠습니다.

Jekyll 기반 웹 사이트 생성하기

Jekyll는 오픈소스 정적 웹사이트 생성기입니다. 웹사이트 생성에 앞서, Jekyll 실행환경을 먼저 구축해줍니다. 설치방법은 Jekyll 공식 홈페이지의 Quickstart의 가이드를 따라 진행하여 설치 및 정상 설치 여부도 확인할 수 있습니다.

Quickstart

Quickstart메뉴에서 노란색으로 표시된 Requirements를 클릭하시면, Jekyll 실행환경을 구축하는데 필요한 가이드라인이 나와있습니다. 참고하셔서 실행환경에 필요한 소프트웨어를 설치합니다.

Jekyll 사용을 위한 최소 환경

소프트웨어 설치가 완료되었으면, 아래 가이드에 따라 명령어를 실행하여 로컬 환경에서 웹 사이트가 접속되는지 확인합니다.

Jekyll 빌드 및 실행 명령어

gem install jekyll bundler

C:\test>jekyll new myblog
Running bundle install in C:/test/myblog...
  Bundler: Fetching gem metadata from https://rubygems.org/..........
  ...
New jekyll site installed in C:/test/myblog.

C:\test\myblog>bundle exec jekyll serve
Configuration file: C:/test/myblog/_config.yml
            Source: C:/test/myblog
       Destination: C:/test/myblog/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 1.428 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 Auto-regeneration: enabled for 'C:/test/myblog'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

명령어 실행이 성공하였다면, 웹 브라우저 상에서 http://127.0.0.1:4000 또는 http://localhost:4000을 입력하였을 때 아래와 같이 웹사이트가 출력하면 정상적으로 Jekyll 실행환경이 구축된 것입니다.

Jekyll 기반 웹 사이트 출력 화면

기본 예제 테마에서 사이트 제작을 진행해도 되지만, Jekyll는 다양한 웹사이트 테마을 제공합니다. http://jekyllthemes.org/ 에 접속하시면, 다양한 웹사이트 테마도 무료로 제공하고 있는 것을 볼 수 있습니다. 이를 활용하여 개발자, 프로그래머, 기획자, 디자이너용 이력서 또는 포트폴리오를 만드실 수 있고, 또한 개인 블로그 사이트도 제작할 수 있습니다.

Jekyll Themes

사이트에는 다양한 테마를 제공하고 있으며, 다운로드한 테마를 실행하는 법은 프로젝트별로 다르지만, 테마를 배포한 저자가 README.txt에 실행하는 방법을 가이드하고 있습니다. 테마를 사용하는 방법은 아래와 같습니다.

1. Jekyll 테마 선택
2. Download 또는 Homepage를 클릭하여 Github에서 소스코드 다운로드
3. README.txt 파일에서 windows 또는 Linux 환경에 맞는 프로젝트 실행 가이드 확인 후 명령어 실행
4. 로컬에서 사이트 실행 여부 확인

예시로, Portfolio Jekyll Theme로 프로젝트를 다운로드하여서 로컬에서 사이트를 실행해보겠습니다.

Portfolio Jekyll Theme

소스가 저장되어 있는 github 사이트의 readme에서 Local Installation을 확인해 보니, bundle install과 jekyll server 명령어를 치면 로컬에서 구동이 된다고 하니, 그대로 실습해보겠습니다.

Portfolio Jekyll 프로젝트 실행방법

bundle install, jekyll serve를 명령어로 실행한 다음, 브라우저에 http://localhost:4000을 입력하니 웹사이트가 정상적으로 출력되네요. 

C:\test\portfolio-jekyll-theme-gh-pages>bundle install
fatal: not a git repository (or any of the parent directories): .git
Resolving dependencies...Fetching gem metadata from https://rubygems.org/
Using public_suffix 4.0.7
...
Bundle complete! 1 Gemfile dependency, 33 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

C:\test\portfolio-jekyll-theme-gh-pages>jekyll serve
fatal: not a git repository (or any of the parent directories): .git
Warning: the running version of Bundler (2.1.4) is older than the version that created the lockfile (2.3.12). We suggest you to upgrade to the version that created the lockfile by running `gem install bundler:2.3.12`.
Configuration file: C:/test/portfolio-jekyll-theme-gh-pages/_config.yml
            Source: C:/test/portfolio-jekyll-theme-gh-pages
       Destination: C:/test/portfolio-jekyll-theme-gh-pages/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 0.72 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 Auto-regeneration: enabled for 'C:/test/portfolio-jekyll-theme-gh-pages'
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.

Portfolio jekyll 구동화면

해당 테마를 수정 및 실행할 수 있는 환경 구축이 완료되었습니다. Jekyll 테마는 HTML, CSS, Javascript코드 수정 없이 웬만하면 YML 파일 수정만으로도 사이트를 생성할 수 있도록, 프로젝트가 구성되어 있습니다. 프로젝트 내부 소스 디렉터리를 참고해야, 어느 부분을 수정하면 될지 감을 잡으실 수 있습니다. Html, CSS, Javascript를 다루실 줄 알아야 Jekyll 테마를 잘 활용 가능하니, 웹 프로그래밍(HTML, CSS, Javascript)에 관한 지식이 필요하다는 점 참고 바랍니다.

Jeykll 테마를 활용하면, 웹사이트를 생성하여 사용자가 원하는 대로 포트폴리오, 블로그, 이력서 사이트를 제작할 수 있습니다.

Github Page 웹사이트 호스팅 하기

Jekyll 테마로 만든 사이트를 github에 소스코드를 업로드해야만, github page기능을 활용해 호스팅이 가능합니다. Git 사용법을 아신다는 가정하에 진행하겠습니다.

우선, github에서 업로드할 위치에 해당하는 Repository를 생성해줍니다.

github repository 최초 생성

 

생성된 리포지토리에 접속하면, 아래와 같이 repository에 소스코드를 업로드하는 명령어가 있습니다. 아래 명령어를 참고하여, git Repository에 소스코드를 업로드하였습니다.

github repository 생성 화면

git init
git add .
git commit -m "new commit"
git remote add origin https://github.com/shcheon/portfolio.git
git push -u origin main

명령어 수행 후, 생성한 Repository에 접속해보면, 소스코드가 업로드 완료된 것을 볼 수 있습니다.

Portfolio Jekyll Themo fork한 결과

드디어, github page를 설정해줄 차례입니다. Repository에서 Settings, Pages, Branch 순서로 메뉴에 진입한 후 Main으로 지정하고 Save버튼을 눌러줍니다.

github page 설정

아래와 같이 발행이 될 준비가 되었다는 메시지가 뜨면, Github page를 이용한 호스팅 설정이 끝났습니다. 아래 나와 있는 https://shcheon.github.io/portfolio 가 URL이 됩니다.

다시 Repository 메인 화면에 들어오면, Enviroments에 github-pages에 웹호스팅 진행상태가 나옵니다.

github page 빌드 상태

Github-pages를 클릭하여 배포 기록을 볼 수 있고, Active로 status가 변경되면, 웹 호스팅이 완료된 것입니다.

github page 빌드 결과

호스팅이 완료되었으니, URL로 접속해보겠습니다. 접속이 잘 되었다면, 웹 사이트 호스팅을 성공하신 것입니다.

github pages 호스팅 화면

Jekyll로 웹사이트를 생성하고, 생성된 웹사이트 코드를 github에 배포하여 github-page를 이용하면 웹호스팅까지 가능하다는 것을 여러분은 배우게 된 것입니다. 이제는 Jekyll 테마를 여러분의 입맛대로 커스터마이징이 가능해졌습니다.