インストール

このページでは Spear のインストール方法とプロジェクトの作成方法を説明します。

プロジェクトの作成

npm だけをインストールしていれば、他の CLI ツールのようなグローバルパッケージを追加する必要はありません。以下のコマンドを実行するだけです。

# npm create spear@latest

このコマンドを実行後、プロジェクト作成のウィザードが始まります。

ウィザード

Spear のウィザードはウェブサイトを構築するためのいくつかの質問を聞いてきます。

# npm create spear 
### Welcome to Spear CLI ###


? Name of your project
? Use Spearly CMS
? Enter your Spearly CMS API KEY
? Choose template type
? Generate Sitemap?
? Enter your hosting URL (Example: https://foobar.netlify.app/)
? Add ESLint for JavaScript code quality?

ステップ	入力内容
プロジェクト名	希望のプロジェクト名を入力します。
Spearly CMS利用の有無	もしSpearly CMSと連携する必要があれば「Yes」を選択します。詳細については、CMSとの接続を参照してください。
Spearly CMSのAPIキー	もし直前の質問に「Yes」と答えた場合、Spearly CMSのAPIキーを入力する必要があります。
テンプレートタイプ	basicとemptyから希望のプロジェクトテンプレートを選択します。
サイトマップ	もしサイトマップを生成したい場合は「Yes」を選択します。
URL	もし直前の質問に「Yes」と答えた場合、ホスティング先のURLを入力する必要があります。このウィザード設定後でも、設定ファイルを変更することで値を変えられます。

- `Name of your project` : プロジェクト名 - 希望のプロジェクト名を入力します。- `Use Spearly CMS` : Spearly CMS 利用の有無 - もし Spearly CMS と連携する必要があれば「Yes」を選択します。 - 詳細については, [CMSとの接続](/jp/basic/connect-cms.html)を参照してください。- Spearly CMS API KEY : Spearly CMS の API キー - もし直前の質問に「Yes」と答えた場合、Spearly CMS の API キーを入力する必要があります。- Template type : テンプレートタイプ - `basic` と `empty` から希望のプロジェクトテンプレートを選択します。- Sitemap : サイトマップ - もしサイトマップを生成したい場合は「Yes」を選択します。- URL - もし直前の質問に「Yes」と答えた場合、ホスティング先のURLを入力する必要があります。 - このウィザード設定後でも、設定ファイルを変更することで値を変えられます。

Spear プロジェクト設定

Spear は以下のような spear.config.mjs を元にビルドしています。

export default {
  "projectName": "Sample Project",
  "generateSitemap": false,
  "siteURL": "https://sample.com",
  "spearlyAuthKey": "***********"
}

この設定ファイルは編集可能で、以下のオプションパラメータを許可しています。

設定パラメータ

設定 key設定値の型説明projectNamestringプロジェクト名 (この値はタイトルに {{projectName}} があるタグで利用されます)spearlyAuthKeystringチームの Spealry 認証キー(トークン)generateSitemapbooleanもしこのオプションが true の場合、 Spear は sitemap.xml を生成します。siteURLstringもし generateSitemap オプションが true の場合、自身のURLを指定する必要があります。pluginsarrayプラグインを指定します。Spear は3つのプラグインを提供しています。詳細については、Pluginsを参照してください。quietModebooleanもしこのオプションが true の場合、Spear は何も出力しません。embedModebooleanもしこのオプションが true の場合、Spear はイメージリソースを HTML に埋め込みます。debugModebooleanもしこのオプションが true の場合、Spear はデバッグ情報を HTML 要素に埋め込みます。generateComponentsbooleanもしこのオプションが true の場合、Spear はコンポーネントの HTML も出力します。componentsFolderstringコンポーネントフォルダを指定します。srcDirstringソースディレクトリを指定します。portnumber開発モードのサーバーポートを指定します。hoststring開発モードのホスト名をしています。apiDomainstringAPI のドメインを指定します。crossOriginIsolationbooleanWeb Containers を使って Spear をブラウザ上で動かす場合、このオプションを有効にします。