기술 블로그(Alex)

  • Github Page
    • jekyll
  • Docker
    • guide
    • container
  • 이모저모

Jekyll 빌드에서 배포까지

Dec 18, 2018

이전 포스트에서는 로컬에서 서버를 띄워서 확인하였다.
이번 포스팅은 jasper2 테마 적용후 Github Page에 배포하는 방법까지 설명할 것이다.

사전지식

  • github.com에 Github Page를 운영할 저장소 및 빌드전 소스코드를 관리할 저장소를 생성한다.
  • Travis CI를 이용하여 소스코드가 Push 되면 Webhook을 이용하여 빌드 후 Github Page에 빌드된 파일을 Push 할 수 있다.
  • Travis CI의 과금은 오픈소스 프로젝트의 경우 무료로 사용할 수 있다. (본인은 Private Repository로 관리하므로 Makefile을 만들어서 사용한다.)
  • jasper2는 gulp를 이용하여 리소스들을 컴파일하도록 되어 있으므로, nodeJS 및 의존라이브러리들을 설치한다.

Github Repository 생성

  • 총2개의 저장소를 생성해야 한다.
    • 소스코드 관리 저장소
    • Github Page에서 사용할 저장소 (Repository Name은 username.github.io 와 같이 생성해야 한다.)

jasper2 준비

$ git clone https://github.com/jekyller/jasper2.git githubpage
# 소스코드를 받으면 package.json 파일에 의존성이 정의되어 있고 아래와 같이 다운로드 한다.
$ npm install

코드 Highlight 설치

$ gem install rouge
# 이용가능한 style 확인
$ rougify help style
# 나열된 스타일 중 원하는 스타일의 css 파일 생성
$ rougify style monokai.sublime > assets/css/syntax.css

구조 설명

Jekyll Project Structure

  • _categories : 카테고리 설정을 위한 *.md 파일들이 위치하는 디렉토리 (다음회에서 설명)
  • _data : yaml, json, csv 파일들이 위치하는 디렉토리 (데이터를 저장해 놓고 호출하여 사용)
  • _draft : 작성중인 포스트가 위치하는 디렉토리 (아직 온라인에 게시하지 않을 포스트)
  • _includes : 재사용하기 위한 파일을 관리 다른 파일에서 해당 폴더에 있는 파일들을 포함할 수 있다.
  • _layouts : index.html 또는 포스트 등등의 컨텐츠를 포장하기 위해 사용.
  • _plugins : jekyll에서 사용할 플러그인을 설치한 디렉토리
  • _posts : 컨텐츠를 관리하는 디렉토리 (파일형식 : year-month-day-title.md)
  • assets : css, image, js 등의 리소를 관리하는 디렉토리
  • output : jekyll 컴파일 후 생성되는 정적 파일들이 생성되는 위치. (기본값은 _site)
  • _config.yml : 환경설정 정보 관리

Git 서브모듈 추가

# Github Page 저장소를 현재 저장소의 output 폴더에 서브모듈로 추가한다. (삭제는 좀 번거로움)
$ git submodule add https://github.com/alexonepath/alexonepath.github.io.git output

IDE 설정하기 (Webstorm)

  • Jekyll에서는 Liquid 문법을 사용해야 하는데 개발하기 편하도록 아래와 같이 설정을 한다.
  • Highlight 및 Reformat시 Liquid 문법이 적용되도록 하기.

플러그인 설치 및 적용

  1. Twig 플러그인 설치 (Settings > Plugins > Browser repositories > Twig 검색 후 설치)
  2. 적용파일 추가 (Settings > Editor > File Types)
    • 우측 (Recognized File Types) Twig 검색
    • Registered Patterns 아래의 2개 항목 추가
    • *.html, *.liquid

Gulp Task
Gulp에 정의된 Task 들이 나열되고 해당 항목을 더블클릭하면 Task가 실행된다.

Execute gulp

설정파일 및 빌드파일 수정

_config.yml

markdown: kramdown  # Markdown 의 수정판
highlighter: rouge  # 문법 강조기로 rouge 사용 (위에서 설치함.)
paginate: 10 # 페이지당 보여줄 아이템 갯수
language: 'en-uk'
timezone: 'Asia/Seoul'
encoding: 'UTF-8'

