Jekyll 정적 블로그 만들기
github 정적호스팅을 이용한 개발 블로그 만들고 운영하기
joeunpark@gmail.com
Jekyll 로 블로그를 만들면 이런 점이 좋아요.
2
개인 뿐만 아니라 여러 테크회사에서도 사용하고 있습니다.
3
4
5
6
7
포트폴리오나 이력서로 활용할 수 있습니다.
8
github 에서 제공하는 정적 페이지 기능을 가장 간단하게 사용해 봅니다.
9
10
blog 라는 프로젝트 페이지를 만든다고 가정할게요.
11
settings 에 가서 master branch 로 선택해 줍니다.
해당 url로 정적페이지 접근이 가능합니다.
12
테마를 선택해서 정적 페이지를 만들 수도 있습니다.
13
해당 URL 로 접근하면 정적 페이지가 퍼블리싱 되었습니다.
14
이 테마로 만들어진 페이지 입니다.
15
이 페이지는 index.html 로 만들어 졌으나 index.md로 만들어도 됩니다.
16
저도 비슷한 방법으로 정적 페이지를 만들었어요.
스쿨에서 하시는 프로젝트 페이지를 이렇게 만드시고 포트폴리오로 활용해 보세요.
https://corazzon.github.io/OpenDataWrangling/
17
잠깐 질문?
이렇게 정적 페이지로 퍼블리싱이 가능한데 왜 우리는 서버를 운영할 까요?
18
Jekyll 블로그가 처음이라면
remote-jekyll로 시작합니다.
19
깃헙 저장소 만들기
저장소명은
yourname.github.com
또는
yourname.github.io
로 만듭니다.
(프로젝트명으로 만들 수도 있지만 이 방법으로는 좀 까다롭기 때문에 처음엔 위 저장소명을 권장해요.)
20
중요! README.md 파일을 생성 해 주어야 github 웹 페이지 안에서 작업이 가능합니다.
Jekyll은 루비로 만들어져 있어요.
21
22
마음에 드는 테마 고르기
23
우리는 star를 가장 많이 받은 minimal-mistake로 만들거에요.
단, 이미 yourname.github.com 혹은 yourname.github.io 가 있다면 굳이 새로 만들지 않으셔도 됩니다.
24
25
_config.yml 파일을 생성합니다.
26
잠시! YAML은?
YAML은 XML, C, 파이썬, 펄, RFC2822에서 정의된 e-mail 양식에서 개념을 얻어 만들어진 '사람이 쉽게 읽을 수 있는' 데이터 직렬화 양식이다. 2001년에 클라크 에반스가 고안했고, Ingy dot Net 및 Oren Ben-Kiki와 함께 디자인했다.
YAML이라는 이름은 "YAML은 마크업 언어가 아니다 (YAML Ain't Markup Language)” 라는 재귀적인 이름에서 유래되었다. 원래 YAML의 뜻은 “또 다른 마크업 언어 (Yet Another Markup Language)”였으나, YAML의 핵심은 문서 마크업이 아닌 데이터 중심에 있다는 것을 보여주기 위해 이름을 바꾸었다. 오늘날 XML과 JSON이 데이터 직렬화에 주로 쓰이기 시작하면서, 많은 사람들이 YAML을 '가벼운 마크업 언어'로 사용하려 하고 있다.
[YAML - 위키백과, 우리 모두의 백과사전](https://ko.wikipedia.org/wiki/YAML)
27
위 링크의 _config.yml 파일을 전체 복사해서 텍스트 칸에 붙여넣기 합니다.
28
14번째 줄의 주석을 풀어줍니다.
remote_theme : "mmistakes/minimal-mistakes"
원하는 스킨으로 변경합니다.
minimal_mistakes_skin : "neon"
18번째 줄
# Site Settings
locale : "ko-KR"
title : "Today I Learned"
title_separator : "-"
name : "Today"
description : "Today I Learned"
23번째 줄
url : "https://yourname.github.io" # the base hostname & protocol for your site e.g.
baseurl : "/blog" # the subpath of your site, e.g.
위 링크의 _config.yml 파일을 전체 복사해서 텍스트 칸에 붙여넣기 합니다.
그리고 내 블로그에 맞게 수정합니다.
index.html 만들기
29
---
layout: home
author_profile: true
---
30
블로그가 잘 생성되었나 확인해 봅니다.
블로그가 잘 생성되었다면
꾸준하게 글을 써서 관리 하는 것이 더 중요해요 :)
31
_posts/2019-04-02-first-post.md
32
---
title: "Welcome to Jekyll!"
date: 2019-04-02 12:00:00 -0900
categories: jekyll update
---
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
Jekyll also offers powerful support for code snippets:
```python
def print_hi(name):
print("hello", name)
print_hi('Tom')
```
Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
[jekyll-docs]: https://jekyllrb.com/docs/home
[jekyll-gh]: https://github.com/jekyll/jekyll
[jekyll-talk]: https://talk.jekyllrb.com/
```javascript
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {
demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
}
```
33
permalink 바꾸기
34
221 줄
# Outputting
permalink: /:title/
paginate: 5 # amount of posts to show
paginate_path: /page:num/
timezone: # https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
카테고리
네비게이션
35
프로필 사진도 바꿔 볼게요.
37
38
39
프로필 사진 만들기
40
/assets/images/ 로 파일명에 입력을 해주면 새로운 폴더가 생성됩니다.
파일명까지 생성해 주어야 폴더가 생성되기 때문에 비어있는 index.html까지 만들어 줍니다.
그리고 해당 폴더에 가서 사진을 업로드 합니다.
41
폴더가 생성되었으면 파일을 업로드 합니다.
프로필 사진 만들기 _config.yml
42
107번째 줄
# Site Author
author:
name : "Your Name"
avatar : "/assets/images/bio-photo.jpg" # path of avatar image, e.g. "/assets/images/bio-photo.jpg" 사진도 추가해 봅니다.
bio : "I am an amazing person."
location : "Seoul, Korea"
프로필 사진과 위치 정보도 수정해 봅니다.
43
마땅하게 뭘 써야 할지 모르겠다면?
45
46
DONE IS
BETTER THAN
PERFECT
완벽하지 않아도 됩니다.
꾸준히 하는게 중요해요.
47
좀 더 커스텀하게 사용하고 싶다면
local PC에 Jekyll을 설치해서 github으로 배포합니다.
48
아래의 과정은 Ruby 설치 시간과 Gem 설정 시간이 오래걸려서 설명만 진행하니 각자 해보시는 걸 추천해요. 이미 remote-jekyll로 잘 설치가 되었다면 굳이 설치하지 않으셔도 상관 없습니다.
49
50
좀 더 다양한 테마를 사용해 볼 수 있습니다.
오픈소스 테마이며, 라이센스는 GPL-3 입니다.
각자의 취향에 맞는 블로그를 만들기 전에
잘 만들어진 테마를 가져와 내 블로그로 만드는 과정을 함께 합니다.
https://github.com/artemsheludko/flexible-jekyll
51
$ git clone git@github.com:artemsheludko/flexible-jekyll.git
$ cd flexible-jekyll
$ jekyll serve
$ 표시는 터미널이라는 의미 입니다.
$ 다음 글자부터 터미널에서 실행해 주세요.
52
53
블로그를 만들기 전에 로컬에서 jekyll 웹서버를 띄우기 위해 Ruby를 설치합니다.
MacOS에는 미리 설치되어 있습니다.
54
55
다음의 블로그 글을 참고 합니다.
Ruby+Devkit 2.4.4-2 (x64) 를 다음의 사이트에서 다운로드 받아 설치합니다.
https://rubyinstaller.org/downloads/
[윈도우에서 지킬 설치하기](https://blog.psangwoo.com/coding/2017/04/02/install-jekyll-on-windows.html)
56
윈도우 사용자
중간에 ‘PATH에 추가하시겠습니까?’ 부분은 반드시 체크해 주시기 바랍니다.
(환경변수 설정이 되어야 터미널에서 ruby 관련 명령이 가능합니다.)
나머지 내용은 다음 내용을 참고해 주세요.
[윈도우에서 지킬 설치하기](https://blog.psangwoo.com/coding/2017/04/02/install-jekyll-on-windows.html)
57
Ruby를 설치하면 Ruby 커맨드 프롬프트 메뉴가 생성됩니다.
해당 터미널로 Ruby를 사용해 주세요.
58
아래의 URL에서 다운로드 받아 주세요.
59
$ gem install bundler
Jekyll이 설치되고 flexible-jekyll 을 다운로드 받아 압축을 풀었다면 다음과 같이 Jekyll 서버를 실행해 볼 수 있습니다.
bundle install (sudo bundle install)
bundle exec jekyll serve --watch
60
atom 으로 해당 파일이 아닌 폴더를 열어주세요.
61
_config.yml 파일을 열어 내 블로그에 맞게 수정합니다.
62
DISQUS는 댓글 시스템입니다. 이미 구현된 서비스를 플러그인으로 붙여 사용할 거에요.
DISQUS에 회원가입을 하고 disqus-identifier를 받아옵니다.
63
64
65
66
DISQUS에 로그인을 하고 Install on Site 메뉴에 들어가 Universal Code 로 들어갑니다.
67
68
69
https://disqus.com/admin/
70
shortname을 _config.yml에 적어주세요.
_config.yml에 적어줍니다.
71
72
73
74
75
기존에 있는 .git 디렉토리를 삭제하고 다시 .git 설정을 해줍니다.
rm -Rf .git
git init
git remote add origin 내깃헙ssh경로
예) git remote add origin git@github.com:corazzon/corazzon.github.com.git
git add .
git commit -m ‘initial commit’
git push -u origin master
76
77
gh-pages로 해도 되고 master로 해도 됩니다. 해당 브랜치에 있는 파일이 블로그로 생성됩니다.
78
echo "# 내깃헙아이디.github.com" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:내깃헙아이디/내깃헙아이디.github.com.git
git push -u origin master
79
참고
remote-jekyll
GitHub 공식문서
윈도우
OSX
80
81
감사합니다.