Erste Schritte mit lokaler Entwicklung

Last updated:

Das HubSpot CLI (Command Line Interface) verknüpft Ihre lokale Umgebung mit HubSpot, was bedeutet, dass Sie lokale Kopien Ihrer HubSpot-Web-Ressourcen haben. Auf diese Weise können Sie bei der Entwicklung im CMS von HubSpot die Versionskontrolle, Ihren bevorzugten Texteditor und verschiedene Webentwicklungstechnologien verwenden. 

Dieser Leitfaden ist für die Benutzer geeignet, die bereits mit dem CMS vertraut sind, aber die Arbeit mit dem CLI erlernen möchten. Wenn Sie völlig neu in der HubSpot CMS Hub-Entwicklung sind, empfehlen wir Ihnen, die Schnellanleitung zu befolgen.

Quick start to CMS Hub development

In diesem Tutorial erfahren Sie, wie Sie:

  • Die CLI installieren und mit Ihrem HubSpot-Account verknüpfen.
  • Ein Modul von Ihrem HubSpot-Account abrufen.
  • Das Modul lokal aktualisieren und dann Ihre Änderungen hochladen.
  • Mithilfe des watch-Befehls weiter gespeicherte Änderungen hochladen.

Weitere Befehle und lokale Dateiformate finden Sie in der Referenz zu den Tools für lokale Entwicklung.

Abhängigkeiten installieren

Um lokal auf HubSpot zu entwickeln, müssen Sie Folgendes erledigen:

  1. Installieren Sie Node.js, eine JavaScript-Laufzeitumgebung, die die lokalen Tools ermöglicht. Es wird Version 16 oder höher von Node unterstützt, wir empfehlen jedoch die Long-Term-Support-Version (LTS).
  2. Führen Sie npm install -g @hubspot/cli in Ihrer Befehlszeile aus, um das HubSpot CLI global zu installieren. Um die Tools stattdessen nur in Ihrem aktuellen Verzeichnis zu installieren, führen Sie npm install @hubspot/cli aus.

Sie können Sie auch Yarn verwenden, wenn Sie dies bevorzugen. Homebrew ist nicht erforderlich, wird aber für eine einfache Installation empfohlen. Wenn Sie Yarn verwenden, werden die Befehle mit dem Präfix yarn ausgeführt.

Sie erhalten einen EACCES-Fehler bei der Installation?
Siehe NPM – Auflösen von EACCESS-Berechtigungsfehlern bei globaler Installation von Paketen.

1. Ein Arbeitsverzeichnis erstellen

Erstellen Sie einen Ordner für die Arbeit, die Sie unten erledigen werden. Benennen Sie für die Zwecke dieses Tutorials den Ordner local-dev-tutorial.

Sie können dies lokal tun, indem Sie mkdir local-dev-tutorial in der Befehlszeile ausführen, wodurch das Verzeichnis erstellt wird. Führen Sie dann cd local-dev-tutorial aus, um zu diesem Verzeichnis zu navigieren.

2. Die Tools für lokale Entwicklung konfigurieren

Führen als Nächstes Sie hs init aus, um die Tools mit Ihrem HubSpot-Account zu verknüpfen. Dieser Befehl führt Sie durch die Schritte unten.

  • Um das CLI mit einem HubSpot-Account zu verknüpfen, müssen Sie den persönlichen Zugriffsschlüssel des Accounts kopieren. Wenn Sie dazu aufgefordert werden, drücken Sie die Eingabetaste, um hubspot.com mit der Seite mit dem persönlichen Zugriffsschlüssel des Accounts zu öffnen. Wenn Sie mehrere Accounts haben, werden Sie im Browser aufgefordert, zuerst einen Account auszuwählen.
  • Auf der Seite mit dem persönlichen Zugriffsschlüssel können Sie einen neuen persönlichen Zugriffsschlüssel generieren oder den vorhandenen Schlüsselwert kopieren, falls dieser bereits vorhanden ist.
    • Wenn Sie einen Schlüssel zum ersten Mal erstellen, wählen Sie aus, auf welche Bereiche der Schlüssel Zugriff hat. Sie müssen mindestens die Design-Manager-Berechtigung auswählen, um mit den Design-Tools des Accounts zu interagieren. 
    • Nachdem Sie die Berechtigungen des Schlüssels ausgewählt haben, klicken Sie auf Persönlichen Zugriffsschlüssel generieren.
  • Sobald ein Schlüssel generiert wurde, kopieren Sie seinen Wert, indem Sie zunächst auf Anzeigen unter dem Schlüssel und dann auf Kopieren klicken.
  • Fügen Sie den Schlüssel in die Befehlszeile ein und drücken Sie dann die Eingabetaste.
  • Geben Sie als Nächstes einen Namen für den Account ein. Dieser Name ist nur für Sie sichtbar und wird nur von Ihnen verwendet, wenn Sie Befehle ausführen. Sie könnten z. B. „sandbox“ verwenden, wenn Sie eine Sandbox für Entwickler nutzen, oder „unternehmen.com“, wenn Sie einen Standard-Account verwenden. Dieser Name darf keine Leerzeichen enthalten. 
  • Drücken Sie die Eingabetaste. 

