11ty를 사용하여 블로그 만들기

11ty가 뭔가요?

11ty는 Jekkyl의 JavaScript 대안으로 만들어진 정적 사이트 생성기입니다. Markdown, html, javascript 및 nunjucks와 같은 여러 언어에서 작동합니다. 또한 독립적인 템플릿 엔진을 사용하므로 번거로움 없이 프로젝트에서 쉽게 결합하거나 분리할 수 있습니다.

헬로월드 블로그

사용된 첫 번째 방법은 웹 사이트에서 직접 제공되며 먼저 다음 줄을 실행하여 시작합니다.

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

이것을 실행하여 따르십시오.

npx @11ty/eleventy --serve

로컬 호스트 링크를 제공하는 프롬프트가 나타납니다. 이 링크를 복사한 다음 끝에/README를 추가하면 헤더만 있는 빈 웹사이트로 이동합니다. 여기에서 VS 코드로 이동하여 *README * 파일을 편집하거나 프로그램을 다시 실행할 때 연결할 새 파일을 추가할 수 있습니다. DEV의 블로그 게시물을 파일에 추가하면 사용할 때 팝업됩니다npx @11ty/eleventy --serve.

11ty 템플릿을 사용하여 블로그 호스팅

기존 템플릿을 통해 11ty를 활용할 수도 있습니다. 이 시나리오에서는 . To use this, simply clone the repository, install npm, and open up the code with code . From here you can go into the posts tab and add your own blogposts "In markdown format" to the template. 에서 랩에 제공된 것을 사용합니다.

다음을 실행하여 따르십시오npm run start.



로컬 호스트를 복사하여 웹 브라우저의 URL에 붙여넣으면 추가한 블로그를 클릭할 수 있는 옵션을 제공하는 페이지가 표시됩니다.


블로그 중 하나를 클릭하면 해당 블로그로 이동합니다.

HAX11ty

사용된 최종 방법은 11ty와 Edtechjoker 고유의 HAXcm를 조합하는 것입니다. 이전 예제와 마찬가지로 제공된 repo를 복제하고 터미널을 통해 엽니다.

참고 - 여기에는 yarn가 필요하므로 없는 경우 파악하여 설치하십시오.
Markdown 파일을 추가하고 제목을 지정하고 블로그 게시물을 해당 Markdown 파일에 추가합니다.

모든 변경 사항을 적용하고 yarn install 전에 yarn run를 사용하여 웹 사이트를 부팅하십시오. 이제 추가하거나 편집한 모든 페이지를 볼 수 있습니다.

마지막 생각들

분명히 템플릿을 사용하는 것이 11ty 웹사이트를 처음부터 구축하는 것보다 훨씬 쉽습니다. 이를 기반으로 HAXcms의 구현은 웹사이트의 전반적인 접근성을 높이고 필요한 형식을 제공합니다. 아래 링크에는 내 저장소와 이 실습을 완료하는 데 필요한 기타 리소스가 제공됩니다.

https://github.com/kfo5087/11ty-hello
https://github.com/kfo5087/11ty-template
https://github.com/kfo5087/haxerman11ty
https://www.11ty.dev/docs/plugins/syntaxhighlight/