krdag 오픈소스를 활용하여...

Copyright@ 2016 All reserved by KrDAG

오픈소스활용하여웹블로그만들기

Github Pages & Jekyll


Agendasub-titles & explains

Github Pages가무엇인지,

어떻게사용하는지?

블로그에어떻게포스팅하는지,

그리고 markdown 맛보기

Jekyll은무엇인지,

그리고 Github page에 Jekyll과Jekyll Bootstrap 적용하기

왜이주제를선택하였나?

#0

#1

#2

#3

So why this subject? Github Pages Jekyll & Jekyll Bootstrap How to use this blog


#0. SO WHY THIS SUBJECT?

김지은 [email protected]

KrDAG 2016.03.31


이런오픈소스프로젝트도있어요

웹개발자가아니라저도잘몰라요

사실… 질문은안해주셨으면좋겠어요 T T


#1. GITHUB PAGES

Github Pages가뭐지?

Open Source와 Github Pages


#1. GITHUB PAGESWhat is Github Pages?

GIT is a software

- 소프트웨어개발을위한코드관리소프트웨어- 분산된버전들을관리하는시스템으로빠른속도를보장- 2005년처음으로리누즈토발즈를포함한리눅스커널개발자들에의해디자인되고개발되어짐

Github is a web-based Git

repository

Github Pages is public websites hosted and published through our sites

- Github repository에서바로 hosting 됨- Github 계정이나조직(단체) 하나당, 그리고여러개의프로젝트사이트당하나의 Github page site를가질수있음- https://pages.github.com/

- Github 자체기능뿐아니라 Git에대해서도모든분산버전의관리와소스코드관리기능을제공- 커맨드라인을사용하는 Git과는다르게웹기반의 GUI와모바일및데스크탑용 GUI도있음- 접근제어, 버그트래킹, 기능요구들, 태스크관리, 모든프로젝트에대한위키와같은기능도제공- Private repo들과무료계정들을제공되며보통오픈소스소프트웨어프로젝트를호스트하기위해사용되고있음

https://pages.github.com/


#1. GITHUB PAGESUseful advantages of Github Pages

http://adobe.github.io/

https://microsoft.github.io/

http://elinjkim.github.io/

무료호스팅

개발측면에있어서쉬운접근 (알아서해줌)

Github Repository를이용

Let’s enjoy Open Source Project

http://adobe.github.io/

https://microsoft.github.io/

http://elinjkim.github.io/


#1. GITHUB PAGESGithub Pages more information

# Only use HTTP, not HTTPS :

- 비밀번호, 신용카드번호등의민감한정보는사용하지말라고권고

- Github Pages는생성되고퍼블리싱될때 repository가 private 하더라도공개접근이 가능하므로조심

# Two types :

Github Pages files 전용의특별한레파지토리를이용 해당프로젝트레파지토리를사용

# The Automatic Page Generator

# https://help.github.com/categories/github-pages-basics/

https://help.github.com/categories/github-pages-basics/


#1. GITHUB PAGESHow to make Github Pages (user page)

# Github Pages Site: https://pages.github.com/

1. Create repository

“New repository”를클릭하여새로운레파지토리생성User page를위해이름은 <<username>>.github.io 로설정

2. 생성된 page 확인

로컬로 cloning 후, 테스트페이지생성committing 및 pushing 수행

브라우저에서 url 입력후확인

https://pages.github.com/


이게끝?

이제 UI를입혀줍시다.

“Theme” 라고불러요


#2. JEKYLL &JEKYLL BOOTSTRAP

Jekyll과 Jekyll Bootstrap이뭐지?

Github Pages에 Theme 적용하기


#2. JEKYLL & JEKYLL BOOTSTRAPWhat is Jekyll & Jekyll Bootstrap?

Bootstrap Framework

- 트위터에서시작한오픈소스프레임워크- HTML5 기반이며웹컴포턴트들의라이브러리라고할수있음- 여러웹브라우저뿐만아니라태블릿, 스마트폰도지원하며크로스브라우징을지원- 반응형웹을지향

Jekyll

- Jekyll은 Ruby로만들어진심플하고블로그지향적인정적사이트생성기- Parsing engine으로 markdown/textfile 등의다양한포맷의문서를읽어서

변환기와 Liquid라는렌더러를통해렌더링을거쳐정적페이지로생성- Github pages의내부엔진- Database가별도로필요없음

Jekyll Bootstrap

- Github pages와함께하므로자동화되고무료인호스팅서비스를제공- Twitter Theme를포함한여러 Theme를적용할수있음- Facebook을포함한 comment 기능제공- 포스트와페이지파일생성가능


#2. JEKYLL & JEKYLL BOOTSTRAPCreate Github Page with Jekyll & Jekyll Bootstrap

# Jekyll Quick Start: http://jekyllbootstrap.com/usage/jekyll-quick-start.html

# 설치환경: OS X Yosemite 10.10.3

# 순서

01User Pages를위한새로운 Github repository 만들기

RVM(Ruby Version Manager) 설치 & Ruby 업그레이드및적용

02

Gemfile을이용하여 Jekyll 설치및버전업그레이드

03

내 Github에 Jekyll Bootstrap을 clone 하기

04

