À medida que a HubSpot cresce como plataforma de CMS entre empresas de médio e grande porte, mais e mais desenvolvedores precisam adaptar suas habilidades e aprender a utilizar os templates customizados do módulo HubSpot CMS. E isso é ótimo!
Mas o que notamos ao oferecer consultoria HubSpot, é que a grande maioria das empresas utiliza apenas o método “Simples” de customização dos templates de CMS.
No papel, isso não é um problema — especialmente quando a equipe de desenvolvedores é pequena. Porém, o método “Avançado” facilita a organização, controle de alterações (versionamentos), agilidade e backup dos templates.
Por isso, o NA5 Labs separou algumas dicas com as melhores práticas para a criação de templates customizados. Elas podem te ajudar a dar o próximo passo na criação de templates para o HubSpot CMS 😉 Chega mais!
Método “Simples” de criação de templates
Este é provavelmente o método que a sua empresa está utilizando para criar novos templates na HubSpot.
Basicamente, o desenvolvedor responsável acessa a ferramenta Marketing > Arquivos e Modelos > Ferramentas de Design e seleciona “Arquivo > Novo Tema”, no menu lateral esquerdo. Em seguida, ele deve escolher a opção “HTML e HUBL” e começar a desenvolver a página (via HTML) diretamente na plataforma HubSpot.
Esse método é recomendado para quem está iniciando suas primeiras páginas no módulo CMS, tem prazo apertado, não tem desenvolvedor, não tem planos em ter mais de uma conta de HubSpot. No entanto, se você não se encaixa com algum dos itens mencionados anteriormente, você deve considerar criar HubSpot CMS templates da forma que recomendamos a seguir.
Método Avançado de criação de HubSpot CMS templates
Importante esclarecer: atualmente os marqueteiros estão desbravando o mundo dos desenvolvedores (MarTech), por isso, este método pode parecer avançado ou, até mesmo, complexo, mas que buscaremos tornar fácil para o seu entendimento. Apesar de citarmos como método “Avançado”, esse é um modo “comum” de trabalhar pelas equipes maduras de desenvolvimento, que também aplicamos aqui na NA5.
Basicamente, um desenvolvedor trabalha programando arquivos no computador sincronizado ao HubSpot. Claro, isso requer um preparo do ambiente local, mas vale muito a pena — não se preocupa, a gente te mostra como fazer isso e o porquê.
Vamos começar pelo “como”:
Assim como os desenvolvedores fazem, você precisará utilizar um IDE (Ambiente de Desenvolvimento Integrado), como o Visual Studio Code (VS Code) ou o WebStorm, para editar os arquivos localmente no computador.
Para desenvolver modelos de páginas, blog, e-mails e módulos customizados para o HubSpot CMS, nós recomendamos você usar o HubSpot CMS Boilerplate, disponível no GitHub. “Boilerplate” é um termo usado em diferentes áreas, que no mundo dos computadores representa um “pacote” de códigos para serem usados como referência e ponto de partida para novos projetos.
O Boilerplate da HubSpot serve como um modelo de onde você pode começar a desenvolver o template no HubSpot CMS, assim como também mostra algumas das melhores práticas para a plataforma de CMS da HubSpot. Ele é constantemente atualizado pela própria equipe da HubSpot e deve ser acompanhado também pelo desenvolvedor.
Junto com a IDE o desenvolvedor deve instalar o HubSpot CLI, a Interface de linha de comandos ou “Command Line Interface” da HubSpot (também disponível no GitHub).
Desenvolver com o CLI da HubSpot permite que você tenha uma cópia local de todos os ativos (“assets”) do template e possa fazer um backup, como salvar seus códigos em um repositório do GitHub.
Além disso, o CLI ajuda os desenvolvedores a criar com muito mais velocidade — pois eles possibilitam a utilização das ferramentas de programação que ele já está acostumado e, ao mesmo tempo, oferecem comandos para rapidamente criar, sincronizar e atualizar os templates.
Resumindo, para desenvolver HubSpot CMS Templates, você deve:
- Ter uma IDE de desenvolvimento, como VS Code ou WebStorm
- Usar o HubSpot CLI para sincronizar os códigos de desenvolvimento local com HubSpot
- Usar um repositório, como Github, para realizar o backup e trabalhar de forma segura com outros desenvolvedores
- Usar o HubSpot CMS Boilerplate como ponto de partida e melhores práticas
Bom, agora que mostramos um passo a passo de como usar este método Avançado de desenvolvimento, vamos falar porque você deve usá-lo. Separamos uma lista em bullet points com todas as vantagens, e (para os mais incrédulos) explicamos em seguida cada um dos tópicos em um parágrafo.
Benefícios:
- Migração de CMS mais ágil e menos riscos de perda de dados
- Maior controle sobre alterações e versionamentos do template
- Mais velocidade e facilidade no desenvolvimento
- Muito mais facilidade na manutenção de múltiplas contas
A primeira e mais importante vantagem é que o desenvolvimento local permite que o armazenamento dos códigos ativos seja feito fora da HubSpot. Ou seja, a migração para quem vem de outro CMS (ou se decidir ir para outro CMS) fica muito mais ágil e você tem a segurança de que os códigos não serão perdidos (se uma conta for cancelada).
Quando vários desenvolvedores ficam responsáveis por alterações em um mesmo código (repositório), isto se torna crítico. Ao desenvolver localmente, você pode usar o GitHub para salvar todos os códigos na nuvem, comparar versões, mesclar códigos, ver quem mexeu em cada linha e muito mais. Enfim, essa prática já é considerada padrão nas operações de TI, e ter isso agregado no desenvolvimento de um HubSpot CMS Template não pode ser diferente.
A utilização do IDE e CLI dão muito mais velocidade e facilidade na criação e manutenção dos códigos. Não entenda mal, a interface da HubSpot é ótima, mas exige que você (1) acesse constantemente a plataforma da HubSpot no navegador para fazer essas alterações e (2) para quem tem projetos com muitos modelos, realizar ajustes em múltiplos arquivos via interface visual não é prático.
Por fim, o método Avançado oferece uma importantíssima vantagem na hora de criar novos modelos que reaproveitarão “pedaços” de códigos espalhados em diferentes modelos. Além disso, para grandes empresas que usam mais de uma conta HubSpot, é muito mais rápido alternar entre diferentes arquivos de diferentes projetos via IDE.
Precisa de consultoria em criação de template de HubSpot CMS Hub? Conte com a gente. A NA5 ajuda sua empresa com consultoria e na contratação de HubSpot.