AQ Tech Blog

Content HubとGitHubを連携して効率化

作成者: ayaka.oida|2024年09月17日

はじめに

こんにちは!デジタルエンジニアリング部の老田です。

この記事では、Content Hub、コードエディタ、GitHubの連携について解説します。コードエディタでコードを編集し、GitHubでマージすることで、GitHub Actionsを活用してHubSpotのデザインマネージャーに自動で反映される設定方法を紹介します。

アジアクエストではContent Hubを利用してコーポレートサイトやTechBlogなどのウェブサイトを運営しています。 HubSpotにはデザインマネージャーがあり、HubSpot上でコード管理ができるという利点があります。 しかし、コードの修正時に変更前と変更後の差分が表示されないため、レビューが難しいという課題がありました。

そこで今回は、Content Hubのデザインマネージャーとコードエディタ、GitHubを連携させることで、コードエディタでのコード編集、GitHubでのコード管理、そしてHubSpotでのコンテンツ反映を一つのワークフローとして実現する方法を紹介します。

Content Hubについて

Content Hubは、HubSpot社が提供するマーケティング、セールス、サービスを統合したオールインワンプラットフォームのCMS機能の名称です。CMS(Content Management System、コンテンツ管理システム)とは、ウェブサイトのすべてのコンテンツを一元管理できるシステムのことを指します。

HubSpot CLIについて

HubSpot CLI(Command Line Interface)は、HubSpotのAPIを利用してローカル開発環境とHubSpotを接続するためのツールです。 主に以下の3つのコマンドを使用します。

  • upload- ローカルのファイルやディレクトリを手動でHubSpotアカウントにアップロード
    hs upload <ローカルディレクトリのパス> <HubSpotデザインツールのパス>
  • watch- ローカルディレクトリを監視し、変更があるたびに自動的にHubSpotアカウントにアップロード
    hs watch <ローカルディレクトリのパス> <HubSpotデザインツールのパス>
  • fetch- HubSpotアカウントからファイルやディレクトリをローカルにダウンロードする
    hs fetch <HubSpotデザインツールのパス> <ローカルディレクトリのパス>

HubSpotとコードエディタの連携

前提条件

  • 開発者サンドボックスアカウントの作成
  • node.js がインストールされていること
    node.js
    ・node v10 以上がサポート対象

HubSpot CLIインストールと初期設定

  1. HubSpot CLIをインストール
    作業用ディレクトリを作成し、HubSpot CLIをダウンロードします。
    npm install -g @hubspot/cli
    任意のディレクトリにのみインストールする場合
    npm install @hubspot/cli 
    すでにHubSpot CLIがインストールされていて、最新版にアップグレードする場合
    npm install -g @hubspot/cli@latest
    HubSpot CLIをダウンロード後、シェルを再起動します。
    exec $SHELL -l
  2. HubSpotアカウントに接続
    hs init
  3. アカウント認証
    1. 「」というメッセージが表示されたら「y」を入力し、Enterキーを押下します。
      HubSpotの「パーソナル アクセス キー | HubSpot」のページに遷移します。
    2. 「パーソナルアクセスキーを生成」を押下し、パーソナルアクセスキーを生成します。
      ※ アカウント選択画面が表示された場合は、作成したサンドボックスアカウントを選択し、「このアカウントで続行」を押下すると、「パーソナル アクセス キー | HubSpot」に遷移します。
    3. パーソナルアクセスキーを生成後、「表示」「コピー」を押してキーをコピーし、ターミナルに貼り付けます。
      またアカウントに識別用の名前をつけEnterを押すと、アカウント情報がhubspot.config.ymlに追加されます。
      hs accounts list
      を実行すれば認証済みのアカウントを確認できます。

    4. HubSpotのデザインマネージャーからコードエディタにフォルダーを取り込む場合は以下のコマンドを実行します。
      hs fetch <HubSpotデザインツールのパス> <ローカルディレクトリのパス>

これでContent Hubとコードエディタの初期設定は完了です。

ローカル環境の構築とGitHubとHubSpotの連携

前提条件

  • GitHubでリポジトリが作成されていること

