micro site

概要資料の作成に使用できる独自のマイクロ フロントエンド。ランディング ページやサインアップ ページに最適です。内部では静的サイト ジェネレーター イレブンティ (11ty) を使用し、共通の 11ty デフォルトを設定します。

特徴

• clean-css使用して CSS をインライン化および縮小します
• terser使用して JavaScript をインライン化し、縮小します。
• metadata.jsonグローバル データ ファイルが含まれます
• base.njkレイアウト テンプレートが含まれています
• 静的ファイル (画像、フォントなど) 用のassets folderが含まれます。

これは*スケルトン プロジェクトであるため、コンポーネントや基本的なスタイルは含まれていません。これは*Bring Your Ownフロントエンドです。

使用法

1. 独自のサイトの詳細でmetadata.jsonファイルを更新します。
2. index.njkファイルを編集して、Web サイトのコーディングを開始してください。
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 © ダニー・デ・フリース