Jekyll의 Install과 GiitHub Pages의 결합

15148 단어 Liquidorg-modeJekyllRuby

의 목적


학생들이 자신의 블로그를 쉽게 관리하고 함께 공유할 수 있기를 바랍니다
이 점에서부터 제킬+지티허브 페이지는 베스트 솔루션으로 판단된다.
하지만 거리에는 온통
install 하기, new 하기,git push 하기https://hoge.github.io/haga 볼 수 있어요
이것은 실패다.
결국 일주일 정도 걸려서 안전하게 움직였어요. 좀 귀찮아서요.
Quiita로 단계 요약
* relative 최신 버전URL이 없으면 안 돼요.
*step by step의 기술은 최신 버전에 없습니다.
그중(현재 19-06-05,jekyll 3.8.5)에서도 init와 manual이 수정되지만 지금은 수동으로 조작해야 합니다.

새로이


러브 서버까지.

  • gem install bundler jekyll
  • jekyll new my-awesome-site
  • cd my-awesome-site
  • bundle exec jekyll serve
    • 우선 로컬의 동작을 확인하세요.

    Gemfile 및config.yml


    이렇게config.yml
    title: Jekyll test No.9
description: >- 
Jekyll test No.9
baseurl: "" 
url: "" 

markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
    낳다
    title: jekyll test no.9
description: >- # this means to ignore newlines until "baseurl:"
  test site for jekyll, navigation mainly.
baseurl: "/jekyll_test9"
url: "http://daddygongon.github.io"

# Build settings
markdown: kramdown
theme: jekyll-theme-minimal
plugins:
  - jekyll-feed

permalink: /:categories/:short_year-:month-:day/:title
    되다
    게다가 Gemfile
    source "https://rubygems.org"
gem "jekyll", "~> 3.8.5"
gem "minima", "~> 2.0"

gem "github-pages", group: :jekyll_plugins

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.6"
end
    여기,
    bundle update
    local 서버에서사이트가 생성한 theme install을 만들 필요가 있을 것 같아요.

    상관없는 error


    자주 발생하는 오류는
    jekyll 3.8.5 | Error: No such file or directory @ realpath_rec -/Users/bob/ruby/jk/jekyll_test9/[email protected]
    이것은emacs의backupfile가 있기 때문입니다. 그때는emacs를 한 번 끝내고tidyup합시다.

    git init


    Gemfile
    gem "github-pages", group: :jekyll_plugins
    하고 있기 때문에 git init를 미리 만들어야 합니다.
    Giithub에서 예를 들면 jekylltest9이라는 repository,push content.를 제작하면 GiitHub의settings->options->GiitHubPages의 설정 화면에서 소스 마스터 브랜치를 선택할 수 있습니다.

    local 작업은 다음과 같습니다.
    ```
    git init
    Initialized empty Git repository in/Users/bob/ruby/jk/jekyll_test9/.git/
    git remote add origin [email protected] :daddygongon/jekyll_test9.git
    git add -A
    git commit -m 'first commit'
    ```

    index.md


    이렇게 하면 서버를 시작할 수 있습니다.
    bundle exec jekyll serve --baseurl ""
    그럼 아무것도 안 보여.
    ---
layout: default
title: Home
---

<h1>{{ "Hello World!" | downcase }}</h1>
    뭐, 레이아웃을 홈에서default로 바꾼 것뿐이야. 이 단계에서git push라면 GitHub Pages도 잘 볼 수 있을 거야.
    이렇게 기본적인 동기화 설정이 끝났습니다. 다음은 Step by Step Tutorial 과 무엇이 다른지 조사해 봅시다.

    step by step


    Liquid, Front Matter, Layouts, Includes를 모두 접어라.
    다만layouts/defaults.너무 보기 싫고 이후 수정이 없어서 미니멀/defaults.)를 기반으로 합니다.
    <!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

{% seo %}
    <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
    <link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrapper">
      <header>
    <div align="right">
      {% include navigation.html %}
    </div>

    <h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>

        {% if site.logo %}
          <img src="{{site.logo | relative_url}}" alt="Logo" />
        {% endif %}

        <p>{{ site.description | default: site.github.project_tagline }}</p>

        {% if site.github.is_project_page %}
        <p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ site.github.repository_nwo }}</small></a></p>
        {% endif %}

        {% if site.github.is_user_page %}
        <p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>
        {% endif %}

        {% if site.show_downloads %}
        <ul class="downloads">
          <li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
          <li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
          <li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
        </ul>
        {% endif %}
      </header>
      <section>

      {{ content }}

      </section>
      <footer>
        {% if site.github.is_project_page %}
        <p>This project is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
        {% endif %}
        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
      </footer>
    </div>
    <script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>
    {% if site.google_analytics %}
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', '{{ site.google_analytics }}', 'auto');
      ga('send', 'pageview');
    </script>
    {% endif %}
  </body>
</html>
    Liquid 구조
    <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
    이렇게 하면config.yml 봤어, github 줄 때도 해줘. 실제로 홈페이지에서 보면
    <link rel="stylesheet" href="/jekyll_test9/assets/css/style.css">
    베이스 URL을 잘 끼고 있어요.

    about.md, blog.html


    default의about.MD를 사용할 수 없음,
    layout: default
# parmalink: /amount/
    로 변경합니다.
    블로그md
    ---
