ローカル開発を開始する
HubSpot CLI(コマンド ライン インターフェイス)では、ローカルワークフローをHubSpotに接続し、CMS Hubでの開発時に、バージョン管理機能や使い慣れたテキストエディターなどのさまざまなウェブ開発テクノロジーを利用することが可能になります。
このガイドは、CMSの使用経験があり、CLIの操作に関心をお持ちの方に適しています。HubSpotのCMS Hubでの開発を初めて行う場合は、クイックスタートガイド(英語)の手順に従うことをお勧めします。
HubSpot CLIは、デベロッパー ファイル システムからのファイルのupload
(アップロード)、fetch
(フェッチ)、watch
(監視)に使用します。CLIを使用した構築では、アセットのローカルコピーが作成されます。コードがローカル環境にあるため、使い慣れたコードエディターやビルドツールを使用したり、コードをgitリポジトリーにコミットしたりできます。
CLIには開発のスピードアップに役立つ補助機能も用意されています。例えばhs create
コマンドでは、ボイラープレートを使用して、モジュールからテーマに至るまでさまざまなタイプのアセットをローカル環境で素早く作成できます。
このガイドでは、CLIのインストールと、CLIの主要機能である、HubSpotアカウントからのプロジェクトの取得とデザインツールへの変更のアップロードについて順に説明します。
コマンドとローカルファイル形式については、ローカル開発ツールのリファレンスを参照してください。
ローカルツールを使用するには、以下の手順に従う必要があります。
- Node.js(ローカルツールを有効にするJavaScriptランタイム環境)をインストールします。バージョン10以上のNode.jsがサポートされていますが、LTS(長期サポート)バージョンが推奨されます。
- HubSpotツールをグローバルにインストールする場合は、コマンドラインでnpm install -g @hubspot/cliを実行します。現在のディレクトリーにツールをインストールする場合は、npm install @hubspot/cliを実行します。
注:必要に応じてYarnも使用できます。必須ではありませんがHomebrow(英語)があれば、インストールを簡単に行えます。Yarnを使用する場合は、コマンドにyarnプレフィックスを付けて実行します。
インストール時にEACCESエラーが発生した場合
パッケージをグローバルにインストールする際のNPM Resolving EACCESアクセス許可エラー(英語)を参照してください。
ローカルプロジェクトのフォルダーを作成します。例えば、コマンドラインでmkdir local-cms-devを実行すると、このディレクトリーが作成されます。次に、cd local-cms-devを実行して、作成したディレクトリーに移動します。
hs init
を実行して、ツールをHubSpotアカウントに接続します。このコマンドは、以下の手順を案内します。
- まず、ローカル開発ツールによるアカウントへの認証アクセスを有効にするために、パーソナルCMSアクセスキーの作成について案内されます。既定のブラウザーで[パーソナルCMSアクセスキー]ページを開く準備ができたらEnterキーを押すように求められます。このページで、必要に応じてパーソナル アクセス キーを表示または作成できます(注:このチュートリアルを完了するには、少なくとも「デザインマネージャー」権限を選択する必要があります)。アクセスキーをコピーして、ターミナルに貼り付けます。
- 次に、アカウントの名前を入力します。これは、自分だけが確認および使用できる名前です。例えば、開発者サンドボックスを使用する場合は「sandbox」を使用し、完全な顧客アカウントを使用する場合は「会社の.com」を使用することができます。この名前にはスペースを含めることができません。この名前は、コマンドを実行するときに使用します。
このシンプルなinitフローを完了すると、設定ファイルhubspot.config.ymlが現在のディレクトリーに作成されたことを確認する成功メッセージが表示されます。
hubspot.config.ymlの例を次に示します。
hubspot.config.yml
では、複数のポータルがサポートされます。hubspot.config.yml
を作成した後でポータルを追加する場合は、hs auth
を使用すると最も簡単です。
コマンドを実行するときは、--account=オプションでnameまたはportalIdのいずれかを使用できます(例えば、--account=123と--account=sandboxでは、いずれも上記の例に基づきアカウントID 123を利用します)。最上位のdefaultPortalを設定する場合は、コマンドの--portal=オプションを省略できます。その場合、コマンドによってこの既定のポータルが参照されます。
fetchコマンドを使用してhs fetch --account=<name> <src> <dest>を実行し、プロジェクトフォルダーのツリーおよびファイル全体をHubSpotアカウントから取得してローカル環境に取り込みます。srcは、HubSpotデザインツールのプロジェクトパスです。destは、ファイルを配置するローカルディレクトリーのパス(現在の作業ディレクトリーを起点とする相対パス)です。現在の作業ディレクトリーにプロジェクトを取り込む場合は、<dest>引数を省略できます。
HubSpotアカウントからプロジェクトを取得する例を以下に示します。
以下はローカル環境に取得したデザインツールのプロジェクトです。

uploadコマンドを使用してhs upload --account=<name> <src> <dest>を実行し、ローカル環境のプロジェクトをHubSpotアカウントにアップロードします。これにより、<src>の内容がコピーされ、<dest>のHubSpotアカウントにアップロードされます。デザインツールで新しいプロジェクトを作成する場合は、<dest>をHubSpot内の新しいフォルダーとして指定できます。
サンプルプロジェクトをHubSpotアカウントにアップロードする例を以下に示します。
hs watch --account=<name> <src> <dest>を実行することにより、ローカルディレクトリーを監視し、ファイルの保存時に変更内容をHubSpotアカウントに自動的にアップロードします。
watchコマンドを使用してこの処理を実行する例を以下に示します。
HubSpot CLIに関する包括的な説明は、リファレンスドキュメントを参照してください。
貴重なご意見をありがとうございました。