Jekyll에서 블로깅하기

작성자: Farrel Burns

Jekyll용 Git 기반 CMS인 CloudCannon에서 가져왔습니다.

여기서 배울 내용:

블로그 게시물 만들기

게시물 콘텐츠 액세스 중

개별 게시물에 대한 레이아웃 만들기

    # Starting repo
    git clone https://github.com/CloudCannon/jekyll-learn-blog-template.git

    # Starting branch:
    git checkout blogging-intro-start

    # Finished branch:
    git checkout blogging-intro-finish

Jekyll로 블로그 만들기

어떤 종류의 기사가 없으면 블로그가 완전하지 않습니다. 다행스럽게도 Jekyll을 사용하면 블로그 게시물을 쉽게 관리할 수 있습니다. 이 강의에서는 Jekyll 게시물의 규칙과 사이트에 표시하는 방법에 대해 설명합니다. 게시물on Jekyll’s official site에 대해 자세히 알아보세요.

블로그 게시물 규칙

새로운 Jekyll 프로젝트는 _posts 폴더와 단일 게시물 예제로 자동 생성됩니다. 이 수업에서는 우리나라의 호기심 많은 깃털 친구들 몇 명에 대한 게시물을 만들 것입니다.

시작하기 전에 주목할 가치가 있는 몇 가지 규칙이 있습니다.

유효한 게시물 이름은 [year]-[month]-[day]-[post-name].md 형식이어야 합니다. 예: 2021-01-01-my-post.md .

일반적으로 게시물은 Markdown으로 작성되지만 HTML도 괜찮습니다.

내용이 있음을 나타내기 위해 파일 시작 부분에 머리말(비어 있더라도)이 포함되어야 합니다.

이제 이러한 규칙에 따라 게시물을 작성해 보겠습니다. 마음에 드는 게시물을 원하는 만큼 추가하세요. 다음과 같아야 합니다.
\_posts/2021-01-01-my-post.md

    ---
    title: A blog post
    ---

**Your blog post content**

따라하는 사람들을 위해 posts.txt 폴더에서 _posts를 찾을 수 있습니다. 지침에 따라 게시물을 _posts 폴더에 추출하고 적절한 경우 "년-월-일"을 현재 날짜(또는 과거 날짜)로 대체하십시오.

블로그 게시물에 액세스

게시물이 몇 개 있으므로 이제 Liquid를 사용하여 게시물을 표시해 보겠습니다. Jekyll이 사이트를 구축할 때마다 다음과 같은 여러 작업을 수행합니다.

게시물 페이지를 HTML로 출력합니다

.

게시 날짜 및 제목(기본적으로 파일 이름)과 각 게시물의 URL에 대한 액세스 권한이 있는 게시물 개체를 생성합니다

.

모든 게시물을 전역적으로 사용할 수 있도록 합니다("site.posts"아래)

먼저 기존 게시물을 나열할 페이지가 필요하므로 다음과 같은 간단한 콘텐츠로 루트 디렉터리에 blog.html를 생성해 보겠습니다.

    ---
    layout: default
    title: Blog Page
    ---
    <ul>
    {% for post in site.posts %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
    </ul>

보시다시피 이것은 여전히 ​​단순한 HTML 스타일이지만 콘텐츠에 대한 링크가 있는 모든 게시물 제목은 기본 레이아웃 내에 표시됩니다. 더 멋진 스타일링을 위해 다음을 대신 사용할 수 있습니다.

    <h1 class="col-header dark-orange">All posts</h1>
    {% for post in site.posts %}
    <div class="post-preview">
      <img class="post-preview__left" src="{{ post.image }}" alt="{{ page.image_alt }}">
      <div class="post-preview__right">
        <a class="preview-title" href="{{ post.url }}">{{ post.title }}</a>
        <span>{{ post.date | date: "%b %d, %Y" }}</span>
        <div class="tag-group">
          {% for tag in post.tags %}
            <div class="tag"><span class="tag-text">{{ tag }}</span></div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endfor %}

레이아웃 사용

위에서 게시물을 클릭하면 스타일이 지정되지 않은 페이지가 표시됩니다. 사용할 레이아웃을 지정하지 않았기 때문에 하나 만들어 보겠습니다.

먼저 post.html를 _layouts 폴더에 다음 콘텐츠와 함께 추가합니다(일부 CSS는 이미 스타일을 처리하도록 작성되었습니다).

    ---
    layout: default
    ---
    <div class="b-hero">
      <img class="b-hero__image" src="{{ page.image }}" alt="{{ page.image_alt }}">
      <div class="b-hero__info">
        <h1 class="b-hero__title">{{ page.title }}</h1>
        <div class="b-hero__author-date">
          <span>Written by: {{ page.author }}</span>
          <span>{{ page.date | date: "%b %d, %Y" }}</span>
          <div class="tag-group">
            {% for tag in page.tags %}
              <div class="tag">
                <span class="tag-text">
                  <a href="#">{{ tag }}</a>
                </span>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
    {{ content }}

홈페이지의 영웅 섹션을 피하기 위해 다시 상속을 사용하고 있습니다. 한 단계만 남았습니다. 게시물에 이 레이아웃을 사용하도록 알리는 것입니다. 각 게시물로 돌아가서 머리말에 layout: post를 추가합니다.

이제 로컬 서버를 실행할 때 볼 수 있는 멋진 형식의 게시물이 있어야 합니다.

무엇 향후 계획?

Jekyll을 사용하면 쉽게 블로그를 설정하고 게시물을 관리할 수 있습니다. 그러나 특히 게시 날짜가 중요하지 않은 경우 블로그 게시물이 콘텐츠를 그룹화하는 유일한 방법은 아닙니다.

다음으로 관련 콘텐츠를 그룹화하는 방법인 컬렉션을 살펴보겠습니다.