왜 Jekyll인가?

잘 정리된 글들이 많이 있다.

• 다 만들고 난 후에 발견한 따끈따끈한 좋은 글: 한 미국 변호사의 서랍
• 내 글을 오래 남기기 위한 블로그 선택
• Jekyll 기반의 GitHub Pages에 블로그 만들기
• WordPress 에서 Jekyll로
• kakao 기술 블로그가 GitHub Pages로 간 까닭은
• WordPress를 버리고 Jekyll로
• Tistory에서 Jekyll을 이용하여 GitHub Pages로 블로그 이전
• Jekyll, 즐겁게 사용하기
• 난 10년된 워드프레스에서 Jekyll로 마이그레이션
• From Wordpress To Jekyll
  • 한량넷 Jekyll 글모음
• 정적 웹사이트 생성기의 역습 - 동적 스크립트를 넘어 다시 정적 컨텐츠로

디자인 영감을 받은 사이트

• 스포카의 제목 폰트
• 워니님 블로그의 timeline css style
• 잡담 페이지
• 아이콘을 구한 대박 사이트 Flaticon
• Sitemap 참고하러 갔다가 발견한 블로그
• al-cion
• SVG editor

Done list & 기술적인 도움을 받은 사이트

• Jekyll 설치
  • Jekyll을 사용하여 GitHub Pages 만들기
  • Build A Blog With Jekyll And GitHub Pages

  $ gem install jekyll
  ~ $ jekyll new my-awesome-site
  ~ $ cd my-awesome-site
  ~/my-awesome-site $ jekyll serve
  # => 이제 브라우저로 http://localhost:4000 에 접속
  

  • Jekyll로 Github Pages 사용하기
• 로컬 웹서버 가동
• Github page 저장소 생성

• 로컬저장소와 Github 저장소 싱크하는 스크립트 만들기

  # 타이핑하기 쉽게 m 이라는 파일을 만들고 다음과 같이 작성
  
  #!/bin/bash
  git pull
  git add . -A
  echo -n "Input commit message: "
  read input
  git commit -m "$input"
  git push origin master
  
  # 터미널에서 다음 명령어로 m 파일 스크립트 생성
  chmod +x m
  
  # 터미널에서 다음과 같이 스크립트 실행
  ./m
  

• 웹서버 가동
• 도메인 연결
• Pithy theme fork & customizing
• 나눔고딕 웹폰트 적용
• readmore 구현

• 파비콘(favicon)

  <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico"/>
  

• 마크다운 엔진

  • 놀부님의 블로그

    RDiscount는 C로된 마크다운 프로세싱 엔진이다. [sudo] gem install rdiscount로 설치한다. kramdown과 redcarpet 등도 동일한 방법으로 설치할 수 있다. 기본 마크다운을 사용한다면 차후에 좀 더 필요성을 느낄 때 설치하여도 된다.

    GitHub에서는 2016년 5월 1일부터 kramdown 하나만 지원한다. 자세한 것은 A look behind our decision to standardize on a single Markdown engine for GitHub Pages를 참조한다.

• 마크다운으로 이미지 정렬
• 반응형 디자인
  • 참고
• 카테고리 #name tag 바로가기
• 유튜브 임베딩
• 태그
• 태그 스타일
  • 이 소스코드에서 tag를 tag[0]로 바꿔야 한다.
• 이미지 캡션

  • 캡션 넣기

    이미지 캡션 다는 문제는 caption.js를 가져다 사용했다. 워드프레스의 경우는 Shortcode를 사용해서 이미지 캡션을 만들었지만 caption.js은 img 태그의 alt 정보를 읽어와서 캡션으로 만들어준다. Markdown 가독성 면에서도 아주 좋아지니 일석 이조인듯.

  • Making Markdown more HTML5 with Kramdown
  • Including and managing images in Jekyll
    • <fig>\{\% include image name="img.jpg" caption="출처: instagram.com/mooooonmi"\%\}</fig>
  • Jekyll figure
• 퍼머링크 스타일
  • _config.yml 파일에 permalink: /:year/:month/:day/:title 추가
• 태그
  • Use Tags and Categories in your Jekyll based Github Pages without plugins
• Liquid 문법
  • 문법
  • 스트링 필터
• Pagination (v3.3 에서는 Jekyll paginate 지원 중단)
• Previous/Next link
  • 참고
• 태그 시스템/아카이브 페이지/전체글 목록
• google 검색창 달기
• google analytics
• 구글 검색에 노출하기
• 댓글
  • 댓글 잠금

• 이모지 플러그인 설치

  sudo gem install jemoji
  

  .emoji {
  display: inline !important;
  margin: 0px 0px 5px 0px !important;
  border-radius: 0px !important;
  }
  

• 워드프레스에서 Jekyll로 이전

• wd2md.py을 Jekyll 스타일에 맞게 수정

  # 1. Filename: Y%%m%d > %Y-%m-%d
  # 2. Front Matter:
  f.write(‘—‘)  
  f.write(‘layout: post \n —‘)  
  'post_name', # > 삭제  
  name = data.get('post_name', '').strip() # > 다음과 같이 수정  
  name = data.get('post_id', '').strip()  
  # title은 []로 시작하면 안 된다.
  # title에 ‘,' 가 있으면 안된다. (), &, , 는 된다.   
  python wp2md.py wordpress.xml # 실행
  

포스팅 하기

• rake 를 알게 된 곳
• 자동화 매크로 (적용하지 않음)
  • http://halryang.net/automation-for-jekyll-posting/
  • 이미지 삽입 매크로
• SShareX로 마크다운으로 글을 쓸 때 블로그에 쉽게 이미지를 삽입하
• 웹기반 마크다운 에디터 prose.io
• 마크다운 문법
  • GFM (Github Flavored Markdown) 문법
• Atom 에디터에 github theme 설치
• 코드 하이라이팅
  • Python 기반의 Pygment를 사용할 수도 있지만, Ruby 기반의 Rouge를 사용할 수도 있다.
  • Rouge 언어 식별자