Cleaver - Laravel 블레이드를 사용한 빠른 정적 사이트 생성기

tl;의사: github.com/aschmelyun/cleaver 자세한 내용
나는 네가 무슨 생각을 하고 있는지 안다. "어머나, 또 다른 정적 사이트 생성기."너는 옳지만, 나는 내가 창조한 이것이 너와 접촉한 것과 좀 다르기를 바란다.
나는 여러 사람을 위해 여러 가지 일을 하려고 하지 않았고, 모든 사람에게 가능한 한 우호적으로 하려고 하지 않았으며, Cleaver를 개발자에게 가능한 한 개방적으로 설계했다.
백그라운드에서 그것은 매우 간단한 응용 프로그램으로 그 핵심은 700여 줄 코드이다.

그것은 어디에서 왔습니까?

Cleaver의 디자인 취지는 데이터 구동의 로그인 페이지를 신속하게 구축하는 데 도움을 주는 것입니다.나와 시장의 다른 SSG의 문제는 당신이 보통 가격 인하나 생성기가 사용하는 언어 사이에 갇혀 있다는 것이다.이것은 블로그나 그 어떠한 내용 집약형 사이트에도 문제가 되지 않지만, 나는 문서 사이트와 온라인 규범표를 구축하려고 시도할 때 문제를 만났다.
나는 정말 JSON에서 내가 API에서 되돌아온 데이터를 얻는 것처럼 사이트를 구축할 수 있기를 바란다.그래서 내가 이렇게 만들었어!
Cleaver는 로컬에 저장된 JSON 파일을 가져와 제공된 키를 사용하여 해당 데이터를 PHP 변수로 직접 해석합니다.이것은 Laravel의 Blade 템플릿 엔진에 전달됩니다. 모든 내용이 정적 HTML 파일로 컴파일되어 설정된 디렉터리 트리에 저장됩니다.
예를 들어, JSON은 다음과 같습니다.

{
    "view": "layouts.default",
    "path": "/posts/a-whole-new-world",
    "title": "A Whole New World",
    "description": "Shining, shimmering, splendid.",
    "items": [
        "Three Forks",
        "Seven Spoons",
        "One Butter Knife"
    ]
}

다음 PHP 변수로 변환합니다.

$view 
"layouts.default"

$path
"/posts/a-whole-new-world"

$title
"A Whole New World"

$description
"Shining, shimmering, splendid."

$items
array("Three Forks", "Seven Spoons", "One Butter Knife")

이 내용은 자원 디렉터리에서 선택한 칼날 템플릿으로 전달됩니다. (이 예에서views/layouts/default.Blade.php)그리고 Laravel 응용 프로그램처럼 사용할 수 있습니다.

<h1>{{ $title }}</h1>
<h4>{{ $description }}</h4>
<ul>
    @foreach($items as $item)
        <li>{{ $item }}</li>
    @endforeach
</ul>

간단한 npm run dev 스크립트를 통해 사이트를 컴파일한 후posts/a-whole-new-world/index에서 정적 HTML 파일을 출력합니다./dist 디렉터리의 html.
usecleaver.com 로그인 페이지 here을 포함하는 저장소에서 더 좋은 예시를 볼 수 있습니다.

입문

컴퓨터에 다음 구성 요소가 설치되어 있는지 확인해야 합니다.

필리핀 비소

작곡가

노드

NPM

Cleaver 사이트를 만드는 가장 간단한 방법은 다음 명령을 실행하는 것입니다.

composer create-project aschmelyun/cleaver your-site-name

이것은 repo에서 최신 버전의 Cleaver를 다운로드하여 필요한 패키지를 설치하고 모든 내용을 your-site-name이라는 폴더에 저장합니다.물론 실제 원하는 사이트 디렉터리를 반영하기 위해 변경하십시오.
터미널에서 새로 만든 폴더로 이동하여 다음 명령을 실행하여 필요한 노드 패키지를 설치하고 사이트를 처음 컴파일합니다.

npm install && npm run dev

약 몇 분 후에 사이트가 성공적으로 구축되었을 것입니다. 프레젠테이션 내용 (usecleaver.com/docs 페이지의 가상 버전) 을 포함하고 프로젝트 루트 디렉터리의 /dist 폴더에 추가됩니다.
우리들은 계속해서 새로운 페이지를 제작합시다.

페이지 작성 및 구성

