CMS Hubを使って初めて開発する場合には、こちらのクイック スタート ガイド（英語）をお勧めします。
- HubSpotアカウントにログインし、［マーケティング］>［ファイルとテンプレート］>［デザインツール］に移動してデザインマネージャーを開きます。
- デザインマネージャーの左のサイドバーで、アップロードしたテーマフォルダーを開きます。
- テーマフォルダー内にあるモジュールフォルダーを開きます。
- このフォルダー内に新しいモジュールを作成するために、画面左上の［ファイル］>［新規ファイル］をクリックします。
- ダイアログボックスで、ドロップダウンメニューをクリックし、［モジュール］を選択してから［次へ］をクリックします。
- ［ページ］チェックボックスをオンにして、モジュールをウェブサイトとランディングページで使用できるようにします。
- モジュールの名前として「Testimonial」（お客様の声）と入力してから、［作成］をクリックします。
次は、以下の3つのフィールドをモジュールに追加します。
- 評価コメントを寄せてくれた顧客の名前を保存するテキストフィールド。
- 顧客のプロフィール写真を保存する画像フィールド。
- 顧客からの評価コメントを保存するリッチ テキスト フィールド。
顧客名を入力するテキストフィールドを追加する
- モジュールエディターの右のサイドバーで、［フィールドの追加］ドロップダウンメニューをクリックし、［テキスト］を選択します。
- 右のサイドバーで、右上にある鉛筆アイコンをクリックし、フィールドに名前を付けます。このチュートリアルでは、「Customer Name」（顧客名）と入力します。これにより、HubL変数名が「customer_name」に変わります。
- ［既定のテキスト］を「Sally」に設定します。
- 右側のサイドバーの階層リンクアイコンをクリックして、メインモジュールのメニューに戻ります。
顧客のプロフィール写真を設定する画像フィールドを追加する
- 同じ方法で他のフィールドを追加します。今回は、［画像］フィールドタイプを選択します。
- 画像フィールドに「Profile Picture」（プロフィール写真）というラベルを付け、［HubL変数名］を「profile_pic」にします。
- ［既定の画像］では、完成したプロジェクトファイルが格納されている「images」フォルダー内にあるSallyのプロフィール写真を選択します。
- ［代替テキスト］を「Customer Profile Picture」（サリーのプロフィール写真）に設定します。
モジュールの複数のフィールドにデータを追加しました。ただし、現時点ではこのモジュールに、そのデータをレンダリングするためのHTMLが含まれていません。モジュールエディターでは、この状態を反映してmodule.htmlセクションが空になっています。 
次は、フィールドのデータを表示するためのHubLをmodule.htmlに追加します。
上記のHubLトークンでは、各フィールドのデータにアクセスするためにドット表記を使用しています。この例ではモジュールのフィールドからデータを取得する必要があるため、各トークンをmoduleで始めて、その後にフィールドのHubL変数名を続けています。上記の3行目にあるprofile_picトークンに示されているように、ドット表記を使用すると、特定のフィールドにアクセスできるだけでなく、そのフィールドの特定のプロパティーにアクセスできます。
- HubLをモジュールに追加した後、画面右上の［プレビュー］をクリックして、現時点でモジュールがどのように表示されるかを確認します。
- 確認し終わったら、右上にある［変更を公開］をクリックします。
HubSpot内でモジュールを作成して公開したので、次はCLIを使用してモジュールをローカル環境に取り込みます。こうすることで、モジュールの内容をローカル環境で表示し、さらに変更を加えることができます。
モジュールをローカル環境で表示するには、まず、モジュールをローカルテーマに取り込む必要があります。
- ターミナルで、コマンド
hs fetch <hs_src> <destination>を実行します。<hs_src>は、HubSpot内でのモジュールのファイルパスです。ファイルパスを取得するには、デザインマネージャーの左のサイドバーでモジュールを右クリックし、［パスをコピー］を選択します。
<destination>は、テーマが置かれているローカルディレクトリーのパスです。これを省略した場合は既定で、コマンドによって現在の作業ディレクトリーが使用されます。
例えば、該当するディレクトリーが既にカレント作業ディレクトリーになっている場合、fetchコマンドは次のようになります。
チュートリアルの後半では、modulesフォルダーとtemplatesフォルダーに格納されているローカルのテーマファイルを主に扱います。 
簡単な定義で説明するなら、モジュールとはHubSpotのテンプレートとページの編集可能な領域です。HubSpotではデザインマネージャーを使ってモジュールをテンプレートに挿入できますが、ここではHubLを使用して、モジュールをローカル環境内のテンプレートに追加します。
- コードエディターで、
templatesフォルダーを開き、home.htmlファイルを開きます。 home.htmlファイル内の28行目付近から始まる最後のdnd_sectionに移動します。ここでは、このセクションに新しいモジュールを追加します。
dnd_section内の他のdnd_moduleの上に、次のHubLモジュールタグをコピーして貼り付けます。
