teeny

Teeny : 간단한 정적 사이트 생성기

켈 면책 조항 : 이것은 개인 블로그 yakkomajuri.github.io를 생성하기 위해 몇 시간 안에 제작 한 도구입니다. 지금은 많이하지 않으며 아마도 결코 그렇지 않을 것입니다.

? 빠른 시작

npm i -g teeny-cli # yarn global add teeny-cli
teeny init && teeny develop

Teeny를 사용하는 프로젝트의 예는 개인 블로그의 리포를 확인하십시오.

배경

이 블로그 게시물에서 "내 고유 한 정적 사이트 생성기를 구축 한 이유"라는 제목의 블로그 게시물에서 Teeny를 구축하려는 동기에 대해 읽을 수 있습니다.

지원되는 명령

현재 디렉토리에서 Teeny 프로젝트를 초기화하십시오

teeny init

정적 HTML 파일을 빌드하고 public/ 에 추가하십시오.

teeny build

파일 변경을 듣는 로컬 Teeny 서버를 시작합니다.

teeny develop

? 작동 방식

Teeny는 내 요구와 요구에만 맞게 구축 된 매우 간단한 정적 사이트 생성기입니다.

HTML 템플릿 및 마크 다운 컨텐츠를 기반으로 페이지를 생성하는 것입니다.

그것은 거의 거의없고 강하게 의견이 있습니다 ( 읽기 : 나는 맞춤/조건부 처리기를 구축하기에는 너무 게으르지 않았지만 ), 나는 매우 빠르게 행복한 블로그를 만들 수있었습니다.

본질적으로, 템플릿과 페이지에 대해 생각해야 할 개념은 2 개뿐입니다.

템플릿

템플릿은 일반 HTML이며 templates/ 하위 디렉토리에 추가해야합니다.

여기에는 ID page-content 가 포함 된 요소를 포함 할 수 있으며, 여기서 Teeny는 Markdown 컨텐츠를 구문 분석하여 생성 된 HTML을 추가합니다.

페이지

Markdown은 Teeny의 일류 시민이므로 모든 웹 사이트 페이지는 Markdown 파일로 정의됩니다.

파일에는 실제 콘텐츠가 필요하지 않으므로 HTML에서 순수하게 페이지를 정의하려면 페이지 파일에서 참조 된 템플릿을 만들면됩니다.

페이지를 사용해야하는 템플릿을 지정하려면 페이지의 프론트 매트에 다음과 같이 지정할 수 있습니다.

 ---
template: blog
---

위의 예에서 Teeny는 blog.html 이라는 템플릿을 찾습니다. 템플릿이 지정되지 않은 경우 Teeny는 templates/ 에서 default.html 파일을 찾아 사용합니다.

예제 사용

다음은 직장에서 Teeny의 예입니다.

Teeny 프로젝트를 시작하려면 teeny init 실행하십시오. 이것은 현재 디렉토리에서 다음을 만듭니다.

 .
├── pages
│   └── index.md
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

그런 다음 teeny build 실행하면 다음으로 끝납니다.

 .
├── pages
│   └── index.md
├── public
│   ├── index.html
│   └── main.js
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

index.md homepage 템플릿을 사용하고 함께 index.html 생성합니다. 다른 SSG의 표준과 마찬가지로, 정적 파일은 public/ 에서 제공됩니다.

또한 main.js public/ 도 옮겨 졌다는 것을 알게 될 것입니다. Teeny는 실제로 pages/ , templates/ 및 static/ 에서 모든 비 테일 플레이트 및 비 페이지 파일을 가져 와서 Origin 디렉토리의 동일한 구조에 따라 public/ 로 복사합니다.

그 이유는 실제로 "마법"수입을 원하지 않았기 때문에 실제 디렉토리 구조에 해당하지 않는 경로에서 정적 자산을 가져와야합니다. 결과적으로, 나는 정적 파일이 templates/ 페이지/ pages/ 필요에 따라 거주하기로 결정했습니다.

나중에 나는 페이지와 템플릿이 모두 사용하려는 자산이있을 수 있으므로 static/ 디렉토리 접근 방식에 항복했습니다. static/ 의 수입은 "마법"입니다. 즉, 당신은 그들이 일할 수있는 teeny build 의 출력에 대해 생각해야합니다.

Teeny가 지원하는 마지막 명령은 teeny develop 입니다. public/ 하위 디렉토리에서 HTTP 서버 대 서버 파일을 생성합니다.

파일 변경을 듣고 정적 파일을 즉시 업데이트합니다 (변경을 감지 할 때마다 모든 것을 재건함으로써 순진하게).

? 잠재적 인 미래 개선

나는 가능한 한 작은 작은 것을 유지하고 싶다. 나는 모든 코드를 하나의 파일에 의도적으로 한 파일에 넣었습니다. 이것은 간단한 정적 블로그를 빨리 구축 할 수있는 간단한 도구 일뿐입니다.

그러나 모든 "개발자 경험"업그레이드와 같은 몇 가지 "개발자 경험"업그레이드를 사용할 수 있으며, 모든 것을 순진하게 재건하는 대신 teeny develop 에 대한 최적화 된 접근 방식과 더 나은 사용자 정의 옵션을 사용할 수 있습니다.