Erste Schritte mit lokaler Entwicklung

Last updated:

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:

Quick start to CMS Hub development

Das HubSpot-CLI wird zum Hochladen, Abrufen und Überwachen von Dateien (uploadfetch 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.

Abhängigkeiten installieren

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.

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 Ihr lokales Projekt. Führen Sie zum Beispiel mkdir local-cms-dev in der Befehlszeile aus, um ein Verzeichnis zu erstellen. Führen Sie dann cd local-cms-dev aus, um zu diesem Verzeichnis zu navigieren.

2. Die Tools für lokale Entwicklung konfigurieren

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:

defaultPortal: sandbox portals: - name: sandbox portalId: 345 authType: personalaccesskey personalAccessKey: >- xxxxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxxx auth: tokenInfo: accessToken: >- xxxxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxxx expiresAt: '2020-02-24T19:38:39.164Z'

hubspot.config.yml unterstützt mehrere Portaleinträge. Der einfachste Weg, weitere Portale hinzuzufügen, nachdem Sie bereits eine hubspot.config.yml haben, ist die Verwendung von hs auth.

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.

3. Ein Projekt aus Ihrem Account abrufen

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:

hs fetch cms-project

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

lokales und Design-Manager-Projekt

4. Änderungen vornehmen und in Ihren HubSpot-Account hochladen

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:

hs upload cms-project cms-project

5. Ihr lokales Projekt überwachen und Änderungen automatisch hochladen

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:

hs watch cms-project cms-project

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

Verwandte Tutorials und Ressourcen


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.