HubSpot is a powerful CMS platform, which developers can use to develop websites and modules for clients. Developers can code both within HubSpot, or locally on their computer, and then upload files directly to the client’s portal.
To develop locally, developers can use the HubSpot CLI which connects your local machine with the HubSpot portal you are working within. The first thing you will need is Node.js which can be downloaded directly from their site at: https://nodejs.org/en/
After that, the dev can open their preferred code editor and using the command line, install the HubSpot CLI. For a full step-by-step guide, refer to HubSpot’s article: Getting Started with Local Development
Once the CLI is installed and authenticated with the portal account, you will be able to fetch files from the HubSpot portal to work on locally. Files can then be uploaded back to the portal, and a watch command can be set to automatically upload files that have been changed, to remove the need to manually upload changes.
You may also decide to develop within HubSpot instead of downloading the files to your desktop.
Within HubSpot, there is a section called “Design Tools” that can be used to code within the portal. There, the developer has access to all the files within that particular portal, including every module, image, and template that has been created. Within the design tools, developers can create new modules, create themes, or upload files to their portal.
When creating a module within HubSpot, the editor is split into 3 sections, one for HTML and HubL (HubSpots’ templating language), one for CSS, and one for Scripts. These can be used to style the module and add any functionality, such as an image slider functionality. There are a variety of ways that HubL can be used to display content, and HubSpot has many filters and functions that can be added to enhance the output of the final module, such as the blog_recent_posts function, which can be used to list the most recent posts in a portal, and can be further filtered to target a specific blog if more than one is present, as well as listing the number of recent posts desired. The lists are both fairly extensive, so if interested check them out:
Hubl Filters
Themes can be created using HubSpot to keep a site’s styling consistent across all pages. This is helpful for particularly large websites that may use a variety of modules and vary wildly across individual pages. CSS stylings such as font families or sizings/colorings can be applied across all elements within a theme (H1, H2, span, header, etc.) to keep everything consistent even if the layout differs across pages.
Themes can also be bought on the marketplace that is within HubSpot, which has a variety of free as well as paid-for themes available to developers. There are simple themes that may be better suited to smaller websites, or customers who want to try their hand at building out test sites, and larger, more complex themes that offer many customization options.