Nach dem Abschluss des init-Ablaufs sehen Sie eine Erfolgsmeldung, die bestätigt, dass eine Konfigurationsdatei, hubspot.config.yml, in Ihrem aktuellen Verzeichnis erstellt wurde.

Ihre hubspot.config.yml sieht etwa so aus:

defaultPortal: mainProd portals: - name: mainProd portalId: 123456 defaultMode: publish authType: personalaccesskey auth: tokenInfo: accessToken: >- {accessTokenValue} expiresAt: '2023-06-27T19:45:58.557Z' personalAccessKey: >- {personalAccessKeyValue} sandboxAccountType: null parentAccountId: null
Use this table to describe parameters / fields
NameDescription
defaultPortal
Optional

Das Account, mit dem standardmäßig interagiert wird, wenn CLI-Befehle ausgeführt werden.

Um mit einem authentifizierten Account zu interagieren, der nicht als Standard-Account festgelegt ist, können Sie dem Befehl ein --account=-Flag hinzufügen, gefolgt vom Namen oder der ID des Accounts. Zum Beispiel --account=12345 oder --account=mainProd.

name
Optional

Unter portals finden Sie für jeden verknüpften Account einen Eintrag. name gibt den Vornamen für den Account an. Sie können diesen Namen verwenden, wenn Sie einen neuen Standard-Account festlegen oder einen Account mit dem --account-Flag angeben.

portalId
Erforderlich

Die Account-ID.

defaultMode
Optional

Legt beim Hochladen auf den Account den Standardstatus für das Hochladen von Content fest. Kann entweder draft oder publish sein.

authType
Erforderlich

Die Form der Authentifizierung, die zur Authentifizierung des Accounts verwendet wird. 

sandboxAccountType
Optional

Gibt, wenn es sich bei dem Account um einen Sandbox-Account handelt, die ID des übergeordneten Produktions-Accounts an.

parentAccountId
Optional

parentAccountId

Die hubspot.config.yml-Datei unterstützt mehrere Accounts. Um weitere Accounts zu authentifizieren, führen Sie hs auth aus und folgen Sie den Anweisungen.

3. Eine Ressource erstellen, das Sie in HubSpot abrufen können

Für die Zwecke dieses Tutorials erstellen Sie zunächst ein neues Element in HubSpot, damit Sie es mithilfe des CLI in Ihrer lokalen Umgebung abrufen können. 

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Tools. Dadurch wird der Design-Manager geöffnet, in dem Sie auf die Dateien zugreifen können, die Sie über das CLI hochladen. Diese Struktur von Dateien und Ordnern wird auch als Entwickler-Dateisystem bezeichnet.
  • Wählen Sie in der linken Seitenleiste des Design-Managers den Ordner @hubspot aus, um die Standardressourcen von HubSpot anzuzeigen, z. B. Designs und Module.
    design-manager-hubspot-folder
  • Scrollen Sie in der linken Seitenleiste nach unten und klicken Sie mit der rechten Maustaste auf das Symbol-Modul, und wählen Sie dann Modul klonen aus. Das Modul wird in den Stamm des Entwickler-Dateisystems geklont und Ihre neue Modulkopie wird auf der rechten Seite geöffnet.
    default-icon-module-cloned
  • Klicken Sie oben in der linken Seitenleiste auf Aktionen und wählen Sie dann Pfad kopieren aus. Dadurch wird der relative Pfad zum Modul in das Entwickler-Dateisystem kopiert, den Sie im nächsten Schritt verwenden, um das Modul lokal abzurufen. 
    module-actions-copy-path

4. Das Modul in Ihrer lokalen Umgebung abrufen

Wenn das Modul geklont ist, verwenden Sie jetzt den fetch-Befehl, um es in Ihre lokale Umgebung zu holen.

Führen Sie im Terminal hs fetch '/icon copy.module' aus.

