반응형

이번 포스팅에서는 지난 포스팅에 이어 11ty를 좀더 활용해서 layout을 구성하고, CSS를 적용하는 방법을 알아보도록 하겠습니다.

1. .eleventy.js파일 생성

프로젝트 루트에 .eleventy.js 파일을 생성합니다. 여기서 Input / Output 폴더와 CSS 파일의 경로를 지정해줍니다.

module.exports = function(eleventyConfig) {  
  eleventyConfig.addPassthroughCopy("./src/style.css");

  return {
    dir: {
      input: "src",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }
  };
};

 

2. 폴더 구성

폴더구성은 아래와 같이 /src/폴더 하위에 작업중인 파일들을 넣습니다. 주의할 것은 /_includes/ 폴더도 /src/ 하위에 위치해야합니다. 이제 아래의 구성에 따라 layout.njk, index.md, style.css 및 포스트 파일들을 작성하도록 하겠습니다.

 

3. /src/_includes/layout.njk

여러 포맷을 지원하지만 예제에서는 nunjucks(njk)파일을 사용합니다. 아래와 같이 프로젝트 전체에서 활용할 layout을 만들어줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <header>
    <h1>{{ title }}</h1>
  </header>
  <main>
    {{ content | safe }}
  </main>
</body>
</html>

 

4. src/index.md

메인 페이지에서 사용하는 레이아웃도 위에서 만든 layout.njk입니다. 그러나 내부에 보여줄 컨텐츠가 각 포스트들의 타이틀과 컨텐츠의 목록입니다.

---
layout: "layout.njk"
title: The Best Eleventy Demo
---

{% for post in collections.post %}
<h2><a href="{{ post.url }}">{{ post.data.title}}</a></h2>
<p>{{ post.content }}</p>
{% endfor %}

 

5. src/style.css

CSS파일도 적당히 구성하여 /src폴더에 넣어줍니다.

*{
  font-family:Georgia, 'Times New Roman', Times, serif;
}

header {  
  position: relative;      
  text-align: center;
  font-size: x-large;
}

main {
  position: relative;    
  margin-top: 50px;
  font-size:15px;
  text-align: center;
}
a {
  text-decoration: none;
}

 

6. src/posts/

# post1.md (아래의 형식으로 몇개 더 만들어놓습니다.)

---
title: Post Title
---
asdfxvzxcv

# posts.json

posts폴더 내부의 파일들이 사용할 레이아웃과, 각 파일들의 태그 정보를 설정해줍니다. 여기서는 "tags"값으로 "post"를 지정하였습니다. 이 값은 collections라는 변수로 사용할 수 있습니다. 위의 index.md에서 보시듯이 {{ collections.post }}와 같이 값을 불러와 사용합니다.

{
  "layout": "layout.njk",
  "tags": "post"
}

 

<결과>

 

아직 여러가지 plugin (검색창, 댓글 등)을 확인해보지는 않았지만, 비교적 단순하게 구축이 가능한 정적사이트 생성기로 보입니다. 

반응형
반응형

정적사이트 생성기가 여러개다보니 이것저것 시도해봅니다. 그중에 이번엔 11ty라는 정적사이트 생성기에 대해 알아보겠습니다. 사용법이 매우 쉽습니다.

 

[ 목차 ]

     

    1. 설치

    프로젝트로 쓸 폴더를 생성 후 11ty를 깔아줍니다. (기본적으로 Node는 깔려있어야 합니다.)

    npm init -y
    npm install @11ty/eleventy --save-dev

     

    2. 샘플 파일 생성

    2가지 파일을 생성해야합니다. 리눅스라면 아래의 명령어로 생성이 가능한데, 윈도우 환경이면 직접 두 파일을 만듭니다.

    # index.html
    echo '<!doctype html><title>Page title</title><p>Hi</p>' > index.html
    #README.md
    echo '# Page header' > README.md

     

    3. 서버 실행

    npx @11ty/eleventy --serve
    
    or
    
    npx eleventy --serve

    이렇게만 작성하고 실행해도 index.html을 확인할 수 있습니다. 다른 방법으로는 기존의 방식대로 package.json에 script를 작성해서 사용해도 됩니다.

    {
      "scripts":{
        "dev":"eleventy --serve",
        "build":"eleventy"
      },
      "devDependencies": {
        "@11ty/eleventy": "^2.0.1"
      }
    }

     

    4. post 작성

    기초적인 사용법을 알아볼 겸 이제부터 프로젝트에 조금씩 살을 붙이도록 하겠습니다. 오늘 구성할 프로젝트 구조는 아래와 같습니다. 

    우선 샘플 포스트를 아래와 같이 작성합니다.

    # post1.md
    
    ---
    title: Post Title
    ---
    asdfxvzxcv

     

    # post2.md
    
    ---
    title: My second post
    ---
    zxcvgdfg2343

     

    5. 레이아웃 파일 생성

    /_includes/layout.html파일을 생성합니다. 이 레이아웃으로 모든 md파일의 title과 content를 표시할 예정입니다.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <header>
        <h1>{{ title | default: "My Blog" }}</h1>
      </header>
      <main>
        {{ content }}
      </main>
    </body>
    </html>

     

    그리고 /posts/posts.json파일을 아래와 같이 작성합니다.

    {
      "layout": "layout.html",
      "tags": "post"
    }

    layout은 layout.html파일을 이용하겠다는 뜻이고, post라는 태그가 들어있는 파일들의 리스트를 사용하겠다는 의미입니다.

     

    또한 index.html파일은 layout을 이용해 표시할 예정이므로 아무 내용 없이 layout만 지정합니다.

    <!-- index.html -->
    ---
    layout: layout.html
    ---

     

    이렇게 작성하고 아래의 url에서 잘 표시되는지 확인해 봅시다.

    [http://localhost:8080/posts/post1/]

     

    [http://localhost:8080/posts/post2/]

    레이아웃이 잘 적용되었죠?

     

    6. 포스트 리스트

    마지막으로 메인화면에 포스트 목록을 보여주도록 하겠습니다. 이때 태그로 지정했던 post를 이용해서 리스트를 가져옵니다. index.html을 아래와 같이 수정해줍니다.

    <!-- index.html -->
    ---
    layout: layout.html
    ---
    
    {% for post in collections.post %}
    <h2><a href="{{ post.url }}">{{ post.data.title}}</a></h2>
    <p>{{ post.content }}</p>
    {% endfor %}

     


    한번 사용해본 바로는, 이 기능만 있어도 될만큼 엄청 쉽네요. 나머진 CSS로 꾸미기만 해도 될 것 같습니다. 엄청 빠르고 쉬운 11ty. 한번 사용해볼만 한 것 같습니다. 

    반응형

    + Recent posts