はじめに
HubSpot CLI（Command Line Interface）とは、HubSpotのAPIを利用して、コマンドライン（ターミナル）からHubSpot CMSを操作するためのツールです。
ローカルで開発したテーマファイル（ボイラープレート）やモジュールなどをCMS上に反映することができます。
他には、Hubspotが提供しているテーマやモジュールをローカルに取り込むことができるので、テーマ開発やモジュールを作成する時に役立ちます。
使い方
HubSpot CLIを使用するには、まずNode.jsをインストールする必要があります。
Node.jsをインストールしたら以下のコマンドを実行して、HubSpot CLIをインストールできます。
CLIのインストール
npm install -g @hubspot/cli
現在のディレクトリーにのみインストール
npm install @hubspot/cli
アップグレード
最新バージョンにアップグレードする。
npm install -g @hubspot/cli@latest
ローカルでテーマ開発するまでの手順
1. init
hubspot.config.ymlファイルを作成し、アカウントの認証を設定します。
hs init
- personalAccessKey を求められるので[y]を入力
- Hubspotページに遷移するするのでログインする
- アクセスキーページに遷移する
- アクセスキーをコピーしてターミナルに貼り付ける
2. テーマを作成する
CMSのボイラープレートを利用します。
// 説明
hs <command> <src> <dest>
// ボイラープレートが取り込まれたテーマファイルを作成
hs create website-theme my-website-theme
3. テーマをHubSpotにアップロードする
アップロードするとCMSからテーマを使用することができます。
CMS上部のナビゲーションから[マーケティング] > [ファイルとテンプレート] > [デザイン ツール]に移動して表示されるデザインマネージャーでファイルを確認することができます。
hs upload my-website-theme my-website-theme
テーマ開発でよく使うコマンド
watch
ローカルディレクトリーを監視し、ファイルが保存されると変更内容をCMSに自動的にアップロードします。
CMSのライブプレビューでブラウザ表示すれば変更を即時に確認することができます。
hs watch my-website-theme my-website-theme
注意点
- 監視対象のファイルをローカル側で削除しても、HubSpotからは自動的に削除されません。ファイルを削除するには、--removeを使用します。
- ローカル側でフォルダーの名前を変更すると、新しいフォルダーが新しい名前でHubSpotにアップロードされます。HubSpot上にある既存のフォルダーは自動的には削除されません。フォルダーを削除するには、--removeを使用します。
fetch
Gitでいうpullのようなものです。
CMS上で作成したモジュールをローカルに取り込んで編集するときによく使いました。
hs fetch my-website-theme my-website-theme
すでにローカルにあるデータを上書きする場合は--overwriteのオプションをつける必要があります。
hs fetch --overwrite my-website-theme my-website-theme
注意
上記のオプションを付け忘れるとローカルデータが更新されません。
その状態でCMSにデータをアップロードすると、CMSのデータが先祖返りする恐れがありますのでご注意ください。