HubSpot CLI &
開発ワークフロー

# Node.js バージョン確認（20以上が必要） node -v # v20.x.x 以上 # 既存 CLI があればアンインストール npm uninstall -g @hubspot/cli # 最新版をインストール npm install -g @hubspot/cli@latest # バージョン確認 hs --version # 8.x.x 以上であること # ヘルプ一覧 hs help

# 対話式認証（ブラウザが開く） hs auth # 認証情報を直接指定する場合 hs auth --portal-id 12345678 --personal-access-key "YOUR_KEY" # 登録済みポータルを確認 hs config list # デフォルトポータルを切り替え hs config set-default --portal 12345678

# プロジェクトルートに配置するポータル設定 defaultPortal: dev-sandbox portals: - name: dev-sandbox portalId: 11111111 authType: personalaccesskey personalAccessKey: '${HUBSPOT_PAK_DEV}' # 環境変数で管理 - name: production portalId: 99999999 authType: personalaccesskey personalAccessKey: '${HUBSPOT_PAK_PROD}' # コマンド実行時にポータルを指定 # hs cms upload --portal production

# プロジェクト作成 mkdir my-hubspot-theme && cd my-hubspot-theme git init # 既存テーマをダウンロード（デザインマネージャのパスを指定） hs cms fetch "@hubspot/growth" ./themes/growth --portal dev-sandbox # または新規テーマをスキャフォールド hs project create --template cms-theme-boilerplate # ローカルでの編集中は Watch モードを使用 hs cms watch ./themes/growth "@hubspot/growth" --portal dev-sandbox # 開発完了後、本番ポータルにアップロード hs cms upload ./themes/growth "@hubspot/growth" --portal production

# hubspot.config.yml（プロジェクトルートに配置） defaultPortal: dev portals: - name: dev portalId: 11111111 authType: personalaccesskey personalAccessKey: '${HUBSPOT_PAK_DEV}' env: development - name: staging portalId: 22222222 authType: personalaccesskey personalAccessKey: '${HUBSPOT_PAK_STAGING}' env: staging - name: production portalId: 99999999 authType: personalaccesskey personalAccessKey: '${HUBSPOT_PAK_PROD}' env: production # アップロード除外パターン allowedExtensions: - html - css - js - json - svg - png - jpg - webp - woff2

name: Deploy to HubSpot on: push: branches: - main # main マージ時に本番デプロイ paths: - 'themes/**' - 'modules/**' jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' cache: 'npm' - name: Install HubSpot CLI run: npm install -g @hubspot/cli@latest - name: Create HubSpot config run: | mkdir -p ~/.hubspot cat > hubspot.config.yml <<EOF defaultPortal: production portals: - name: production portalId: ${{ secrets.HUBSPOT_PORTAL_ID }} authType: personalaccesskey personalAccessKey: ${{ secrets.HUBSPOT_PAK_PROD }} EOF - name: Deploy Theme run: | hs cms upload ./themes/my-theme "my-theme" --portal production - name: Deploy Modules run: | hs cms upload ./modules "@hubspot/modules" --portal production

name: Deploy Preview to Staging on: pull_request: branches: - main jobs: preview: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' - run: npm install -g @hubspot/cli@latest - name: Create config run: | cat > hubspot.config.yml <<EOF defaultPortal: staging portals: - name: staging portalId: ${{ secrets.HUBSPOT_STAGING_ID }} authType: personalaccesskey personalAccessKey: ${{ secrets.HUBSPOT_PAK_STAGING }} EOF - name: Deploy to Staging run: hs cms upload ./themes/my-theme "my-theme" --portal staging - name: Comment PR uses: actions/github-script@v7 with: script: | github.rest.issues.createComment({ issue_number: context.issue.number, owner: context.repo.owner, repo: context.repo.repo, body: '✅ Staging にデプロイ完了。プレビューを確認してください。' })

# HubSpot Project の基本ディレクトリ構造 my-project/ ├── hsproject.json # プロジェクト設定 ├── src/ │ ├── app/ │ │ ├── app.json # アプリ設定 │ │ └── extensions/ │ │ ├── crm-card/ # CRM カード │ │ └── actions/ # カスタムアクション │ └── functions/ │ ├── my-function/ │ │ ├── my-function.functions/ │ │ │ └── index.js │ │ └── serverless.json │ └── package.json └── .gitignore

{ "name": "my-project", "srcDir": "src", "platformVersion": "2023.2" }

# プロジェクトを作成（対話式） hs project create # シークレット変数を登録 hs project secret add MY_API_KEY --portal dev-sandbox # ビルド & デプロイ hs project deploy --portal dev-sandbox # デプロイ状況を確認 hs project list-deploys --portal dev-sandbox # ログをリアルタイム表示 hs project logs --follow --portal dev-sandbox

name: Deploy HubSpot Project on: push: branches: [main] paths: ['src/**'] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '20' - run: npm install -g @hubspot/cli@latest - name: Setup config run: | cat > hubspot.config.yml <<EOF defaultPortal: production portals: - name: production portalId: ${{ secrets.HUBSPOT_PORTAL_ID }} authType: personalaccesskey personalAccessKey: ${{ secrets.HUBSPOT_PAK_PROD }} EOF - name: Install dependencies run: npm ci --prefix src/functions - name: Deploy Project run: hs project deploy --portal production

# 詳細ログを有効にして実行 hs cms upload ./themes/my-theme "my-theme" --debug # 設定内容を確認 hs config list # CLI のキャッシュをクリア hs config clear-cache # 環境変数で DEBUG モードを有効化 HUBSPOT_LOG_LEVEL=debug hs cms upload ./themes/my-theme "my-theme"