hs fetch '/icon copy.module'
Das Modul wird als Verzeichnis heruntergeladen, das fünf Dateien enthält:
  • fields.json: enthält den Code für die verschiedenen Felder des Moduls. In diesem Fall umfasst dies das Symbolfeld, zwei Felder für Barrierefreiheitoptionen und eine Reihe von Stilfeldern. Sie sehen diese Felder in der rechten Seitenleiste des Modul-Editors in HubSpot.
  • meta.json: enthält die grundlegenden Informationen des Moduls, wie sein Label, ID und die Typen von Vorlagen, in denen es verwendet werden kann. Diese Informationen werden in der rechten Seitenleiste des Modul-Editors angezeigt.
  • module.css: enthält das CSS des Moduls, das Sie auch im CSS-Bereich des Modul-Editors in HubSpot sehen können. 
  • module.html: enthält den HTML-Code des Moduls, den Sie auch im „HubL + HTML“-Bereich des Modul-Editors in HubSpot sehen können.
  • module.js: enthält das JavaScript des Moduls, das Sie auch im JS-Bereich des Modul-Editors in HubSpot sehen können.
    module-directory-local
Aktualisieren Sie als Nächstes die meta.json-Datei des Moduls, laden sie dann in Ihren Account hoch und sehen sich die Änderung in HubSpot an.

5. Änderungen vornehmen und hochladen

Nehmen Sie zunächst eine Änderung am Modul vor:

  • Öffnen Sie in Ihrem bevorzugten Code-Editor die meta.json-Datei des Moduls.
    module-meta-json-file-open
  • Aktualisieren Sie das label-Feld von "Icon" zu "CMS tutorial module". Speichern Sie anschließend die Datei.
    module-meta-json-file-label-updated
Bevor wir den nächsten Befehl, hs upload, ausführen, lassen Sie uns den Befehl und die dazu erforderlichen Argumente aufschlüsseln. Dieser Befehl erfordert zwei Argumente: hs upload <src> <dest>
  • src: der relative Pfad des Quellordners, den Sie aus Ihrer lokalen Umgebung hochladen.
  • dest: der Pfad des Zielverzeichnisses in HubSpot, lokal zum Stamm des Entwickler-Dateisystems. Sie können ein neues Verzeichnis im Account erstellen, indem Sie den Verzeichnisnamen angeben, z. B. hs upload<src>/new-directory.
  • Da Sie in das Stammverzeichnis des Dateisystems des Entwicklers hochladen, führen Sie daher also den folgenden Befehl aus:
hs upload 'icon copy.module' 'icon copy.module'
  • Nachdem das CLI bestätigt hat, dass das Modul erfolgreich hochgeladen wurde, aktualisieren Sie den Design-Manager, um Ihre Änderung in HubSpot anzuzeigen. Sie sollten nun sehen, dass das Label-Feld Ihren neuen Wert anzeigt.
module-label-updated

6. Mithilfe eines watch-Befehls Änderungen automatisch hochladen

Nachdem Sie nun den upload-Befehl verwendet haben, um einen einmaligen Upload Ihrer lokalen Dateien auszuführen, verwenden Sie nun den watch-Befehl, um gespeicherte Änderungen kontinuierlich hochzuladen. Dieser Befehl verwendet dieselben Argumente wie upload, sodass Sie dieselben <src>- und <dest>-Argumente wie oben angeben können.

  • Führen Sie hs watch 'icon copy.module' 'icon copy.module' aus.
hs watch 'icon copy.module' 'icon copy.module'

Bei jetzt ausgeführtem watch-Befehl werden gespeicherte Änderungen automatisch in den HubSpot-Account hochgeladen. Nehmen Sie zur Demonstration die folgende lokale Änderung am Modul vor:

  • Aktualisieren Sie in der meta.json-Datei das host_template_types-Feld, um "BLOG_LISTING" und "BLOG_post" zu entfernen, damit das Modul nur für Seiten verfügbar ist:

    "host_template_types":["PAGE"]
  • Speichern Sie anschließend die Datei. Dadurch sollte das CLI aufgefordert werden, die Datei automatisch nach HubSpot hochzuladen.
  • Aktualisieren Sie nach dem Hochladen der Datei den Design-Manager in HubSpot, um Ihre Änderung anzuzeigen. Der Abschnitt Vorlagentypen der rechten Seitenleiste sollte jetzt nur noch den Typ Seite enthalten.
module-editor-template-type
  • Um den watch-Befehl zu beenden, drücken Sie Control + C. Beachten Sie unbedingt, dass Sie keine anderen Befehle im selben Terminalfenster ausführen können, in dem der watch-Befehl ausgeführt wird. Um andere Befehle während der Ausführung eines watch-Befehls auszuführen, sollten Sie stattdessen ein anderes Terminalfenster öffnen und Ihre Befehle dort ausführen.

Nächste Schritte

Nachdem Sie sich nun angesehen haben, wie Sie die fetch-, upload- und watch-Befehle nutzen, sollten Sie sich den vollständigen Referenzleitfaden zu CLI-Befehlen ansehen, um zu erfahren, was Sie sonst noch mit dem CLI tun können.

Es wird auch empfohlen, sich die folgenden Tutorials anzusehen:

War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.