11ty 시작하기

11ty는 현재 작업 디렉토리에 있는 파일을 사용하는 간단한 정적 사이트 생성기입니다. 마크다운, html, JavaScript 등과 같은 다양한 파일 유형을 사용할 수 있습니다. 처음 110개 사이트를 만드는 방법에는 여러 가지가 있습니다.

기본 11ty 사이트

11ty를 쉽게 시작하려면 명령줄로 이동하여 원하는 디렉터리에서 다음 명령을 실행합니다.

echo '# Page header' > README.md
npx @11ty/eleventy

현재 디렉토리에 빈 사이트가 생성됩니다. 웹 서버를 시작하려면 다음 명령을 실행할 수 있습니다. npx @11ty/eleventy --serve . 그런 다음 웹 브라우저에서 http://localhost:8080/README/를 열어 로컬 페이지를 볼 수 있습니다. VSCode와 같은 코드 편집 프로그램에서 내용을 편집할 수 있습니다. 그런 다음 Eleventy를 사이트 요구에 맞게 구성할 수 있도록 .eleventy.js 파일을 만들고 싶을 것입니다. readme.md 및 index.html과 같은 디렉토리의 파일을 편집할 수 있습니다. 내 기본 사이트는 다음과 같습니다.

내 GitHub 코드는 [여기]에서 볼 수 있습니다.( https://github.com/briangan123/11ty )

11ty 블로그 템플릿

11ty를 활용하는 또 다른 방법은 미리 빌드된 템플릿을 사용하는 것입니다. 이 예에서는 GitHub의 this 템플릿을 사용했습니다. 이것을 템플릿으로 사용하려면 "이 템플릿 사용"이라는 녹색 버튼을 클릭하십시오. 리포지토리 이름을 만들라는 메시지가 표시되면 고유한 버전을 만들 수 있습니다.
GitHub에서 템플릿을 만든 후 명령줄을 사용하여 변경 사항을 추적하여 GitHub에 업로드할 수 있습니다. 다시 말하지만 VSCode에서 일부 파일을 변경하여 내용을 편집할 수 있습니다. 내 블로그는 다음과 같습니다.

홈페이지

아카이브 페이지

첫 번째 블로그 게시물

GitHub에 변경 사항을 푸시하여 사이트에 추가할 때 파일 변경 사항을 추적할 수 있습니다. 여기 내 Githubrepo이 있습니다.

다른 템플릿

내가 사용한 또 다른 템플릿은 this 입니다.
템플릿을 사용하는 것과 동일한 절차에 따라 나만의 이력서 사이트를 만들고 필요에 맞게 파일과 페이지 내용을 편집했습니다. 다음과 같습니다.

내 GitHub 리포지토리here에서 편집한 내용을 볼 수 있습니다.

결론

11ty는 정적 사이트를 만드는 강력한 도구이며 여러 가지 방법으로 사용할 수 있습니다. 템플릿을 사용하면 더 빨리 시작하고 실행할 수 있지만 완전한 사용자 지정 기능을 원한다면 처음부터 사이트를 구축할 수 있습니다.