import Firebase
import UI Kit
class UIControllerview {
}
그외 일반 html 의 적용도 가능하다
중앙 정렬
그 외, 자주 쓰이는 건 이미지 링크 ! [_config.yml] (/images/config.png) 이건 로컬 경로인경우 사용한다. < img src> 나 유튜브 공유시 유뷰트에서 제공하는 < iframe> ~ 같은 경우 그대로 사용하면 된다.
그 외에는 markdown 을 참고하여 작성하면 되지만, 위에 소개한 예시 정도면 대부분을 커버한다.
마크다운 문법의 경우 지원을 하는 에디터가 매우매우 많다. 나는 Byword 를 사용 중이다. 하지만 문법에 익숙해지면 일반 텍스트 메모장 혹은 sublime text 같은 편집기로 작성해도 전혀 문제가 없다.
Convention
컨벤션이란 코딩에서 자주 사용되는 용어인데, 파일명이나 프로젝트 폴더 트리 구성을 약속된 convention 에 따라 작성하면 자동으로 설정 되는 부분을 의미한다. 루비온레일즈 같은 경우 이 컨벤션이 매우 중요하기도한데, Jekyll 을 사용할때의 convention 은 크게 두가지만 주의하면 된다
layout 부분은 post 로 대부분 둔다. 포스팅 할 때는 이부분을 수정 할일이 없을것이다
title 은 포스트에 표시될 제목이다. 제목뿐만아니라 링크될 페이지의 타이틀까지도 결정한다
category 는 말 그대로 카테고리이다. 워드프레스나 타 블로그와 달리 동적으로 작동된다. 이미 있는 카테고리를 작성하면 알아서 기존 카테고리에 추가되고, 처음 쓰는 카테고리를 기입하면 자동으로 새로운 카테고리가 등록 된다. 단 한가지만 적용 될 수 있다.
tag 는 일반 블로그 상 tag 라고 보면 쉽다. 카테고리보다 좀더 세부적인 분류를 붙일 수 있고, 검색엔진 노출에 유리하게 할 수 있다. 실제로 포스트가 많아지다보면 category 보다 tag 가 유용해진다.
파일명은 yyyy-mm-dd-title.md 이며, _post 폴더에 위치한다.
모든 Jekyll 프로젝트는 _post 라는 폴더를 갖고있다. 모든 포스팅 파일은 이곳에 위치해야하며, 블로그에 표시될 작성 일자가 앞에 붙어야한다. 실제 지킬에 노출되는 포스트는 이 시간순으로 표시되지, 업로드 순으로 표시되지않는다. title 의 경우 중간에 - 를 기입시 띄어쓰기효과가있다. 그리고 현재 날짜를 넘어가는 미래의 포스트의 경우, 현재 시점에는 표시되지 않고 해당 시점을 넘어가야 표시된다. 가령 2022년으로 표시해두면 2022년 해당 시점이 지나야 포스트가 블로그에 표시된다.
파일명 : <p> 2017-05-05-어린이날-눈치싸움 </p>
“제목: 어린이날 눈치싸움, 5, May, 2017”
포스트 업로드
위 사항을 지켜 포스트를 작성하고나면, .md 파일이 제목 컨벤션을 가진 채로 _post 폴더 안에 위치하게 된다. 업로드 하는법은 jekyll 설치때 자주 사용했던 git 명령어로 github.io 로 밀어 넣는다고 생각하면 된다
gitadd*gitcommit-m"post"gitpush
이렇게 밀어 넣고 약 2분 정도 있으면 자신의 jekyll 블로그가 변경 된 걸 알 수 있다.
이렇게 지킬 설치 방법과 지킬 포스트 작성에 대해 알아보앗다 다음부터는 내가 이 블로그에 남기고자했던 포스트를 꾸준히 jekyll 을 이용해 업로드 하도록 하겠다.
지킬 (Jekyll) 은 정적사이트나 블로그를 만드는 솔루션이다. 널리 알려져있는 워드프레스와 같다고 보면되는데, 차별화 되는 점은 워드프레스에 비해 블로깅과 정적사이트를 좀더 쉽게 만들고 가벼운 수준에서 쭉 운영해 나갈 수 있다는 점과, github 에서 pages 라는 서비스를 통해 무료로 호스팅을 해 나갈 수 있다는 점이 있겠다.
그간 여러모로 블로깅을 해나가고싶었지만, 귀찮기도하고 늘 아직 일천하다는 생각이 있어 혼자 보는 로깅용 정도로만 하고 있었다.
최근 기존 스타트업 전략이나 제품 기획외에 개발이나 제품디자인, 딥러닝 등 내가 커버해야하는 공부나 업무분야가 크게 확장되면서 자연스럽게 정보를 구해내는 소스도 다르게 되었는데, 이제는 대부분의 매체가 블로그, github, medium, youtube 등 특정 개인의 제작되어 오픈 어카이빙 되어있는 컨텐츠라는걸 깨닫게되고, 나도 하나 가져야겠다 싶어서 시작하게 되었다.
아무래도 기존 블로그나 컨텐츠, SNS 등 활동들을 한 로그가 필요했는데, 나는 거의 대부분이 사적인 로그였고 이거를 공개해서 재심사를 신청하기도 민망한 형태라서, 브런치를 가기위해 위 서비스 중 하나에서 블로깅을 하기로했다. 그렇다. 이 블로그는 브런치를 입성하기 위한 용도이다.
여러모로 검토하다가 웹 기반 블로그 서비스는 나에게 맞지않는다고 판단하였고 (비싸게 돈주고 산 키보드를 자주 쓰고싶었고), 워드프레스와 Jekyll 사이를 고민하다가 Jekyll 로 결정했다. 그 이유는 다음과 같다
텍스트기반의 블로깅 환경 - Jekyll 은 markdown 이나 html 로 글을 작성해야한다. 텍스트로만 작성해야하고, 이미지-비디오등 링크는 링크 태그 혹은 링크 마크다운을 통해 삽입해야만 하는 불편한 환경이다. 그런데 최근 나는 마우스를 사용하기보다는 대부분의 시간을 소스코드 편집에 쓰고 있었기 때문에, 이부분은 오히려 장점이었다
지나치게 복잡해진 워드프레스 - 워드프레스는 이제 모르는 사람들이 없을 정도의 범용 도구이다. 사이트 저작용으로 쓰이기도하고 본디 목적인 블로깅용으로도 쓰이긴하지만, 제대로 블로깅을 위해 설치 해보고 여러가지 플러그인을 시험해본결과, 사이트 저작용 기능이 많아져서인지 몹시 무거워졌음을 확인 할 수 있었다. 그리고 워드프레스 환경에서 단축키도 많지않다는 점 때문에, 내게는 무겁고 - 복잡해 보이는 설치형 솔루션 이었다
github 과의 연동 - github 이 정식으로 지원하고, 무료로 호스팅을 제공한다는 매력이 있다. 그간 텀블러나 티스토리에 개인용 로그는 내 개인 도메인 을 연결해 쓰고있었는데, 워드프레스 설치를 위해 알아본 대부분 서비스는 작게는 월 500원부터 5000 원까지 유료였다. 소액이지만 고정적인 지출처를 늘리기가 번거로웠고, 나는 이미 github 유료 유저였으며, 최근 가장 자주 방문하는 사이트가 github 이었기 때문에 그냥 ‘무료’ 보다도 ‘관리의 이점’ 이라는 측면에서 매력적이었다.
github.io - 사실 이 도메인의 간지가 jekyll 을 선택한 이유중 50% 는 차지했다고 봐도 무방하다. github pages 를 통해 jekyll 을 활성화 할 경우 github 은 username.github.io 형태의 url 을 무상으로 만들어준다. 그런데 이제 github.io 는
>'나 tech 좀 알고 이걸로 밥도 좀 먹고 살아'
의 쿨한 상징과도 같아서 이에 이끌려 결정하였다. (워드프레스가 무료호스팅이며, 지킬수준으로 가볍고 텍스트 기반이라 할지라도 이것때문에 jekyll 을 선택했을 것이다 * ^^ * )
지킬 설치하기
지킬을 설치하는 방법은 두가지로 나뉜다.
github pages 에서 안내하는대로 거의 codeless 하게 설치하고 실행한다. 이 경우 github 환경설정에서 theme 등을 선택 할 수 있어서 대부분 블로그 서비스와 비슷하게 이용하면 되겠다
github pages 에서 안내하는 초반 git clone 을 만든뒤에 jekyll 을 컴퓨터에 설치하여 local 하게 post 를 작성하고, git push 를 통해 업데이트 하는 방법
/// 참고로 1번방법을 그대로 따라해서 jekyll 을 활성화 시키려면 튜토리얼내에 echo 명령어를 사용해서 만든 index.html 을 마지막에 꼭 지워줘야한다. 설정을 이리저리 바꿔도 Hello world 만 보고싶지않다면…
codeless 한 환경은 사용은 쉽지만 위에 말한 장점을 충분히 살리기 어렵기때문에 처음에 다소 어려워도 컴퓨터에 설치하도록 한다. 나는 맥 환경에서 설치를 진행하였다. 설치는 간단하지만 jekyll 은 ruby gem 환경이므로, 명령어 하나하나를 이해하려면 ruby 를 어느정도 알아야한다. 초기 설치시에만 ruby 관련 명령어를 쓰고 완료된 뒤엔 ruby 쳐다볼일 없으니 그냥 그대로 따라 치는게 편하다.
www.github.com 에서 계정을 만든다
계정을 만든뒤 “create repository” 클릭
repository name 을 깃헙계정이름.github.io, 만약 계정이름이 jtkim 이라면 jtkim.github.io 를 입력한다
public 과 private 을 설정하면되는데, 이는 github 이나 googling 을 통한 공개여부를 결정한다. 오픈소스 / 배타적소스 라고 보면 될 것 같다. private 으로 설정하려면 월단위 과금을 선택하거나, 학생 특전을 받으면된다. 그런데 공개 블로그에는 그렇게 까지 보호할 만한 자료는 없을것이므로 그냥 public 으로 해도 무방하다.
init readme.md 를 체크한뒤 repository 를 만든다
그 뒤 초기 git 설정 메시지가 나오는데, 익숙하거나 해당 메시지에 익숙하신분들은 그대로 설정하면 되고, 아니면 아래 메시지를 따르면 된다
터미널을 실행한다
desktop 이나 document 같은 접근하기 편한 경로로 이동한다.
cddesktop// or
cddocument
다음 코드를 기입한다
gitclone"https://깃헙유저네임.github.io"
만들어진 clone 폴더에 들어가서, git 을 제출(commit) 한다.
cd깃헙유저네임.github.io// 해당 폴더로 진입
gitadd--all// git init
gitcommit-m"첫번째로 코드와함께 제출할 메모"// git commit
gitpush-uoriginmaster// 이 이후부터는 git push 명령어만 입력하면된다
이제부터 컴퓨터에 github 과 연동되는 jekyll 을 설치하는 작업이다. 현재까지 있던 github.io 에서 벗어난뒤 루비 버전을 확인 후 지킬을 설치한다.
cd..// 해당 폴더를 벗어난다
ruby-v// ruby 버전을 확인한다. 2.3 점대 버전 이상이면 된다. 대부분의 맥환경에서는 걱정할일 없다
sudogeminstalljekyll// 지킬 gem 을 깐다
jekyllnew아무폴더이름// 지킬이 적용된 파일 폴더를 만든다
cd아무폴더이름// 만들어진 폴더로 이동한다
jekyllserve--watch// 명령어 입력후 사파리나 크롬을 연뒤 http://localhost:4000 으로 가보면 jekyll 이 컴퓨터에서 돌고있음을 확인 할 수 있다.
지금 만든 폴더의 내용물을 빠짐없이 아까 git 을 clone 한 폴더로 복사한다. 빠짐없이 복사하기위해선 맥의 command + shift + > 를 누르면 숨김파일까지 나오는데, 해당 파일까지 이동시키면 된다. 터미널을 이용하지 않아도된다.
다시 터미널을 통해 github.io 폴더로 이동한뒤에 이제 jekyll 을 git 에 올려준다
cdusername.github.iogitadd*//git add --all 과 같은 명령어
gitcommit-m"install jekyll"gitpush
1분 정도 기다린뒤 자신의 username.github.io 를 주소창에 입력한다. 정상 접속 되면 그대로 마무리이다.
지킬 꾸미기
지킬은 html 과 css, scss 등 customization 을 지원하지만 그렇게 해서 꾸밀거면 사실 처음부터 새로 만들고 말지…. 아래 방식을 통해 꾸미도록 해보자.
jekyll 로 운영중인 타인의 github.io 사이트를 찾는다. “tech blog github.io” 나 “design blog github.io” 로 검색해서 여러개를 방문해거나 이미지 검색해서 자신이 원하는 디자인과 기능을 갖춘 테마를 찾는다.
그런 github.io 의 블로그들은 자신이 쓰는 테마를 자신의 git 에 opensource 로 공유해둔다. github.io 의 메뉴중에 직접 자신의 git 으로 대부분 링크를 걸어두었으니 그곳으로 이동한다.
해당 git 으로 이동한뒤 우측 상단 Star, Folk… 등등에서 folk 를 누르고 자신의 계정으로 해당 jekyll theme 를 복사해온다. 매너인 star 누르기를 잊지 말자.
복사된 자신의 계정 내 theme git 으로 가서 우측 상단에 초록색으로 빛나는 “Clone or download” 를 클릭하여 다운로드 받는다.
자신의 username.github.io 컴퓨터 폴더로 이동하여 gemfile, gemfile.lock 를 제외하고 전부 다른곳으로 이동시킨다 (삭제하지말고 혹시모르니 백업하라는 의미). 간혹 gitignore 라는 파일때문에 아래 절차가 진행이 안될수 있다. 이 경우 깔끔하게 이동시키려면 역시 command + shift + > 를 활용.
다운로드 받은 테마파일을 내 username.github.io 로 복사한다
제대로 복사되었는지 확인한다
cdusername.github.io// 해당 폴더로 이동
jekyllserve--watch// 명령어 실행 후 사파리, 크롬을 통해 localhost:4000 으로 이동해서 확인
터미널을 실행시킨후 커밋, 푸쉬한다
cdusername.github.io// 해당 폴더로 이동
gitadd*// 변경사항 add
gitcommit-m"copy theme"// 남기고 싶은 해당 버전의 commit 에 대한 메모를 기입
gitpush
username.github.io 사이트에 방문하여 제대로 적용 되었는지 확인한다. 더미 컨텐츠와 튜토리얼을 통해 테마 제작자가 남긴 주의사항을 염두에 두고 향 후 블로깅을 하면 된다
컴퓨터 내 github.io 폴더에서 _config.yml 을 연다. 거기서 자신의 이름, 컨택트등 정보를 기입해준다. 기입이 완료되면 git push
jekyll github io blog 완성
이렇게 해서 설치가 완료되었다. 다음은 jekyll 과 markdown 을 이용한 라이팅 방법을 포스팅 해보도록 하겠다.
