# HubSpot CMS ローカルで作業する手順

## HubSpot CLI（コマンドラインインターフェース）
HubSpotのローカル開発をサポートするためのツールで、バージョン管理機能や使い慣れたテキストエディター（VSCodeなど）を使用できる。
ローカルで開発したテーマファイル（ボイラープレートなど）やモジュールなどをCMS上に反映することができる。

### 依存関係のインストール
1. Node.jsのインストール
2. HubSpotCLIをインストール

npm install -g @hubspot/cli

任意のディレクトリのみにインストールしたい場合上記でなく以下を実行してください。
npm install @hubspot/cli

`hs --version`でインストールされたか確認できます。

### ローカル開発ツールを設定する

hs init

を実行してHubSpotアカウントに接続します。
もしここでエラーになったら
`hs auth`を実行してください。おそらく`hs init`を実行後のアカウント認証と同じ手順に進みます。

#### アカウント認証
`hs init`実行後、
1. yを入力してエンター
1. HubSpotのページに遷移します（ログインが必要です。）
1. 1PAC.INCを選択して、「このアカウントで続行」
1. パーソナルアクセスキーを表示してコピー
1. コピーしたアクセスキーをターミナルに貼り付けてエンター
1. 任意の名前を入力してエンター

アカウント情報が`hubspot.config.yml`に追加されます。

hs accounts list

を実行すれば認証済みのアカウントを確認できます。
このときAccount IDが1PAC.INCのID（44588788）になっていることをご確認ください。

Accounts:
  Name        Account ID Auth Type
  1PAC-suzuki 44588788   personalaccesskey

これでHubSpotCMSから取り込んだりアップしたりできるようになります。

#### `hs upload`の挙動
* ローカル側でファイルを削除した上で`hs upload`してもHubSpotからは自動的に削除されません。HubSpot側で削除する必要があります。
* ローカル側でファイルの名前を変更すると、新しいファイルが新しい名前でHubSpotにアップロードされます。
HubSpot上にある既存のファイルは自動的に削除されないので手動で削除する必要があります。

## 確認方法
1. hs uploadをしたら、デザインツール上の確認をしたいテンプレートを選択

1. プレビューの「表示オプションを使用したライブレビュー」を選択

* お知らせ・コラム一覧の場合
右上の「ブログを変更」でブログ名を選択、「ビューを変更」で「リストビュー」を選択
* お知らせ・コラム詳細の場合
右上の「ブログを変更」でブログ名を指定、「ビューを変更」で「リストビュー」を選択してから「記事ビュー」を選択
※詳細画面だけすぐにプレビューが反映されないので、このようにする必要があるみたいです。