Erste Schritte mit lokaler Entwicklung

Das HubSpot-CLI (Command Line Interface) verknüpft Ihren lokalen Workflow mit HubSpot und ermöglicht so die Verwendung von Versionskontrolle, Ihres bevorzugten Text-Editors und verschiedener Technologien der Web-Entwicklung, wenn Sie mit CMS Hub entwickeln.

Dieser Leitfaden ist am besten für Leute 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.

Das HubSpot-CLI wird zum Hochladen, Abrufen und Überwachen von Dateien (upload, fetch und watch) von Dateien aus dem Dateisystem des Entwicklers verwendet. Die Erstellung mit dem CLI bedeutet, dass Sie lokale Kopien Ihrer Elemente haben.  Da Sie den Code lokal haben, können Sie Ihren bevorzugten Code-Editor verwenden, Sie können Build-Tools einsetzen, Sie können Ihren Code in ein Git-Repository übertragen.

Außerdem verfügt das CLI über Hilfsfunktionen, die Ihre Entwicklung beschleunigen können. Mit dem hs create-Befehl können Sie zum Beispiel schnell verschiedene Arten von Elementen lokal erstellen, von Modulen bis hin zur Erstellung eines Designs aus der Boilerplate.

In dieser Anleitung gehen wir durch die Installation des CLI und sehen uns die Hauptfunktionen des CLI an. Dabei werden ein Projekt von Ihrem HubSpot-Account abgerufen und dann die Änderungen zurück in Ihre Design-Tools hochgeladen.

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

Um die Tools für lokale Entwicklung zu verwenden, müssen Sie Folgendes tun:

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

Hinweis: 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.

Führen Sie hs init aus, um die Tools mit Ihrem HubSpot-Account zu verknüpfen. Dieser Befehl führt Sie durch die folgenden Schritte:

1. Zunächst werden Sie dazu angeleitet, einen persönlichen CMS-Zugriffsschlüssel zu erstellen, um den authentifizierten Zugriff auf Ihren Account über die Tools für die lokale Entwicklung zu ermöglichen. Sie werden aufgefordert, die Eingabetaste zu drücken, wenn Sie bereit sind, die Seite mit dem persönlichen CMS-Zugriffsschlüssel in Ihrem Standardbrowser zu öffnen. Auf dieser Seite können Sie bei Bedarf Ihren persönlichen Zugriffsschlüssel anzeigen oder ihn generieren. (Hinweis: Sie müssen mindestens die Berechtigung „Design-Manager“ auswählen, um dieses Tutorial abschließen zu können.) Kopieren Sie Ihren Zugriffsschlüssel und fügen Sie ihn in das Terminal ein.
2. Als Nächstes müssen Sie einen Namen für den Account eingeben. Dieser Name ist nur für Sie sichtbar und wird nur von Ihnen verwendet. Sie könnten z. B. „sandbox“ verwenden, wenn Sie eine Sandbox für Entwickler nutzen, oder „unternehmen.com“, wenn Sie einen vollständigen Kunden-Account verwenden. Dieser Name darf keine Leerzeichen enthalten. Dieser Name wird bei der Ausführung von Befehlen verwendet.

Sobald Sie diesen einfachen init-Ablauf abgeschlossen haben, sehen Sie eine Erfolgsmeldung, die bestätigt, dass eine Konfigurationsdatei, hubspot.config.yml, in Ihrem aktuellen Verzeichnis erstellt worden ist.

Ihre hubspot.config.yml sieht etwa so aus:

Bei der Ausführung von Befehlen kann entweder name oder portalId in der Option --account= verwendet werden (z. B. --account=123 und --account=sandbox interagieren beide mit der Account-ID 123, wie im obigen Beispiel). Wenn Sie ein defaultPortal auf oberster Ebene festlegen, können Sie die Option --account= aus Ihren Befehlen ausschließen; die Befehle verweisen dann auf dieses Standardportal.

Verwenden Sie den fetch-Befehl, führen Sie hs fetch --account=<name> <src> <dest> aus, um den gesamten Projekt-Ordnerbaum und die Dateien von Ihrem HubSpot-Account in Ihre lokale Umgebung zu holen. Die src ist der Projektpfad in Ihren HubSpot-Design-Tools, und dest ist der Pfad zum lokalen Verzeichnis, in dem die Dateien abgelegt werden sollen, relativ zu Ihrem aktuellen Arbeitsverzeichnis. Um das Projekt in Ihr aktuelles Arbeitsverzeichnis abzurufen, können Sie das <dest>-Argument weglassen.

Hier ist ein Beispiel dafür, wie Sie ein Projekt aus Ihrem HubSpot-Account abrufen:

Dies ist das Design-Tools-Projekt, das wir in unsere lokale Umgebung abgerufen haben:

Verwenden Sie den upload-Befehl, führen Sie hs upload --account=<name> <src> <dest> aus, um das Projekt in Ihrer lokalen Umgebung auf Ihren HubSpot-Account hochzuladen. Dadurch wird der Inhalt der <src> kopiert und laden Sie ihn in Ihren HubSpot-Account im <dest> hoch. Wenn Sie ein neues Projekt in Ihren Design-Tools erstellen, kann das <dest> ein neuer Ordner in HubSpot sein.

Hier ist ein Beispiel dafür, wie Sie das Beispielprojekt in Ihren HubSpot-Account hochladen würden:

Führen Sie  hs watch --account=<name> <src> <dest> aus, um Ihr lokales Verzeichnis zu überwachen und Änderungen beim Speichern von Dateien automatisch in Ihren HubSpot-Account hochzuladen.

Hier ist ein Beispiel dafür, wie Sie diesen Befehl mit dem watch-Befehl ausführen:

Eine umfassende Dokumentation zum HubSpot-CLI finden Sie in der Referenzdokumentation. 

• Erstellen eines effizienten Entwicklungsworkflows
• Eine kontinuierliche Integration mit GitHub einrichten
• Erste Schritte mit benutzerdefinierten Modulen
• Erste Schritte mit Designs
• Erste Schritte mit Drag-&-Drop-Bereichen