layout: default
title: Blog
---
<h1>Latest Posts</h1>

<ul>
  {% for post in site.posts %}
    <li>
      <h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
      <p>{{ post.excerpt }}</p>
    </li>
  {% endfor %}
</ul>
    그래.

    assets


    step by step의 기술은 헷갈리기 쉽고,
    ├── _sass
│   └── main.scss
├── _site
│   ├── 404.html
│   ├── about.html
│   ├── assets
│   │   ├── css
│   │   │   ├── style.css
│   │   │   └── styles.css
│   │   ├── fonts
...
├── about.md
├── assets
│   └── css
│       └── styles.scss
    되다site는 서버나build로 만들어졌습니다.
    local은 이것만 가능합니다. 그리고config.yml에서
    sass:
  sass_dir: _sass
  style: compressed
    이것까지 더하면 기릿허브 페이지도 잘 할 거야.

    _config.조정


    계층 구조 OK.
    lsi: true
theme: jekyll-theme-cayman
permalink: :categories/:year-:month-:day/:title
  • https://jekyllrb.com/docs/configuration/options/

    • tryand error 몇 개


    본 문제에서 벗어나 다음strugling의 해결은 해결하지 않아도 소용이 있다.

    설치 실패


    짭짤하다.
    jekyll
    명령에 반응이 없다.
    gem install jekyll
    통과,gems는 있지만 Jekyll path는 없습니다.

    해결책


    루비의 버젼을 바꿔 봤어요.
    구체적으로 말하면
    *rbenv에 추가된 2.5.2로 변경
    * 본 사이트의 규정에 따라 bundler, 설치를 사용
    /usr/local/bin/bundler를 중간에 덮어썼습니다.
    다른 데 영향을 미칠 수도 있어요.
    예를 들어, rails입니다.
    > rbenv versions
> ruby -v
ruby 2.4.3p205 (2017-12-14 revision 61247) [x86_64-darwin17]
> rbenv local system
> ruby -v
ruby 2.5.2p104 (2018-10-18 revision 65133) [x86_64-darwin17]
> gem install bundler jekyll
Fetching: bundler-2.0.1.gem (100%)
bundler's executable "bundle" conflicts with /usr/local/bin/bundle
Overwrite the executable? [yN]  y
...
26 gems installed
> jekyll new my-awesome-site
Running bundle install in /Users/bob/ruby/jk/my-awesome-site... 
  Bundler: Fetching gem metadata from https://rubygems.org/...........
  Bundler: Fetching gem metadata from https://rubygems.org/.
  Bundler: Resolving dependencies...
  Bundler: Using public_suffix 3.1.0
> bundle exec jekyll serve
Configuration file: /Users/bob/ruby/jk/my-awesome-site/_config.yml
            Source: /Users/bob/ruby/jk/my-awesome-site
       Destination: /Users/bob/ruby/jk/my-awesome-site/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
                    done in 0.492 seconds.
 Auto-regeneration: enabled for '/Users/bob/ruby/jk/my-awesome-site'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

    반대편에서


    Jekyll 서버가 Giithub Pages의 기본 테마를 로컬에서 확인할 수 있도록 허용
    반대로 github 페이지로 clone을 시도해 봤습니다.
  • Github로 리포지토리를 제작한 후 페이지로 변경할 수 없습니다.
    • theme를 선택하고cayman,index를 선택하세요.자동 생성md강제 페이지
  • clone
  • bundle init 시 Gemfile 생성
  • gem "github-pages", group: :jekyll_plugens
    • 추가
  • bundle install에 필요한gems는 install
  • $ bundle exec jekyll serve
    그리고... 
    • bundle exec jekyll serve
Configuration file: /Users/bob/ruby/jk/static_site_test/jekyll_test6/_config.yml
Invalid theme folder: _includes
Invalid theme folder: _includes
            Source: /Users/bob/ruby/jk/static_site_test/jekyll_test6
       Destination: /Users/bob/ruby/jk/static_site_test/jekyll_test6/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
   GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.
                    done in 1.948 seconds.
 Auto-regeneration: enabled for '/Users/bob/ruby/jk/static_site_test/jekyll_test6'
jekyll 3.8.5 | Error:  Address already in use - bind(2) for 127.0.0.1:4000
    _includes나 GiitHub Metadata 같은 Warning이 없습니다
    이 녀석들은 모두 무시해야 한다.
    _Jekyll-theme-cayman-0.1.1을 위한 includes그리고includes 폴더가 사라졌습니다.
    metadata는 사라지지 않습니다.
    이렇게 우선 행동을 좀 해라.

    jekyll-org


    뭐랄까, 사용이 순수하지 않고 패스라는 것을 당연하게 소개한 것 같다.
    org-ruby 괜찮은 것 같아. 그건 또 다른 Qita야.

    인용하다

  • http://marbles.hatenablog.com/entry/2019/01/16/221417

  • https://alpha3166.github.io/blog/20190413.html
    쓰고 보니 잘 썼어요.
  • 그리고 Liquid에서 {} 전개되지 않도록 전각으로 붙이기
    • 다른 방법이 있습니까?
  • \{{{{}}\}로 지금 하고 있습니다.
    • div에서 문자를 수직으로 가운데로 배치하는 방법
    💸 Django 튜토리얼: 무료 배포 시 미디어 파일 설정

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage