GitHub Pages를 이용해 기술블로그 운영하기

Github Pages

• GitHub 저장소의 내용을 정적 사이트로 호스팅(jekyll기반)
• html, css, jascript 파일 등은 그대로
• GitHub 저장소에서 파일 생성 후 commit 하거나 로컬에서 문서 작성 후 git push 하는 방식으로 진행

2.장점

왜 Github Page를 사용하는가?

• HTML로 만들어진 문서 등을 무료로 쉽게 배포할 수 있다.
• 운영이슈가 적다. (트래픽 증가, SQL Injection 등의 보안이슈, 속도 등 서버관리가 필요없음)

3.단점

• Jekyll 등에 대한 사전지식이 필요하며 사이트 구조 개선이 어렵다.
• 무료 버전은 용량 및 트래픽 제한이 있다.

4.GitHub Pages 생성

저장소 생성

• 프로젝트 단위로 페이지를 생성할 지 혹은 저장소 자체를 페이지로 생성할지에 따라 생성방법에 약간 차이가 있다. 종류가 1) 사용자 페이지 2) 프로젝트 페이지 로 나뉜다. 1) 사용자 페이지 생성하기
• 저장소명을 사용자명.github.io로 할 경우, 저장소명이 도메인 자체가 된다.

저장소명 : bravecompany.github.io  
URL : https://bravecompany.github.io

• 사용자.github.io일 경우, 따로 세팅하지 않아도 GitHub Pages가 자동 생성된다. 2) 프로젝트 페이지
• 루트가 아닌 하위 디렉토리(docs)를 사이트로 사용한다.

저장소명 : bravecompany/project  
URL : https://bravecompany.github.io/project/

• Settings > GitHub Pages 에서 사이트 생성
• 소스코드는 master branch /docs 폴더로 지정해줘야 한다. (기본은 none)

참고사항

• 저장소 및 사이트 용량 1GB로 제한
• 월 100GB로 트래픽 제한
• 시간당 10 빌드 제한

Jekyll

Jekyll이란?

• Jekyll은 마크다운(md)으로 작성된 문서를 HTML로 변환하여 웹 사이트를 구축할 수 있도록 돕는 정적 웹사이트 생성기(Static Website Generator)이다. (Ruby로 작성됨)
• html 및 마크다운 등의 텍스트파일을 yaml에 정의된 내용에 따라 템플릿과 결합하여 최종 html파일로 변환, 해당 파일들은 _site 디렉토리 내에 생성된다.
• 지킬은 yaml front matter가 작성되어있는 모든 파일을 찾아 변환한다. (.html, .markdown, .md, .textile 등). yaml front matter가 작성되지 않은 파일은 변환하지 않고 그대로 보여준다.
• 다른 정적 웹사이트 생성기 : Hugo, Hexo 등

Jekyll 특징

• 다른 static site generator이 사용자가 빌드를 한 뒤에 빌드해서 나온 결과물을 올려야 하는 반면, 지킬은 github에서 자동으로 빌드해서 페이지를 띄워준다. 대신 글이 많아질수록 빌드 속도가 느려지는 단점이 있다.
• github에서 공식적으로 후원하므로 사용자가 가장 많고 많은 테마를 보유하고 있다.

Liquid 문법

• Liquid는 크게 3가지 Object, Tag, Filter 개념이 존재한다. ```

• Object : 컨텐츠 출력 judy.kim

• Tag : 제어문 작성

  주디가 작성한 글입니다.

</head>

• Filter : Object 결과에 변형을 가할 때 사용 05 Dec 2019 // page.date를 문자열로 표기 ```

• jekyll 프로젝트 생성 시, 루비 젬 기반 디폴트 테마를 사용하여 기본 사이트의 외관을 구성하며 _layouts, _includes, _sass를 갖게 됨

  환경설정 파일 _config.yml

  • YAML 포맷으로 작성
  • 파일 내 탭문자는 사용하지 않는다. (파싱 에러가 발생하거나 기본 설정값이 사용될 수 있음)
  • 각 파일에 일일이 front matter를 작성하지 않기 위해서는 환경설정 파일 내 defaults를 사용한다.

    작성방법

    defaults:
    -
        scope:
            path: ""
        values:
            layout: default
    -
        scope:
            path: "_posts"
            type: "posts"   # type값은 기본적으로  pages, posts, drafts가 있으며 생성한 collection이름을 사용할 수도 있다.
        values:
            layout: post
            author: "bravecompany"
    

