wodle
1.0.0
Wodle は、最新の Web 開発のための新しいフレームワークとツールを使用する静的サイト ジェネレーターです。 Next.js と Tachyon の上に構築されています。また、生成された静的サイトを完全に動的な Web サイトに簡単に変えることができます。
NextJS と関数型 CSS を使用すると、ブログや静的ページを非常に簡単に始めることができるため、これらのテクノロジーを学びたいブロガーや開発者にとっては良い出発点となります。
npm 経由でWodle をインストールできます。
npm install -g wodle
Wodle がインストールされたら、 wodleコマンドを使用できるようになります。新しいサイトを構築するには、次のコマンドを実行できます。
wodle myBlog
これにより、コマンドを実行したディレクトリと同じディレクトリにmyBlogという新しいサイトが生成されます。
新しいサイトの使用を開始するには、そのサイトに cd でアクセスし、依存関係をインストールするだけです。
cd myBlog
yarn
これにより、すべての依存関係がフェッチされます。準備が完了したら、サーバーを実行して開始できます。
yarn dev
そして、 localhost:3000/に移動すると、次のようなサイトが表示されるはずです。
そのサーバーはアプリの変更をリッスンし、ブラウザをリロードします。
ホットリロードを行わずにサイトを実行したい場合は、次のコマンドを実行できます。
yarn start
サイトを構築するには、次のコマンドを実行できます。
yarn build
これにより、静的サイトを公開する準備ができたout/フォルダーが生成されます。
サイトにはさまざまなフォルダーが存在します。
このフォルダーにはページ ファイルが含まれており、その名前はルートと一致するため、 /new-pageに新しいページを追加する場合は、このフォルダーにnew-page.jsという新しいコンポーネントを追加する必要があります。高度なルーティングについては、ここを確認してください。
スキャフォールドには、 componentsフォルダーに事前に構築されたいくつかのページ コンポーネントが付属しています。
このフォルダーには、サイト上のすべての事前構築済みコンポーネントが含まれています。このスキャフォールド アプリのコア コンポーネントは次のとおりです。
項目を取得し、その NavItem を使用して Nav をレンダリングするサイドバー コンポーネント。このコンポーネントのコンテンツはcontent/sideBarOptions.jsにあります。
このコンポーネントは、メイン セクション (サイトの中心) に表示したいものをラップするだけです。
このコンポーネントは、インデックスと各特定の記事に見られるように、メインの記事をレンダリングします。このコンポーネントで処理できるコンテンツのデモは、 content/mainArticleにあります。
このコンポーネントは、サイドバー メニューの個々のページに表示される記事のリストをレンダリングします。 <something>Articles.jsファイルのcontent/にリストが表示されます。
とりわけ
スタイル フォルダーはすべての CSS 用です (現在は機能的な CSS と Tachyons のおかげでほぼ空です)
ページの削除 ( pagesフォルダーからファイルの削除) を続けて、足場のパターンに従ってさらにページ、記事、オプションを追加することも、必要に応じてすべてを変更することもできます。 Next.js サイトと Tachyons で素晴らしいガイドを読んで、素晴らしい Web サイトやブログを作成できます。
先行技術 chibicode.com および jspg に基づいています
