micro site

한 페이지 분량의 문서를 만드는 데 사용할 수 있는 독창적인 마이크로 프런트 엔드입니다. 랜딩 페이지나 가입 페이지에 적합합니다. 이는 내부적으로 정적 사이트 생성기 Eleventy(11ty)를 사용하고 공통 11ty 기본값을 설정합니다.

특징

• clean-css 사용하여 CSS를 인라인화하고 축소합니다.
• terser 사용하여 JavaScript를 인라인화하고 축소합니다.
• metadata.json 전역 데이터 파일을 포함합니다.
• base.njk 레이아웃 템플릿 포함
• 정적 파일(이미지, 글꼴 등)에 대한 assets folder 포함합니다.

이것은 *골격 프로젝트 이므로 구성 요소나 기본 스타일이 포함되어 있지 않습니다. 그것은 *Bring Your Own 프런트 엔드입니다.

용법

1. metadata.json 파일을 자신의 사이트 세부정보로 업데이트하세요.
2. index.njk 파일을 편집하고 웹사이트 코딩을 시작하세요!
3. 선택 사항: Netlify에 사이트를 배포합니다.

설치하다

node.js 및 npm이 필요합니다.

시작하려면 다음 단계를 따르세요.

1. 프로젝트 복제

 $ git clone https://github.com/systemdes/micro-site.git

2. 이 프로젝트에 대한 종속성을 설치합니다.

 npm i

3. 그럼 해

 npm run dev

로컬 개발 서버에서 live-reloadzz를 시작합니다.

프로젝트 구조

 micro-site/
├── _site/                // output folder of 11ty
├── _data/
│   └── metadata.json     // metadata for the website
├── _includes/
│   ├── style.css         // minified and inlined
│   ├── script.js         // minified and inlined
│   └── base.njk          // base layout
├── assets/               // passtrough copy
├── index.njk/            // landing page
└── .eleventy.js          // 11ty configurations

로드맵

• eleventy-image 사용한 이미지 최적화
• eleventy-cache-assets 사용한 자산 캐싱
• eleventy-plugin-syntaxhiglight 통한 구문 강조 지원

특허

MIT © 대니 드 브리스