La blogo de "Y Kaj Nai"

GirHub Blog - Jekyll Theme

  • 2020年 01月31日

Jekyll Theme 사용해보기

REF
GitHub Desktop
Jekyll Theme 공식 사이트
Jekyll theme을 사용하여 블로그 생성하기

블로그 설정 과정

  1. 로컬에 테마 설치
  2. 테마 수정
  3. GitHub에 배포
    • GitHub Pages 생성
    • Git Push

Jekyll Theme 선택

Theme

Theme List

Documentation Jekyll theme Just The Docs Jekyll theme Docs Jekyll theme
Image Image Image
Leonids Jekyll theme Minimal Mistakes Jekyll theme Online CV
이력서, 카테고리 보유   온라인 이력서 작성 시 좋을 듯
Image Image Image
Meuse Jekyll theme    
$24    
Image    

jekyll-TeXt-theme

  1. install the theme
    1. common method
    2. ruby gem method : setup your site 필요
  2. setup your site
  3. local preview for development, build and publish.

Install Theme

  1. fork theme git
    git clone을 통해서도 가능
    github pages 사용 시 fork로 간단하게 적용 가능하므로 편한 방법을 선택할 것

  2. 내 github 설정

    • repository rename
      Image
    • page 접속 확인
      Image

Local Preview

  • git clone
    Image
$git clone https://github.com/willnfate/willnfate.github.io.git
$cd willnfate.github.io.git

# 설치
$bundle
Using jekyll-text-theme 2.2.6 from source at `.`
Bundle complete! 3 Gemfile dependencies, 42 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Post-install message from html-pipeline:
-------------------------------------------------
Thank you for installing html-pipeline!
You must bundle Filter gem dependencies.
See html-pipeline README.md for more details.
https://github.com/jch/html-pipeline#dependencies
-------------------------------------------------

# 서버 실행 // $jekyll serve 
$ bundle exec jekyll serve
Configuration file: /Users/minky/work/willnfate.github.io/_config.yml
            Source: /Users/minky/work/willnfate.github.io
       Destination: /Users/minky/work/willnfate.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
                    done in 1.162 seconds.
 Auto-regeneration: enabled for '/Users/minky/work/willnfate.github.io'
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.

Image

Build and Publish

If you host your site on GitHub Pages, just push the source to the master branch of your USERNAME.github.io repository, GitHub would build automatically. You can visit your site on https://USERNAME.github.io several minutes later.

If you host your site on your server, you need first run JEKYLL_ENV=production bundle exec jekyll build to generated your site, then update the files in _site folder to your server.

이제 기본 설치가 완료되었다!!

Skin Customizing

REF Configuration

스킨 설정

text_skin: default # "default" (default), "dark", "forest", "ocean", "chocolate", "orange"

MathJax 설정

_config.yml

## Mathjax
mathjax: true # false (default), true
mathjax_autoNumber: false # false (default), true << 자동 수식 번호매기기 해제

text align

mathjax.html > _config에 displayAlign과 displayIndent 추가

  • 추가 코드
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  displayAlign: "left",
  displayIndent: "2em"
});
</script>
  • 적용 예
{%- include snippets/get-sources.html -%}
{%- assign _sources = __return -%}

{%- include snippets/assign.html target=site.data.variables.default.mathjax_autoNumber
  source0=site.mathjax_autoNumber source1=page.mathjax_autoNumber -%}
{%- assign _mathjax_autoNumber = __return -%}

<script type="text/x-mathjax-config">
    var _config = { 
        tex2jax: {
            inlineMath: [['$','$'], ['\\(','\\)']]
        },
        displayAlign: "left",
        displayIndent: ".5em"
    };
    {%- if _mathjax_autoNumber == true -%}
        _config.TeX = { equationNumbers: { autoNumber: "all" } };
    {%- endif -%}
    MathJax.Hub.Config(_config);
</script>
<script type="text/javascript" src="{{ _sources.mathjax }}" async></script>
搜索