ysw's blog

Jekyll Development Environment

12 Dec 2018 | WebFramework

Jekyll이란?

GitHub Pages는 GitHub의 무료 정적 웹 사이트 호스팅 서비스입니다. 모든 저장소는 무료로 호스팅되는 하나의 정적 웹 사이트를 제공할 수 있습니다.

Repository의 설정에서 호스팅을 사용하도록 설정할 수 있습니다.

정적 웹 사이트의 소스 (즉, 어떤 파일이 웹 사이트의 일부로 간주되는지)는 마스터 분기, gh 페이지 분기 또는 마스터 분기 의 docs폴더로 설정할 수 있습니다. 선택한 소스 위치의 모든 파일은 웹 서버에서 처리하고 서비스합니다.

How It Works?

GitHub Pages는 정적 웹 사이트 생성기인 Jekyll을 실행 합니다. Jekyll은 Jekyll 입력(HTML, Markdown, SCSS, YAML 구성 파일 및 Liquid 의 혼합 )을 즉시 사용할 수있는 HTML / CSS 정적 웹 사이트로 변환합니다. 지킬 특유의 것이 아닌 입력은 지킬에 의해 수정되지 않은 채로 출력 디렉토리에 복사됩니다.

GitHub 페이지를 누르면 GitHub 페이지는 Jekyll을 통해 지정된 위치 (즉, the master, gh-pages branch, the docs folder of the master branch)에있는 모든 파일을 실행합니다 . Jeykll의 출력은 웹 서버에서 제공합니다.

이것은 두 가지를 의미할 수 있습니다.

1. 저장소의 내용이 지킬 입력 인 경우 GitHub의 정적 웹 사이트로 바로 변환되며이 정적 웹 사이트는 웹 서버에서 제공합니다.
2. 저장소의 내용이 이미 준비가 완료된 정적 웹 사이트인 경우 Jekyll이 수정하지 않으며 모든 파일이 웹 서버에 "있는 그대로"전달됩니다.


즉, 위의 그림에서 볼 수 있듯이 GitHub 페이지에 웹 사이트를 게시하는 몇 가지 옵션이 있습니다.
1. 지킬 입력을 생성하고, 지킬 입력을 GitHub에 푸시하고, GitHub 페이지가 Jekyll이있는 정적 웹 사이트로 변환되도록합니다.
2. 지킬 입력을 생성하고 정적 웹 사이트로 로컬 변환 한 다음 정적 웹 사이트를 GitHub로 푸시합니다.
3. 다른 정적 웹 사이트 생성기로 정적 웹 사이트를 만들거나 수동으로 처음부터 수동으로 만들고 GitHub로 밀어 넣으십시오.
4. 물론 Jekyll을 사용하여 생성한 정적 웹 사이트 출력을 다른 웹 서버에 게시할 수도 있습니다.

Jekyll Theme :

https://dashingcode.github.io/front-cover/

현재 내가 사용하고 있는 이 블로그는 터미널에서 github와 연동해서 사용하는게 아니라 그냥 템플릿 위에 css를 사용하고 있다. 그러나 어찌보면 Jekyll에서 사용하라고 준 기능을 그렇게 사용하지 않는 것은 혼자서 굉장히 힘든 길을 가고 있는것과 같다고 생각한다. 그래서 나는 지금 테마 위에 올렸던 코드들까지 전부 수용할 수 있게끔 만들어보려고 한다.

해야할 일:

1. Github 연동
2. 리눅스 환경 구축
3. Jekyll Test

1. GitHub 연동:

$sudo apt-get install git
$sudo apt-get install language-pack-ko
$sudo vim /etc/default/locale

#  File generated by update-locale
LANG="ko_KR.UTF-8"
LANGUAGE="ko_KR:ko"

# github 저장소 복제
# 예시
$git clone https://github.com/ysw0421/ysw0421.github.io

# 원격 저장소 등록
$sudo git remote add origin "저장소 URL"
$sudo git fetch origin

# 변경된 모든 파일 추가(커밋 전에 필수 실행)
$ sudo git add -A

# 아래의 명령어를 입력후 엔터 치고 변경목록이 보이면 Ctrl+o 그리고 엔터 그리고 Ctrl+x 종료한다.
$ sudo git commit

# 커밋 메세지를 입력 (하지 않으면 안됨)
$ sudo git commit -m "메세지입력"

저장소에 올리기 (계정과 암호 물어보면 입력)
# sudo git push
Username for 'https://github.com': "Username - 나같은 경우 email"
Password for '':

2. 리눅스 환경 구축:

sudo apt-get install ruby ruby-dev build-essential
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME=$HOME/gems' >> ~/.bashrc
echo 'export PATH=$HOME/gems/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
gem install jekyll bundler
jekyll build
jekyll serve

3. Jekyll Test:

1. Front Matter
2. Liquid Template System
3. Disqus
4. Google Analysis

현재 사용하고 있는 디렉토리 구조 :

.ysw0421.github.io
├── _config.yml
├── _drafts
|   ├── '2018-05-13-example-for-post-draft.md'
|   └── README.md
├── _includes
|   ├── analytics.html
|   └── disqus.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   └── Project
├── _site
├── asset
|   └── Project
├── contents
|   ├── categories
|   |    └── index.html
|   └── tags
|        └── index.html
├── css
|   ├── categories.css
|   ├── pageframe.css
|   └── front.css
├── imgs
├── CodeExample	
|   ├── 'R_code'
|   ├── 'Python_code'
|   ├── 'JavaScript_code'
|   └── 'C#_code'
└── index.html # can also be an 'index.md' with valid YAML Frontmatter