コードエディタとGitHubの連携

  1. リポジトリをクローンする
    git clone <リポジトリ名>
  2. リポジトリ下に移動
    cd <リポジトリ名>
  3. ローカルのフォルダーをGitHubリポジトリに移動
    パターン1: ファイルエクスプローラーを使用
    フォルダ内の全てのファイル/サブファイルをカットまたはコピーし、クローンしたリポジトリフォルダ内に貼り付けます。
    パターン2: コマンドラインを使用
    cp -R <ローカルディレクトリのパス>/* <クローンしたリポジトリのパス>

  4. GitHubリポジトリでシークレットを作成
    GitHub Actionsを利用してHubSpotにデプロイする際には、HubSpotのアカウント情報や個人アクセスキーなどの機密情報をセキュアに扱う必要があります。この機密情報を直接コードに含めるのはセキュリティ上のリスクがあるため、GitHubではシークレットとして設定することで、これらの情報を安全に管理し、ワークフロー内で必要なときにのみ使用できるようにします。

    1. リポジトリ名の下にある「Settings」をクリック
    2. サイドバーの「Security」セクションで「Secrets and variables」を選び、「Actions」をクリック
    3. 「Secrets」タブで「New repository secrets」をクリック
    4. "Name" フィールドにコンテナの名前を、"Secret" フィールドにシークレットの値を入力
      今回は以下の2つのシークレットを作成します。
      HUBSPOT_PORTAL_ID
      HUBSPOT_PERSONAL_ACCESS_KEY
      HubSpot CLIインストール時に作成されたhubspot.config.ymlファイルから確認可能
    5. 「Add secret」をクリックし、シークレットを作成

  5. ローカルに .github/workflows フォルダーを作り、main.ymlファイルを作成

補足

  • .github/workflows フォルダー - GitHub Actionsのワークフロー設定ファイルを格納する場所です。
  • main.yml ファイル- GitHubでのコードのプッシュやマージに応じて実行されるアクションを定義するファイルです。これにより、GitHubリポジトリ内のコード変更が自動的にHubSpotにデプロイされます。

管理するファイルが1つの場合は以下のように記述します。

// github/workflows/main.yaml

on:
push:
branches:
- main

jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4

- name: Remove .github directory # HubSpotにアップロードする際に.githubフォルダーを削除
run: rm -rf ./.github/

- name: Setup Node.js
uses: actions/setup-node@v4

- name: HubSpot-Deploy-Action
uses: HubSpot/hubspot-cms-deploy-action@v1.7
with:
src_dir: <ローカルディレクトリのパス>
dest_dir: <HubSpotデザインツールのパス>
portal_id: $
personal_access_key: $

管理するファイルが2つ以上の場合は以下のように記述します。

// github/workflows/main.yaml

on:
push:
branches:
- main

jobs:
changes:
runs-on: ubuntu-latest
outputs:
folder1: $
folder2: $

steps:
- uses: actions/checkout@v4
- id: filter
uses: dorny/paths-filter@v2
with:
list-files: shell
filters: |
<ローカルディレクトリのパス>:
- '<ローカルディレクトリのパス>/**'
<ローカルディレクトリのパス>:
- '<ローカルディレクトリのパス>/**'

deploy_folder1:
needs: changes
if: $false
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: HubSpot Deploy Action for Folder1
uses: HubSpot/hubspot-cms-deploy-action@v1.7
with:
src_dir: '<ローカルディレクトリのパス>'
dest_dir: '<HubSpotデザインツールのパス>'
portal_id: $
personal_access_key: $

deploy_folder2:
needs: changes
if: $false
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: HubSpot Deploy Action for Folder2
uses: HubSpot/hubspot-cms-deploy-action@v1.7
with:
src_dir: '<ローカルディレクトリのパス>'
dest_dir: '<HubSpotデザインツールのパス>'
portal_id: $
personal_access_key: $

まとめ

今回は、Content HubとGitHubを連携して、コードの管理とデプロイを効率化する方法について解説しました。
この記事が、Content Hubを活用しているものの、どのようにGitHubと連携すればいいのか迷っている方々にとって、一つの参考例となれば幸いです。

【参考】