rake를이용해서 theme를설치후적용하여로컬에서확인

05

원격저장소에 push하기

06

http://jekyllbootstrap.com/usage/jekyll-quick-start.html



1. User Pages를위한새로운 Github repository 만들기

1. Page의 repository로이용될새로운 repository를생성User page를위해이름은 <<username>>.github.io 로설정

“New repository” 클릭



2. RVM(Ruby Version Manager) 설치 & Ruby 업그레이드및적용

※ Jekyll이 Ruby로작성되어있으므로 Ruby를설치해줘야함(최소버전 2.0. 이상이여야함)

Mac OS 에는 Ruby가이미설치되어있음

1. Ruby 버전체크

2. Ruby 버전관리를위해 RVM을설치후원하는버전적용

3. Ruby 버전확인



3. Gemfile을 이용하여 Jekyll 설치및버전업그레이드

0. (선택옵션) 작업할임의의폴더를생성$ cd gitpages

※ Jekyll은 Ruby의 gem을사용해서설치할수있음(RubyGems: Ruby에서사용하는패키지관리자)

Gemfile이라는파일을생성한뒤명령어들을해당파일에작성후실행

1. Gemfile 생성

2. 설치할패키지들을기입참고. Jekyll gems

: https://rubygems.org/search?page=9&query=jekyll&utf8=%E2%9C%93

3. 설치수행4. Github pages에서버전업그레이드 (2에서 3으로)를권장하고있으므로업그레이드도수행

https://rubygems.org/search?page=9&query=jekyll&utf8=%E2%9C%93



4. 내 github에 Jekyll Bootstrap을 clone 하기

1. Jekyll Bootstrap repository를내 repository로 cloning

Github 원격저장소에서내로컬로복사완료!



5. rake를이용해서 theme를설치후적용하여로컬에서확인 (“The-minimum” 테마적용)

※ Jekyll Bootstrap에서지원하는기능중하나인 thema를적용시키기위해서는 rake를이용(참고. rake: Ruby로작성된빌드툴. http://rake.rubyforge.org/ )

테마적용매뉴얼: http://jekyllbootstrap.com/usage/jekyll-theming.html

Theme 미리보기(Theme Explore): http://themes.jekyllbootstrap.com/

1. Theme explore에들어가서원하는테마의 git url을복사

2. “$ rake theme:install” 명령으로해당되는테마를설치적용까지모두완료됨

3. “$ rake theme:switch” 명령을이용하면테마를변경할수있음

해당경로에설치한테마들 /themes/theme_name

http://rake.rubyforge.org/

http://jekyllbootstrap.com/usage/jekyll-theming.html

http://themes.jekyllbootstrap.com/



5. rake를이용해서 theme를설치후적용하여로컬에서확인 (“The-minimum” 테마적용)

※ Jekyll 내부에는웹서버가동작하고있어서해당웹서버를동작시켜주면 local에서확인이가능Jekyll은 4000번포트를기본적으로사용하므로브라우저에서 localhost:4000으로확인이가능

내부웹서버실행명령어

4. 변경사항이업데이트되도록하는옵션인 ‘—watch’를반영하여웹서버실행(심지어아래와같이즉각적인 debuging 메시지도출력해줌

Jekyll만설치하여적용했을때확인한모습 ▶



6. 원격저장소에 push하기

로컬에서작업한이모든것을내원격저장소인 <elinjkim.github.io>에적용 (ssh 적용안함)

origin 원격저장소설정후현재추적된것들을 push

User pages는 master branch로만적용해야하므로간편

Github page url로접속하면테마적용을확인할수있음


#3. HOW TO USE THIS BLOG

Jekyll 블로그포스팅하는방법

$ rake 명령어사용하기


#3. HOW TO USE THIS BLOGBasic Configurations

# _config.yml

Yaml 형식으로된기본설정파일이있음

블로그및사용자정보를설정. 적용할플러그인도설정할수있음 (comment, analytics 기능등)

▲ _config.yml ▶

◀기본정보수정한모습

▼코멘트기능


#3. HOW TO USE THIS BLOGPost on the blog

# 포스트들의 위치: /_posts/…

# 포스트를생성하려면?

1. 로컬에서직접문서파일을생성하거나 Github repo에서직접생성

2. $rake 명령으로 jekyll을통해생성한후 Github repo에적용 (★★★★★)

# 포스트를지우려면?

로컬의해당위치로가서파일을지운후 Github repo에적용하거나, Github repo에서직접삭제

※파일명주의! Jekyll에서 parsing할때아주중요$ rake 명령어로생성하면자동으로맞춰줌



※기존에있던 default sample 문서는지워주고 ‘$ rake’명령어로새로운포스트를생성하기

$ rake post title=”포스트제목”

자동으로날짜가입력되면서파일이생성됨

명령어에 `date="2016-02-02"`옵션으로날짜를지정할수있음

`$ rake`명령을통해서문서를생성하게되면, 해당문서의상위에는다음과같이자동으로입력됨이정보들이 parsing 되어지며 category나 tag는자동으로분류되어적용됨

※카테고리및태그가분류된모습



변경된내용을 Github 원격저장소로 push하면끝 !!


감사합니다.

krdag 오픈소스를 활용하여...

Technology