skeleventy

スタータースケルトン

Skeleventyは、高速でアクセス可能な静的Webサイトを構築するための堅実な基盤を提供します。デモサイトを表示します。

特徴

• SCSSを備えたクリーンで最小限のビルドパイプラインとアセットをコンパイルするためのLaravelミックス
• Gorko、スマートな小さなサス駆動のユーティリティクラスジェネレーター
• 使用されていないCSSを除去するためのPurgecs
• HTMLミニフィーター
• Babel CompilationでES2017 JavaScriptをサポートしています
• Open GraphやTwitterを含むSEOフレンドリーページメタ
• 画像怠zyな読み込み
• モバイルナビゲーション
• XMLサイトマップ
• カテゴリと特集画像を備えたクリーンでシンプルなブログ

はじめる

前提条件

ノードv10+

インストール

1. レポgit clone https://github.com/josephdyer/skeleventy.gitクローンします
2. プロジェクトフォルダーにcd使用し、 npm install実行します
3. npm run devヒントを実行してローカル開発サーバーを開始します。

フォルダー構造

110

• site/すべてのグローバルデータ、テンプレート、コンテンツが含まれます
• utilities/収益filtersとtransforms含みます
• 各ページには、 index.mdファイルを含む独自のフォルダーが必要です
• その後、各ページに最も適切なレイアウトを選択できます（または必要に応じてさらに作成）
• ナビゲーションは公式のナビゲーションプラグインを搭載しています

資産

• css/コンパイルされたCSSの場合
• js/コンパイルされたJavaScript用
• images/サイトの画像、SVGアイコンスプライト、メタ画像用のフォルダー（OG、Twitterなど）が含まれています

ビルドパイプライン

Laravel Mixは、Webpackの上に素敵なAPIレイヤーを提供します。 Skeleventyは単純化されたセットアップを使用しますが、必要に応じて、カスタムWebパック構成、コード分割、PostCSSなどのプラグインを拡張することを利用できます。

resources/ミックスが変更のためにこれらのディレクトリを視聴するサイトの未模様のSCSSとJSは、サイトの非縮小SCSSとJSを見つけることができます。ヒント：新しいパルティアルまたはフォルダーを作成するときは、常にサーバーを再起動することをお勧めします

SCSS

• scss/ 、意見のあるサブフォルダーに構造化されています
• _config.scssファイルは、サイトの色とGorkoによって生成されたユーティリティクラスを変更できる場所です。
• 私の個人的なお気に入りのメジャーサードスケールを使用して、誤字尺度がすでにセットアップされています。
• ヒント：その他のスケールについては、タイプスケールをチェックしてください

ゴルコ

私は、純粋にそのシンプルさと保守性（特に新しい開発者にとって）のために、Gorkoを支持してTailwindを削除することにしました。そもそも必要なものを追加することができず、必要なものを追加することで、よりシンプルで保守可能なコードベースにつながります。 Gorkoでは、コードを乾燥させるのに役立つ再利用可能なユーティリティクラスの振りかけを追加できます。この便利な小さなツールを作ってくれたアンディ・ベルにクレジット

JavaScript

• utilities/グローバルユーティリティ/ヘルパー関数が含まれています
• modules/サイトの実際のJavaScriptを含み、それぞれのモジュール式サブフォルダー内ですべてがきれいで整頓されています
• これらのサブフォルダーをmain.jsにインポートすることができますimport '@modules/example-module'
• ヒント： webpack.mix.jsファイルを介してオプションのインポートエイリアスを設定できます

レスポンシブ画像に関するメモ

Skeleventyには、レスポンシブな画像が焼き付けられていません。主な理由は、CDNを使用するのが最善です。 Cloudinaryを使用してEleventyの設定に関するこのチュートリアルをご覧ください。