ビルド設定を行わずに静的 Web サイトを作成します。
npx create-static-site my-site --template hugo
cd my-site
npm start
(npx には npm 5.2 以降が付属します)
次に、http://localhost:3000/ を開いてアプリを確認します。
ローカル開発マシンには Node >= 6 が必要です。 nvm (macOS/Linux) または nvm-windows を使用すると、異なるプロジェクト間で Node のバージョンを簡単に切り替えることができます。
新しいアプリを作成するには、次を実行します。
npx create-static-site my-site --template [template] [template] hugoまたはjekyllに置き換えます。
現在のフォルダー内にmy-siteというディレクトリが作成されます。
そのディレクトリ内で、初期プロジェクト構造が生成され、推移的な依存関係がインストールされます。
my-site
├── LICENSE
├── node_modules
├── package.json
├── README.md
├── static-scripts.config.js
├── .browserslistrc
├── .eslintrc.yml
├── .gitignore
├── .postcssrc.js
├── .stylelintrc.yml
├── site/ # Depends on the static site generator
└── src/
├── css/
│ ├── styles.css
│ └── imports
│ └── resets.css
├── img/
│ └── svg/
│ ├── bitbucket.svg
│ ├── github.svg
│ └── gitlab.svg
└── js/
├── scripts.js
└── imports/
└── index.js
設定や複雑なフォルダー構造は必要なく、サイトの構築に必要なファイルのみが必要です。
インストールが完了したら、プロジェクト フォルダーを開くことができます。
cd my-site新しく作成したプロジェクト内で、いくつかの組み込みコマンドを実行できます。
npm startまたはyarn start Jekyll ユーザーは最初にbundle installを実行する必要があります
アプリを開発モードで実行します。
http://localhost:3000 を開いてブラウザで表示します。
コードを変更すると、ページは自動的にリロードされます。
npm buildまたはyarn build本番用のサイトをdistフォルダーに構築します。
依存関係が 1 つ:ビルドの依存関係が 1 つだけあります。 Webpack、Babel、ESLint、PostCSS、その他の素晴らしいプロジェクトを使用していますが、それらに加えて、一貫した厳選されたエクスペリエンスを提供します。
構成は不要:何も構成する必要はありません。開発ビルドと運用ビルドの両方の適切な構成が自動的に処理されるため、コードの作成に集中できます。
ロックインなし:いつでもカスタム セットアップに「イジェクト」できます。単一のコマンドを実行すると、すべての構成とビルドの依存関係がプロジェクトに直接移動されるため、中断したところから再開できます。
あなたの環境には、最新の静的 Web サイトを構築するために必要なものがすべて揃っています。
トレードオフとして、これらのツールは特定の方法で動作するように事前設定されています。プロジェクトでさらにカスタマイズが必要な場合は、プロジェクトを「取り出し」てカスタマイズできますが、その場合はこの構成を維持する必要があります。
静的サイトは、静的で変更されないファイルを使用して構築された Web サイトです。コンテンツは静的であるため、ユーザーへの配信にはサーバーの処理時間は必要ありません。この機能により、静的サイトが信じられないほど高速でパフォーマンスが高くなります。
静的サイト ジェネレーターは、静的サイトを構築する最新の方法です。単純なテキストベースのコンテンツ ファイルを、Web で使用できる静的ファイルに変換します。
これらは、Wordpress などの既存のモノリシック CMS ソリューションと比較して、非常に高速で、バージョン管理で動作するように構築されており、セットアップがほとんどまたはまったく必要ないため、開発者にとって素晴らしいものです。
現在、 create-static-site 2 つの静的サイト ジェネレーターをサポートしています。
create-static-siteについてご協力いただければ幸いです。探しているものと開始方法の詳細については、CONTRIBUTING.md を参照してください。
これらの素晴らしい人々に感謝します (絵文字キー):
クリスドマクレー ? ? ? ? ? ✅ | ンクフィリップス ? ? ? ? ? | ブライアン・クライン ? ? | スコット・ギャラント ? ? | DJ ? | セバスチャン・エンゲルス ? ? | アダム ? |
|---|
このプロジェクトは、全員参加者の仕様に従っています。あらゆる種類の貢献を歓迎します!
このプロジェクトは、素晴らしい create-react-app プロジェクトから大きなインスピレーションを得ています。