# Website info
title: About alex
description: About alexander
cover: assets/images/blog-cover.jpg
logo: assets/images/blog-icon.png
logo_dark: assets/images/favicon.png
favicon: assets/images/common/tiger.png # 파비콘 파일위치

baseurl: /
url: https://alexonepath.github.io  # Github Page URL
production_url: https://alexonepath.github.io
source_url: https://github.com/alexonepath/githubpage # Github Page 빌드전 소스코드 저장소

# Disqus라는 댓글 서비스를 이용한다. (https://disqus.com/)
disqus: True
disqus_shortname: alexanderpath # replace with your disqus username

# 각 Post의 주소방식을 어떻게 할 것인지 정의
permalink: /:title

# gems and other configs
plugins_dir: [_plugins]
plugins: [jekyll-paginate, jekyll-feed, jekyll-gist]

feed:
  path: feed.xml

# Travis CI 설정
safe: False
lsi: False
username: alexonepath # Travis의 username
repo: githubpage  # 저장소 이름
branch: master
relative_source:
destination: ./output/  # 컴파일된 결과물(html)이 저장될 디렉토리 

exclude:
- assets/css
- node_modules
- vendor
- .travis.yml
- Gemfile
- Gemfile.lock
- GHOST.txt
- gulpfile.js
- LICENSE
- package.json
- Rakefile
- README.md
- script.py
- changelog.md
- "*.Rmd"
- .git*

Rakefile

#############################################################################
#
# Modified version of jekyllrb Rakefile
# https://github.com/jekyll/jekyll/blob/master/Rakefile
#
#############################################################################

require 'rake'
require 'date'
require 'yaml'

CONFIG = YAML.load(File.read('_config.yml'))
USERNAME = CONFIG["username"]
REPO = CONFIG["repo"]
SOURCE_BRANCH = CONFIG["branch"]
DESTINATION_BRANCH = "master"
CNAME = CONFIG["CNAME"]
# 이부분을 본인의 Github Page Repository URL 변경
GIT_URL = "git@github.com:alexonepath/alexonepath.github.io.git"

def check_destination
  unless Dir.exist? CONFIG["destination"]
     "start1"
    sh "git clone #{GIT_URL} #{CONFIG["destination"]}"
  end
end

namespace :site do
  desc "Generate the site"
  task :build do
    check_destination
    sh "bundle exec jekyll build"
  end

  desc "Generate the site and serve locally"
  task :serve do
    check_destination
    sh "bundle exec jekyll serve"
  end

  desc "Generate the site, serve locally and watch for changes"
  task :watch do
    sh "bundle exec jekyll serve --watch"
  end

  desc "Generate the site and push changes to remote origin"
  task :deploy do
    # Detect pull request
    if ENV['TRAVIS_PULL_REQUEST'].to_s.to_i > 0
      puts 'Pull request detected. Not proceeding with deploy.'
      exit
    end

    # Configure git if this is run in Travis CI
    if ENV["TRAVIS"]
      sh "git config --global user.name $GIT_NAME"
      sh "git config --global user.email $GIT_EMAIL"
      sh "git config --global push.default simple"
    end

    # Make sure destination folder exists as git repo
    check_destination

    sh "git checkout #{SOURCE_BRANCH}"
    Dir.chdir(CONFIG["destination"]) { sh "git checkout #{DESTINATION_BRANCH}" }

    # Generate the site
    sh "bundle exec jekyll build"

    # Commit and push to github
    sha = `git log`.match(/[a-z0-9]{40}/)[0]
    Dir.chdir(CONFIG["destination"]) do
      # check if there is anything to add and commit, and pushes it
      sh "if [ -n '$(git status)' ]; then
            puts '#{CNAME}' > ./CNAME;
            git add --all .;
            git commit -m 'Updating to #{USERNAME}/#{REPO}@#{sha}.';
            git push -f #{GIT_URL} #{DESTINATION_BRANCH} --quiet ;
         fi"
      puts "Pushed updated branch #{DESTINATION_BRANCH} to GitHub Pages"
    end
  end
end

Makefile

publish:
	git submodule update --init --recursive --remote
	bundle exec rake site:deploy --quiet
	@echo "Done publishing."
	@echo "https://alexonepath.github.io/"

배포

$ make publish
© Alexonepath. All rights reserved. Powered by GitHub Pages.