변수

1. 전역변수

   변수	설명
   site	사이트 기본정보 + 환경설정파일(_config.yml)에 정의된 변수	ex) site.time, site.pages(모든 페이지목록), site.posts(모든 포스트목록), site.url 등
   page	페이지 관련 정보 및 페이지 상단에 정의된 사용자 변수	page.content, page.title 등
   content	레이아웃 파일 내, 포스트 또는 페이지로 감싸진 렌더링된 컨텐츠. 즉 yml 머리말이 끝나는 지점 이후 모든 내용
   paginator	환경설정 파일 내 paginate가 설정되어있을 시 사용되는 변수

2. 사용자정의 변수 사전 정의된 변수가 아닌 모든 머리말에 작성된 변수들은 liquid 변수로 사용할 수 있다.

   • page나 post 등 상단에 정의된 변수들로 page변수로 사용된다.
   • layout에 정의했을 경우 layout변수로 사용 ex) custom_css: true 로 정의할 경우, page.custom_css 로 해당 값을 사용

Page와 Collection

포스트 작성 이외 페이지 생성하는 방법

1. 사이트의 루트 폴더에 각 페이지 별 html(md)파일 생성 index.html 이나 about.html 등 루트 디렉토리에서 생성 시, bravecomapny.io/about 으로 접근가능
2. 서브 폴더 생성 후, 해당 디렉토리 내에서 index.html파일 생성
3. 콜렉션 기능 사용하기 _config.yml 파일 내에서 콜렉션 정의

    collections:
    authors:
        output: true        # 콜렉션에 포함된 모든 문서를 각 파일로 생성
        permalink: /authors/:path/
    posts:
        permalink: "/posts/:year/:month/:day/:title"
        output : true
    tags:
        permalink: /tags/:path/
        output: true
    pages:
        permalink: /info/:path/
        output: true
   

   위 고유주소로(permalink) 접근 시, ‘_‘+콜렉션명으로 구성된 디렉토리를 찾아 해당 컨텐츠를 보여준다.

data파일 사용하기

yml, json, csv 등의 파일을 읽어 site.data변수로 사용할 수 있다. _data 디렉토리 내 파일을 생성하며 해당 파일명이 곧 변수명이 된다. ex) _data/members.yml 파일이 있을 경우, site.data.members 변수 사용 가능

pagination 사용하기

pagination은 index.html 에서만 사용 가능하며, 환경설정 파일 옵션에 따라 서브디렉토리/index.html에서도 사용할 수 있다. paginator변수에는 모든 포스트 목록이 포함되어있다.

    paginate_path: /blog/:path/

Jekyll 댓글 기능 추가 (disqus)

정적사이트는 기본적으로 데이터연동이 필요한 댓글 기능이 불가능하다. Disqus 서비스는 사이트에 무료로 댓글 기능을 사용하게 해주는 엄청난 서비스

• disqus에서 제공하는 소스코드 embed
• 각 포스트/페이지 상단 front matter에 comments: true 값 추가
• 포스트 url을 기준으로 댓글 갯수 카운트 가능
• disqus는 기본적으로 포스트의 url을 기준으로 데이터를 저장하므로 사이트url이나 포스트url이 변경될 경우 댓글이 정상 노출되지 않는다. (추후 매칭작업이 필요, disqus migration tools)

검색기능 추가 (simple-jekyll-search)

• 최상위 경로에 search.json 파일을 생성하여(상단에 yml표기 필요), site.posts 변수에 들어있는 모든 포스트의 인덱스를 미리 생성 한다.
• 사이트 빌드 이후 자바스크립트 ajax요청으로 전체 사이트 인덱스를 검색하고 그 결과값을 보여준다.

참고

• 지킬이 아닌 다른 정적사이트 생성기를 사용하려면 루트 디렉토리에 .nojekyll 이라는 이름의 빈 파일을 생성한다. (PHP나 루비 파이썬 같은 서버사이트 언어는 지원하지 않음)
• 지킬이 빌드하지 않는 폴더/파일 ```
  1. /node_modules 나 /vendor 폴더
  2. 언더바(_), 점(.), 샾(#) 으로 시작하는 파일
  3. 물결(~)로 끝나는 파일
  4. 설정파일 내 exclude 세팅 ```

4. Github Pages로 운영중인 사이트

• 카카오 기술블로그
• 우아한 형제들 기술블로그

참고사이트

1. GitHub Help-Pages
2. Jekyll
3. disqus 기능추가