Pure Liquid, Liquid 템플릿이 있는 정적 웹사이트용 스타터 키트

정적 웹사이트와 동적 웹사이트를 위한 많은 템플릿 엔진이 있습니다. 특히 주니어 개발자의 경우 새로운 템플릿 엔진을 배우는 데 시간이 걸립니다.

문제를 해결하기 위해 프로젝트 팀에서 Pug, EJS, Liquid 등에서 선택한 것과 동일한 템플릿 엔진을 사용하여 표준화하고 싶었습니다.

최근 저희 팀에서 Shopify로 전자상거래 사이트를 구축하는 일이 늘었습니다. Shopify는 테마 개발을 위한 템플릿 엔진으로 Liquid를 채택하고 이를 타사 개발자에게 소개합니다.

Liquid는 Shopify에서 만든 템플릿 언어이지만 실제로 Shopify 이외의 다른 제품을 개발하는 데 활용할 수 있습니다.

예를 들어 일반적으로 Shopify로 전자상거래 사이트를 구축하는 경우 Liquid로 정적 웹사이트를 개발하는 것이 더 생산적일 수 있습니다.

위의 관점에서 액체 템플릿으로 정적 웹 사이트 및 Jamstack에 대한 스타터 키트를 만들었습니다.

순수한 액체

스타터 키트의 이름은 "퓨어 리퀴드"입니다.
Pure Liquid를 사용하면 Shopify의 테마 개발자인 경우 이전보다 더 효과적으로 웹사이트를 개발할 수 있습니다.
이 키트에서 Jamstack 패턴을 선택할 수도 있습니다.

💧 Pure Liquid

특징

내장 정적 사이트 생성기

Liquid를 사용하여 HTML 크기가 더 작은 파일 손상

HTML 유효성 검사를 사용한 HTML 유효성 검사

ESLint로 TS 파일 린트

Stylelint를 사용하여 SCSS 파일 린트

더 예쁜 형식 코드

이미지 압축

SVG 스프라이트 만들기

Jest 및 Playwright가 포함된 내장형 테스트 러너

요구 사항

아래의 요구 사항을 따라야 합니다. Yarn을 패키지 관리자로 사용하는 것이 좋습니다.

Node v16+

Yarn v2 (Recommendation)

빠른 개요

하나의 명령을 실행하여 정적 웹 사이트를 설정할 수 있습니다.<YOUR-PROJECT-NAME>를 자신의 것으로 교체하십시오.

yarn create pure-liquid <YOUR-PROJECT-NAME>

개발할 준비가 되었으니 아래 명령에 따라 시작하세요.

cd <YOUR-PROJECT-NAME> && yarn build && yarn start

http://localhost:8080에 액세스하면 기본 페이지가 표시됩니다.

고맙습니다!

이 글을 끝까지 읽어주셔서 감사합니다.
이 스타터 키트를 가능한 한 최신 상태로 유지하려고 노력할 것입니다. 건배!