Cleaverラーラエルブレードを用いたブレージング高速静的サイト発生器

TLドクターgithub.com/aschmelyun/cleaver 詳しくは
私は、あなたがおそらく考えていることを知っています.そして、あなたは正しいだろう、しかし、私は私が作成したものがあなたが露出したものより少し異なることを望んでいます.
代わりに、複数の人々のために複数のことをしようとする代わりに、できるだけ誰にでもできるだけ友好的にしようとすると、私は可能な限り開発者に開かれるようにCleaverを設計しました.
フードの下ではかなり簡単なアプリケーションは、コアのコードの700行以上です.

どこから来たのですか。

私自身のかゆみを掻くことから生まれて、Cleaverは速く私がデータ駆動着陸ページを造るのを援助するようになっていました.私が市場で他のSSGを持っていたという問題は、あなたが通常Markdownの間で動かされるということです、あるいは、ジェネレータが書かれる言語.これはブログのような何かまたはどんな重いウェブサイトの問題でもありません、しかし、私はドキュメンテーションサイトとオンライン仕様シートを構築しようとしている問題に乗りました.
私は本当に、私が私がAPIから私に返されたならば、私がJSONからサイトを構築することができたかったです.だから、私はそれを作成!
Cleaverは、ローカルに保存されたJSONファイルを受け取り、あなたが提供したキーを使用してPHP変数に直接それらのデータを解析します.これはLaravelのブレードテンプレートエンジンに渡され、すべての静的HTMLファイルにコンパイルされ、設定されたディレクトリツリーに保存されます.
そのため、例えば以下のようにします.

{
    "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")

これらは、選択されたあなたの刃テンプレート(この場合、View/Layouts/Default . Blend . phpに位置する)にリソースディレクトリに渡されます.それから、Laravelアプリケーションのように使用できます.

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

簡単にサイトをコンパイルした後npm run dev スクリプトで、レンダリングされた静的なHTMLファイルを投稿/A - NEW - world/indexで出力します.アンダーHTML/dist ディレクトリ.
あなたは、以下を含む倉庫の上でこれのより良い例を見ることができますusecleaver.com ランディングページhere .

始める

マシンにインストールされていることを確認します.

PHP

作曲家

ノード

国立天文台

Cleaverサイトを作成するための最も簡単な方法は以下のコマンドを実行することです.

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

これはCleaverの最新バージョンをダウンロードしますrepo , 必要なパッケージをインストールし、your-site-name . もちろん、あなたが実際にあなたのサイトディレクトリが欲しいものを反映するために、それを変えてください.
新しく作成したフォルダに端末で移動し、必要なノードパッケージをインストールして、サイトをコンパイルするには、次のコマンドを実行します.

npm install && npm run dev

数分かそこら後、あなたのサイトが正常にデモコンテンツを含めて構築されている必要がありますusecleaver.com/docs を参照)/dist プロジェクトのルートディレクトリのフォルダ.
新しいページを作りましょう.

ページの作成と構造化

あなたのサイトを構築するために使用されるすべてのコンテンツはresources/content ディレクトリ.ここでは、JSONとMarkdownファイルを追加することができます整理し、フィットを参照して任意の特定の方法で名前.他の多くの静的サイトジェネレータとは異なり、コンテンツディレクトリの構造は構築されたサイトの構造には影響しません.
各コンテンツファイルの内部には、ページが正常にコンパイルされるように設定する必要のある2つのキーがあります.それらはビューとパスです.それらの各々が何をするか、そして、なぜ、彼らが重要であるかについて見ましょう

ビューは、ページがコンパイルされるブレードテンプレートです.指定したファイルに他のブレードテンプレートを使用することができます.

パスは、このページがあなたのdist ディレクトリの後にディレクトリを実行します.たとえば、MyBlogというサイトがある場合.このページはMyBlogにあります.com/post/a - cool - post ,パスの値は/posts/a-cool-post .

前述のように、Cleaverは両方のJSONファイルだけでなく、Markdownを受け入れます.以下に、同様のページに使用されるそれぞれの例を示します.


つの間の最大の違いは、データがどのようにあなたの刃テンプレートでアクセスされるかです.
JSONコンテンツファイルの場合、各キーは個々の変数として使用されます.したがって、上記の例では$title 文字列と$paragraphs 文字列の配列.
しかし、Markdownを使用するとき、最後の3つのダッシュの下のすべては、シングル$content 変数.これを使用する場合、ブレードのエスケープされていないエコーショートカット{ !!$ content - no !!}マークダウンファイルからコンパイルされる適切なHTMLタグを出力します.

資産変更

Cleaverスタイラスのためのsassファイルを使用して、自動負荷Tailwind ユーティリティライブラリ.あなた自身のスタイルを追加することができますか、現在設定されているresources/assets/sass ディレクトリ.デフォルトでは、そこに一つのファイルがありますapp.scss これは単にTailwindライブラリをインポートしますが、独自のSASSファイルをインポートしたり、追加したり、カスタムクラスを削除してください.
へのナビゲーションresources/assets/js ディレクトリを参照してくださいapp.js . スタイルと同じように、Cleaverは非常に素骨がここにアプローチしています.すべてthis file あなたのサイトにフロントエンド機能のための現代的で拡張可能な出発点を与えることは、ログアウト、jQueryとVueをインポートすることです.LaravelのWebpackラッパーミックスを通してすべてを引っ張っているので、あなたはJavaScriptを通してES 6構文とインポート/必要文を使用できます.

構築と展開

あなたの資産をコンパイルし、コンテンツファイルを使用して静的サイトを構築するには、プロジェクトのルートから以下のコマンドを実行します.npm run dev or npm run production両方ともあなたのCSS/JSのすべてをコンパイルして、あなたのサイトを構築するでしょう、しかし、生産を実行することはあなたの資産ファイルをminifyして、バージョンにします.後者は少し長くなりますが、生産環境にあなたのサイトを展開するつもりならば、推奨されます.
また、使用することができますnpm run watch これは、ローカルのWebサーバーを起動し、すべての変更を監視し、お客様の資産やコンテンツファイルは、全体のサイトを再コンパイルするたびに変更を保存します.
一度あなたのサイトを構築したら、全体のマークアップツリーと資産はdist プロジェクトのルートディレクトリ.このファイルを直接Webサーバのパブリックルートにアップロードしたり、プロジェクト全体をコミットしたり、Webサーバーのパブリックフォルダをdist ディレクトリ.
注:あなたのサイトをコンパイルしたいのですが、あなたの資産ではなくphp cleaver プロジェクトルートからのコマンド.

それだ！

これをお楽しみくださいCleaverのランダウン、静的サイトジェネレータ私は自分のかゆみを傷に構築を終了しました.あなたがそれを試してみて、任意の質問、懸念、または機能のリクエストを持って終了する場合は、私は彼らについて聞いてみたい!お気軽に問題を開くGitHub , または私に直接手を差し伸べる.