사이트를 구축하는 데 사용되는 모든 내용은 resources/content 디렉터리에 있습니다.여기에서 JSON과 태그 파일을 추가하여 원하는 대로 구성하고 이름을 지정할 수 있습니다.많은 다른 정적 사이트 생성기와 달리 내용 디렉터리의 구조는 구축 사이트의 구조에 영향을 주지 않는다.
각 컨텐트 파일에서 페이지를 성공적으로 컴파일하려면 두 개의 키를 설정해야 합니다.이것은 보기와 경로입니다.각자의 역할과 그 역할이 왜 중요한지 살펴보자.

뷰는 페이지를 컴파일하는 블레이드 템플릿입니다.지정한 파일에 다른 블레이드 템플릿을 사용할 수 있지만 사용할 템플릿입니다.

경로는 Cleaver가 실행되면 이 페이지가 dist 디렉토리에서 끝나는 위치입니다.예를 들어, 만약 당신이 myblog라는 사이트를 가지고 있다면.com 그리고 이 페이지가 myblog에 존재하기를 바랍니다.com/posts/a-cool-post, 경로 값은 /posts/a-cool-post입니다.

앞에서 설명한 대로 Cleaver는 JSON 파일과 가격 인하를 수락합니다.다음은 유사한 페이지에 대한 예입니다.


가장 큰 차이점은 블레이드 템플릿에서 데이터를 액세스하는 방법입니다.
JSON 컨텐트 파일의 경우 각 키는 단일 변수로 사용됩니다.위의 예시에서 $title 문자열과 $paragraphs 문자열 그룹을 인용할 것입니다.
그러나 가격 인하를 사용할 때 마지막 세 개의 대시 이하의 모든 내용은 하나의 $content 변수로 주입된다.이 옵션을 사용하면 Blade 가 다시 표시 바로 가기로 전환되지 않습니다 (!!! $content!!!)태그 파일에서 컴파일된 올바른 HTML 태그가 표시됩니다.

자산 수정

Cleaver는 Sass 파일을 사용하여 스타일을 설정하고 Tailwind CSS 유틸리티 라이브러리에 자동으로 로드됩니다.resources/assets/sass 디렉터리에 자신의 스타일을 추가하거나 현재 설정된 스타일을 덮어쓸 수 있습니다.기본적으로 app.scss이라는 파일이 있습니다. 이 파일은 Tailwind 라이브러리만 가져오지만 필요에 따라 Sass 파일이나 불러오는 항목을 가져오고 사용자 정의 클래스를 삭제할 수 있습니다.resources/assets/js 디렉토리로 이동하면 app.js이라는 JavaScript 파일이 표시됩니다.스타일처럼, 클리프는 이곳에서 아주 간단한 방법을 가지고 있다.this file은 lodash, jQuery, Vue를 가져오는 것뿐입니다. 사이트에 현대적이고 확장 가능한 전단 기능의 시작점을 제공합니다.Laravel의 웹 패키지 혼합을 통해 모든 내용을 도입하고 있기 때문에 전체 자바스크립트에서 ES6 문법과 import/require 문장을 사용할 수 있습니다.

구축 및 배포

자산을 컴파일하고 내용 파일을 사용하여 정적 사이트를 구축하려면 프로젝트 루트 디렉터리에서 다음 명령 중 하나를 실행하십시오.npm run dev 또는 npm run production둘 다 사용자의 모든 CSS/JS를 컴파일하고 사이트를 구축하지만, 운영 운영은 자산 파일을 축소하고 버전화합니다.후자는 확실히 더 긴 시간이 필요하지만, 사이트를 생산 환경에 배치하려면 후자를 사용하는 것을 권장한다.
또한 npm run watch을 사용하면 로컬 웹 서버를 시작하고 자산과 내용 파일에 대한 모든 변경 사항을 감시하며 변경 사항을 저장할 때마다 전체 사이트를 다시 컴파일할 수 있습니다.
사이트를 구축하면 전체 표시 트리와 자산은 프로젝트 루트 디렉터리 아래의 dist 디렉터리에 있습니다.이 파일을 웹 서버의 공공 루트 디렉터리에 직접 업로드하여 서비스를 제공할 수도 있고, 전체 항목을 제출하고 웹 서버의 공공 폴더를 조정하여 dist 디렉터리를 가리킬 수도 있습니다.
주의: 사이트를 컴파일하고 싶지만 자산을 컴파일하지 않으려면 프로젝트 루트에서 php cleaver 명령을 실행할 수 있습니다.

그렇습니다!

나는 네가 이것을 좋아하길 바란다 (빨리?)Cleaver의 붕괴로 나는 결국 정적 사이트 생성기를 만들어 내 문제를 해결했다.만약 네가 마지막으로 시도해 본다면, 어떤 문제, 우려 또는 기능 요구가 있다면, 나는 기꺼이 들어 보겠다.GitHub으로 전화하시거나 직접 연락 주십시오.