zola vite demo

ゾーラ + ヴィテのデモ

これは、特別なプラグインを使用せずに Zola と Vite を適切に接続する方法を示す最小限の動作デモです。

• Zola は、Jinja2/Twig のような構文を持つ Tera テンプレート エンジンを使用する、シンプルで賢い静的サイト ジェネレーターです。
• Vite は Webpack に似たフロントエンド ビルド ツールですが、設定が簡単です。

これはスターター プロジェクトや定型的なものではないことに注意してください。

このデモでは:

• Zola は HTML 処理を担当し、Vite は JS および SASS 処理を担当します。 Vite ではなく Zola で SASS を処理したい場合、それを設定するのは簡単です (Zola のドキュメントと main.js の私のコメントを参照してください)。
• Zola と Vite 開発サーバーは並行して実行されます。
• ホットリロードは HTML、JS、SASS コードに対して機能します。
• コマンドはnpm run経由で利用できます (package.json を参照)。
• 本番ビルドは縮小されます。Zola は HTML を縮小し、Vite は JS と CSS を縮小します。

使用方法

1. リポジトリのcdを作成し、ディレクトリに移動します。
2. npm install実行して依存関係をインストールします。
3. npm run dev実行して、Zola および Vite dev サーバーを実行します。
4. ブラウザで http://127.0.0.1:1111/ を開きます。 「Zola + Vite デモへようこそ」とHello world!というページが表示されるはずです。ブラウザ コンソール内 (上のスクリーンショットのように)。
5. templates/index.htmlまたはjs/main.jsまたはsass/main.scssにいくつかの変更を加えます。 http://127.0.0.1:1111/ のページは即座に更新され、変更が反映されます。
6. npm run build実行して実稼働用にビルドします (ファイルはpublic/ディレクトリに移動します)。

既知の問題

1. Windows でのデモはテストしていません。
2. Vite のドキュメントには、そのエントリにimport 'vite/modulepreload-polyfill'を含める必要があると記載されていますが、その目的についてはよくわかりません (main.js を参照)。
3. http://localhost:3000/@vite/client で 404 が返された場合は、まず http://127.0.0.1:1111/ を開く必要があります。それでもうまくいかない場合は、これを参照してください。

ご提案、ご質問はありますか?

問題を開くだけです。このリポジトリの目的に関係のない問題はクローズ済みとしてマークされることに注意してください。