Ignorar e ir ao conteúdo principal

A CLI (Interface de Linha de Comando) conecta seu ambiente local ao HubSpot, o que significa que você terá cópias locais dos seus ativos web do HubSpot. Isso permite que você use o controle de versão, seu editor de texto favorito e várias tecnologias de desenvolvimento web ao desenvolver no HubSpot CMS.

Este guia é ideal para pessoas que já estão familiarizadas com o CMS, mas que querem aprender sobre como trabalhar com a CLI. Caso seja sua primeira vez trabalhando com desenvolvimento no HubSpot CMS Hub, consulte o guia de início rápido:

Início rápido no desenvolvimento do CMS Hub

Neste tutorial, você aprenderá:

  • Como instalar a CLI e conectá-la à sua conta HubSpot.
  • Como obter um módulo de sua conta HubSpot.
  • Como atualizar o módulo localmente e depois carregar suas alterações.
  • Como utilizar o watch para continuar carregando as alterações salvas.

Para ver mais comandos e formatos de arquivo locais, consulte a Referência de ferramentas de desenvolvimento local.

Para desenvolver no HubSpot localmente, você precisará:

  1. Instale o Node.js, que habilita as ferramentas de desenvolvimento local da HubSpot. As versões 18 ou superior são compatíveis. É recomendável usar um gerenciador de pacotes como Homebrew ou nvm para instalar o Nó.
  2. Execute npm install -g @hubspot/cli na sua linha de comando para instalar a CLI da HubSpot globalmente. Para instalar as ferramentas em seu diretório atual, executenpm install @hubspot/cli.

Se preferir, você também pode usar o Yarn. Se você estiver usando o Yarn, os comandos serão executados com o prefixo yarn.

Crie uma pasta para o trabalho que fará abaixo. Para este tutorial, nomeie a pasta como local-dev-tutorial.

Você pode fazer isso localmente executando mkdir local-dev-tutorial na linha de comando, o que criará o diretório. Depois, execute cd local-dev-tutorial para navegar até esse diretório.

Em seguida, execute hs init para conectar as ferramentas à sua conta da HubSpot. Este comando oferecerá orientação pelas etapas abaixo.

  • Para conectar a CLI a uma conta da HubSpot, você precisará copiar a chave de acesso pessoal da conta. Se solicitado, pressione Enter para abrir hubspot.com na página da chave de acesso pessoal da conta. Se você tiver várias contas, será solicitado no navegador que selecione uma conta primeiro.

  • Na página da chave de acesso pessoal, você pode gerar uma nova chave de acesso pessoal ou copiar o valor da chave existente, se já existir.

    • Se estiver criando uma chave pela primeira vez, selecione a quais escopos a chave tem acesso. Você precisará selecionar pelo menos a permissão do Gerenciador de Design para interagir com as ferramentas de design da conta.
    • Depois de selecionar as permissões da chave, clique em Gerar chave de acesso pessoal.
  • Depois que uma chave for gerada, copie o valor clicando primeiro em Mostrar sob a chave e em Copiar.

  • Cole a tecla na linha de comando e pressione Enter.

  • Em seguida, insira um nome para a conta. Esse nome só será visto e usado por você ao executar comandos. Por exemplo, você pode usar "sandbox" se estiver usando um sandbox de desenvolvedor ou "company.com" se estiver usando uma conta de cliente completa. Esse nome não pode conter espaços.

  • Pressione Enter.

Depois de concluir o fluxo init, você verá uma mensagem de sucesso confirmando que o arquivo de configuração, hubspot.config.yml foi criado no diretório atual.

O hubspot.config.yml será parecido com isso:

NomeDescrição
defaultPortalOpcionalA conta com a qual se interage por padrão ao executar comandos da CLI.Para interagir com uma conta autenticada que não está definida como padrão, você pode adicionar um sinalizador --account= ao comando, seguido pelo nome ou ID da conta. Por exemplo, --account=12345 ou --account=mainProd.
nameOpcionalEm portals, você encontrará uma entrada para cada conta conectada. name especifica o nome fornecido para a conta. Você pode usar esse nome ao definir uma nova conta padrão ou especificar uma conta com o sinalizador --account.
portalIdObrigatórioO ID da conta.
defaultModeOpcionalAo carregar na conta, define o estado padrão no qual carregar o conteúdo. Pode ser draft ou publish.
authTypeObrigatórioA forma de autenticação usada para autenticar a conta.
sandboxAccountTypeOpcionalSe a conta for uma conta de sandbox, indica o ID da conta de produção principal.
parentAccountIdOpcionalparentAccountId

