11ty로 jamstack 만들기

11ty는 자바스크립트 라이브러리입니다. 11ty를 사용해서 jamstack 방식으로  웹사이트를 만들 수 있습니다. 먼저 npm init으로 프로젝트를 시작합니다. npm init으로 package.json 파일을 만들고 여러 설정을 합니다. npm install -g @11ty/eleventy로 11ty 모듈을 설치합니다. 글로벌로 설치하면 다른 프로젝트 만들 때 다시 설치하지 않아도 됩니다. npx @11ty/eleventy --serve를 하면 파일을 설치하면서 빌드해줍니다. package.json의 scripts에 명령어를 입력합니다. "build" : "eleventy"는 실제 파일로 빌드를 해줍니다. "start": "eleventy --serve"는 서버를 열어서 로컬호스트에서 확인할 수 있게 해줍니다. npm start 명령어를 실행했을 때 http://localhost:8080이 서버 경로입니다. bitnami를 설치했다면 경로가 같아서 파일을 확인할 수 없다. 이럴 때는 bitnami에서 서버와 데이터베이스를 정지합니다. 11ty 용어를 정리하겠습니다. 먼저 collections입니다. collections은 템플릿 콘텐츠의 집합입니다. 한 템플릿이 여러 collections에 속할 수 있습니다. collections를 사용해서 템플릿을 구분합니다. tags를 사용해서 collections를 만들 수 있습니다. collections.태그이름으로 사용합니다. collections.all는 모든 템플릿(글)을 말합니다.  11ty의 여러 설정은 .eleventy.js을 만들어서 설정합니다. root 폴더에 만듭니다. module.exports로 함수를 내보냅니다. module.exports = function(config){}와 같이 함수를 내보냅니다. 여러 설정된 객체를 return 해줍니다. return {} 안에 여러 설정 객체를 넣습니다. return {} 안에 dir를 설정합니다. dir에 input, output, includes 폴더를 정합니다. input 폴더에 들어있는 것으로 파일을 만듭니다. output으로 정한 폴더가 build 했을 때 root 폴더가 됩니다. output을 정하지 않으면 _site가 폴더이름이 됩니다. npm start로 eleventy --serve 명령어를 실행하면 output으로 정한 폴더에 파일이 생깁니다. output 폴더가 root 폴더가 됩니다. css 경로를 입력할 때 /public/css와 같이 root 경로를 입력하면 됩니다. output 폴더를 다른 호스팅 사이트에 업로드해서 서비스합니다. includes으로 정한 폴더는 레이아웃 파일이 들어가는 폴더입니다. includes을 정하지 않으면 _includes가 폴더이름이 됩니다. return {} 안에 포맷과 템플릿엔진을 정합니다. templateFormats : ["md", "njk", "html"], markdownTemplateEngine: "njk", htmlTemplateEngine : "njk", dataTemplateEngine : "njk"와 같이 정합니다. 이렇게 설정을 하면 njk 파일이 아닌 html 파일로도 템플릿을 만들 수 있습니다. config에 여러 설정을 합니다. config.addPassthroughCopy(경로)로 복사할 폴더를 입력합니다. css나 자바스크립트를 사용하기 위해서 파일이 있는 경로를 입력합니다. passthroughFileCopy:true로 정해서 설정한 폴더를 복사할 수 있도록 합니다.