Primeros pasos con el desarrollo local

Last updated:

La CLI de HubSpot (Command Line Interface) conecta tu workflow local con HubSpot, permitiéndote utilizar el control de versiones, tu editor de texto favorito y varias tecnologías de desarrollo web al desarrollar en CMS Hub.

Esta guía es mejor para la gente que ya está familiarizada con el CMS pero quiere aprender a trabajar con la CLI. Si eres completamente nuevo en el desarrollo de Hubspot CMS Hub, te animamos a:

Quick start to CMS Hub development

La CLI de HubSpot se utiliza para cargar, obtener y ver archivos del sistema de archivos del desarrollador. Construir con la CLI significa que tendrás copias locales de tus materiales.  Como tienes el código localmente puedes usar tu editor de código preferido, puedes usar herramientas de construcción, puedes enviar tu código a un repositorio git.

Además, la CLI tiene funciones de ayuda que pueden acelerar tu desarrollo. Por ejemplo, el comando hs create te ofrece maneras de crear rápidamente diferentes tipos de materiales localmente, desde módulos hasta la creación de un tema a partir de una plantilla.

En esta guía, vamos a caminar a través de la instalación de la CLI, y las características principales de la CLI de recuperación de un proyecto de tu cuenta de HubSpot, y luego cargar los cambios de nuevo a tus herramientas de diseño. 

Para conocer más comandos y formatos de archivos locales, consulta la referencia de herramientas de desarrollo local.

Instalar dependencias

Para utilizar la herramienta local, necesitarás:

  1. Instalar Node.js, un entorno de tiempo de ejecución de Javascript que permite las herramientas locales. Las versiones 10 o superiores de Node son compatibles, pero recomendamos la versión de soporte a largo plazo (LTS).
  2. Para instalar las herramientas de HubSpot globalmente, ejecuta npm install -g @hubspot/cli en tu línea de comandos. Para instalar las herramientas en tu directorio actual, ejecuta npm install @hubspot/cli.

Nota: Si lo prefieres, también puedes utilizar Yarn. Homebrew no es requerido pero se recomienda para facilitar la instalación. Si estás utilizando Yarn, los comandos se ejecutan con el prefijo yarn.

¿Se produce un error de EACCES al instalar?
Consulta NPM Resolver errores de permisos EACCESS al instalar paquetes globalmente.

1. Crear un directorio de trabajo

Cree una carpeta para tu proyecto local. Por ejemplo, ejecuta mkdir local-cms-dev en la línea de comandos, lo que creará un directorio. Luego, ejecuta cd local-cms-dev para navegar a ese directorio.

2. Configurar las herramientas de desarrollo local

Ejecuta hs init para conectar las herramientas a tu cuenta HubSpot. Este comando te guiará por los siguientes pasos:

  1. En primer lugar, serás guiado para que crees una clave de acceso personal al CMS para permitir el acceso autentificado a tu cuenta a través de las herramientas de desarrollo locales. Se te pedirá que presiones "Enter" cuando estés listo para abrir la página de Clave de acceso personal a CMS en tu navegador predeterminado. Esta página te permitirá ver o generar tu clave de acceso personal, si es necesario. (Nota: Deberás seleccionar al menos el permiso de "Administrador de diseño" para poder completar este tutorial). Copia tu clave de acceso y pégala en el terminal.
  2. A continuación, introduce un nombre para la cuenta. Este nombre sólo lo ves y lo utilizas tú. Por ejemplo, puedes utilizar "entornodepruebas" si utilizas un entorno de pruebas de desarrollador o "empresa.com" si utilizas una cuenta de cliente completa. Este nombre no puede contener espacios. Este nombre se utilizará cuando se ejecuten los comandos.

Una vez que hayas completado este sencillo flujo init , verás un mensaje de éxito confirmando que se ha creado un archivo de configuración, hubspot.config.yml, en tu directorio actual.

Tu hubspot.config.yml tendrá el siguiente aspecto:

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 admite múltiples entradas en el portal. La forma más fácil de agregar más portales después de tener un hubspot.config.yml es utilizar hs auth.

Cuando se ejecutan comandos, se puede utilizar el nombre o el portalId en la opción --account= (por ejemplo, --account=123 y --account=sandbox ambos interactuarán con el ID de la cuenta 123 según el ejemplo anterior). Si estableces un defaultPortal de nivel superior, puedes excluir la opción --account= de tus comandos, los comandos harán referencia a ese portal por opción predeterminada.

3. Buscar un proyecto de tu cuenta

Utilizando el comando fetch , ejecuta hs fetch --account=<name> <src> <dest> para obtener un árbol de carpetas de proyectos completo y archivos de tu cuenta de HubSpot en tu entorno local. El src es la ruta del proyecto en tu herramientas de diseño de HubSpot, y el dest es la ruta del directorio local en el que deseas colocar los archivos, en relación con tu directorio de trabajo actual. Para buscar el proyecto en tu directorio de trabajo actual, puedes omitir el argumento <dest>.

Este es un ejemplo de cómo se obtiene un proyecto de tu cuenta de HubSpot:

hs fetch cms-project

Este es el proyecto de Herramientas de diseño que trajimos a nuestro entorno local:

proyecto local y administrador de diseño

4. Realiza los cambios y cargalos a tu cuenta de HubSpot

Utilizando el comando upload, ejecuta hs upload --account=<name> <src> <dest> para cargar el proyecto en tu entorno local a tu cuenta de HubSpot. Esto copiará el contenido de <src> y lo cargará a tu cuenta de HubSpot en <dest>. Si estás creando un nuevo proyecto en tus herramientas de diseño, <dest> puede ser una nueva carpeta neta en HubSpot.

A continuación se muestra un ejemplo de cómo cargar el proyecto de ejemplo en tu cuenta de HubSpot:

hs upload cms-project cms-project

5. Vigila tu proyecto local y carga automáticamente los cambios

Ejecuta hs watch --account=<name> <src> <dest> para vigilar tu directorio local y cargar automáticamente los cambios a tu cuenta de HubSpot al guardar los archivos.

A continuación se muestra un ejemplo de cómo se ejecutaría ese comando con el comando watch:

hs watch cms-project cms-project

Para obtener una documentación completa sobre la CLI de HubSpot, consulta la documentación de referencia

Tutoriales y recursos relacionados


¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.