Para este tutorial, primeiro você criará um novo ativo no HubSpot para poder buscá-lo no seu ambiente local usando a CLI.

  • Na sua conta da HubSpot, vá em Marketing > Arquivos e Modelos > Ferramentas de design. O gerenciador de design será aberto e você poderá acessar os arquivos que deseja carregar usando a CLI. Esta árvore de arquivos e pastas também é conhecida como o sistema de arquivos do desenvolvedor.

  • Na barra lateral esquerda do gerenciador de design, selecione a pasta @hubspot para visualizar os ativos padrão da HubSpot, como temas e módulos.

    design-manager-hubspot-folder

  • Na barra lateral esquerda, role para baixo e clique com o botão direito no módulo ícone e, em seguida, selecione Clonar módulo. O módulo será clonado na raiz do sistema de arquivos do desenvolvedor e a sua nova cópia do módulo será aberta à direita.

    default-icon-module-cloned

  • Na parte superior da barra lateral esquerda, clique em Ações e selecione Copiar caminho. O caminho relativo para o módulo no sistema de arquivos do desenvolvedor será copiado e você o usará na próxima etapa para buscar o módulo localmente.

    module-actions-copy-path

Com o módulo clonado, agora você usará o comando fetch para trazê-lo ao seu ambiente local.

No terminal, execute hs fetch '/icon copy.module'.

O módulo será transferido como um diretório contendo cinco arquivos:

  • fields.json: contém o código para os vários campos do módulo. Nesse caso, isso inclui o campo de ícone, dois campos de opção de acessibilidade e um conjunto de campos de estilo. Você pode ver esses campos na barra lateral direita do editor de módulos no HubSpot.

  • meta.json: contém as informações básicas do módulo, como seu rótulo, ID e os tipos de modelos em que pode ser usado. Essas informações serão exibidas na barra lateral direita do editor do módulo.

  • module.css: contém o CSS do módulo, que você também pode ver no painel CSS do editor de módulos no HubSpot.

  • module.html: contém o HTML do módulo, que você também pode ver no painel HubL + HTML do editor de módulos no HubSpot.

  • module.js: contém o JavaScript do módulo, que você também pode ver no painel JS do editor de módulos no HubSpot.

    module-directory-local

Em seguida, você atualizará o arquivo meta.json do módulo, carregará esse arquivo na sua conta e verá a alteração no HubSpot.

Primeiro, faça uma alteração no módulo:

  • No editor de código que preferir, abra o arquivo meta.json do módulo.

    module-meta-json-file-open

  • Atualize o campo label de "Icon" a "CMS tutorial module". Salve o arquivo.

    module-meta-json-file-label-updated

Antes de executar o próximo comando, hs upload, vamos detalhar o comando e os argumentos necessários. Esse comando requer dois argumentos: hs upload <src> <dest>

  • src: o caminho relativo da pasta de origem que você está carregando do ambiente local.
  • dest: o caminho do diretório de destino no HubSpot, local em relação à raiz do sistema de arquivos do desenvolvedor. Você pode criar um novo diretório na conta especificando o nome do diretório, como hs upload <src> /new-directory.
  • Com isso em mente, como você está carregando na raiz do sistema de arquivos do desenvolvedor, execute o seguinte comando:
  • Depois que a CLI confirmar que o módulo foi carregado com sucesso, atualize o gerenciador de design para ver sua alteração no HubSpot. Agora você deve ver que o campo Rótulo mostra o novo valor.

module-label-updated

Depois de usar o comando upload para carregar de uma vez seus arquivos locais, agora você usará o comando watch para carregar continuamente as alterações salvas. Esse comando usa os mesmos argumentos que o comando upload, de modo que você pode especificar os mesmos <src> e <dest> acima.

  • Executar hs watch 'icon copy.module' 'icon copy.module'

Com o comando watch em execução, as alterações salvas serão carregadas automaticamente na conta da HubSpot. Como demonstração, faça a seguinte alteração local no módulo:

  • No arquivo meta.json, atualize o campo host_template_types para remover "BLOG_LISTING" e "BLOG_POST" de modo que o módulo fique disponível apenas para as páginas: "host_template_types"``:["PAGE"]
  • Salve o arquivo. Isso fará com que a CLI carregue automaticamente o arquivo no HubSpot.
  • Com o arquivo carregado, atualize o gerenciador de design no HubSpot para ver a alteração. A seção Tipos de modelos na barra lateral direita agora deve incluir apenas Página.

module-editor-template-type

  • Para finalizar o acompanhamento, pressione Control + C. É importante observar que você não poderá executar outros comandos na mesma janela de terminal em que o comando Watch está sendo executado. Para executar outros comandos durante a execução de um comando watch, você deve abrir outra janela de terminal.

Agora que você aprendeu a usar os comandos fetch, upload e watch, confira o guia completo de referência de comandos da CLI para saber o que mais você pode fazer com a CLI.

Também é recomendado conferir os seguintes tutoriais: