HubSpot CMS ローカル環境構築手順
公式HPを見ながらやればいいのだけど、シークレットを設定するあたりで割とてこずったのでメモ。
- 前提条件(必要なツール)
既にインストール済みのツール
Node.js: v20.19.2
HubSpot CLI: v7.6.0
Git: 最新版
インストール確認コマンド - HubSpotアカウントの設定
2.1 HubSpotアカウントの確認
設定済みアカウントと別に作成する場合はメモしておく
2.2 手動アップロードコマンド - GitHubリポジトリの作成
3.1 ローカルでGitを初期化
3.2 初回コミット
3.3 GitHubでリポジトリを作成
https://github.com/new にアクセス
Repository name: なんか適当に英語で付ける
Description: 簡単でもあったほうが後々便利
Private を選択
Initialize this repository with のオプションは全てオフ
「Create repository」をクリック
3.4 リモートリポジトリを追加してプッシュ - GitHub Actions 自動デプロイの設定
4.1 HubSpot Personal Access Key の取得
https://developers.hubspot.jp/docs/cms/start-building/introduction/developer-environment/personal-access-key
HubSpotのどこから行くのかよくわからないときは↑のリンクから飛ぶのが一番楽。
Personal Access Token をコピー
4.2 GitHubでシークレットを設定
GitHubリポジトリを開く: https://github.com/ユーザー名/さっき作ったリポジトリ名
「Settings」タブ → 「Secrets and variables」 → 「Actions」
「New repository secret」をクリック
1つ目のシークレット:
Name: HUBSPOT_PORTAL_ID
Secret: 番号
2つ目のシークレット:
Name: HUBSPOT_PERSONAL_ACCESS_KEY
Secret: (手順4.1で取得したトークン)
4.3 デプロイ設定ファイル(最終版)
.github/workflows/deploy.yml:
5. 日常的な開発フロー
5.1 ファイルの編集後
5.2 GitHub Actionsの確認
https://github.com/ユーザー名/さっき作ったリポジトリ名/actions
緑のチェックマーク✅で成功、赤いX❌で失敗
6. トラブルシューティング
エラー: Unknown argument: portal
原因: HubSpot CLI v7以降では --portal が --account に変更された
解決策:
エラー: Node.js version not supported
原因: Node.js 18以上が必要
解決策: GitHub Actionsで明示的にNode.js 20を指定
エラー: hubspot.config.yml file could not be found
原因: 設定ファイルがプロジェクトルートにない
解決策: プロジェクトルートに hubspot.config.yml を作成
7. 重要なファイル
.gitignore(抜粋)
8. 参考リンク
HubSpot CMS CLI ドキュメント: https://developers.hubspot.com/docs/cms/guides/getting-started-with-local-development
GitHub Actions ドキュメント: https://docs.github.com/en/actions
- まとめ
構築した環境
✅ HubSpot CMS テーマのローカル開発環境
✅ GitHubでのバージョン管理
✅ GitHub Actions による自動デプロイ
6のトラブルシューティングがそこそこにトラップだったかも。