Whether you are using HubSpot to build landing pages, and website themes for your clients or to sell them on the HubSpot marketplace, you can find below the steps I take and how the whole development works. Some steps you will need to redo them constantly while others (like installation) will be needed only once.
I use CLI a lot and make the development on my localhost and I upload them via the terminal to my HubSpot account. In this way, I can use my preferred code editor (huge fan of Visual Studio Code) and I can organize my files and access them easily without having to log in to my HubSpot account.
Prequisitions
You will need:
- – a HubSpot developer sandbox account
- – npm installed
- – basic knowledge of HTML, CSS, Javscript/jQuery, HubL (HubSpot scripting language)
- – basic knowledge on how to use the terminal
Create your local project
Create a new folder in your htdocs (I am using Xampp but you can use Wamp or Mamp with no issues at all) and name it as per your preferences. I have two folders one for clients and one for personal development and I have named mine hubspot-clients but again you can name the folder as per your own preferences.
Open the terminal and navigate to the newly created folder if you want to install HubSpot locally. If you want to install it globally do it on your root folder (htdocs in xampp).
Install hubspot:
npm install -g @hubspot/cli
Initialise the conectivity between your localhost and your hubspot account
hs init
Open hubspot.com to copy your personal access key? Y/N
Type Y in order to move forward with the connectivity.
Enter your personal access key:
- – choose the account you want to link-
- – copy the Personal CMS Access Key
- – paste the key in the terminal
Enter a unique name to reference this account in the CLI :
I have typed hubspot-clients as this is the folder I want to use.
A files hubspot.config will be not available on the folder you have created (in my case: hubspot-clients).
HubSpot CLI commands
Display all CLI commands by running:
hs help
Generate authentification for your HubSpot account
hs auth
See a list of your HubSpot accounts
hs accounts list
Fetch files, directories from your HubSpot account and add them to the local enviroment
hs fetch --account=<name> <src> [dest]
hs filemanager fetch --account=<name> <src> [dest]
Upload the files from your local environment to your HubSpot account
hs upload --account=<name> <src> <dest>
hs filemanager upload --account=<name> <src> <dest>
Watch the files while you are working on your local environment and upload them automatically
hs watch --account=<name> <src> <dest>
Moves the files from one directory to another
hs mv --account=<name> <src> <dest>
Creates the folder or the file structure of a new asset
hs create <type> <name> [dest]
Deletes files, folders from your HubSpot account but not from your local enviroment
hs remove --account=<name> <path>
Creates a new HubDB in your HubSpot account
hs hubdb create <src>
Downloads a HubDB table’s data to your local enviroment
hs hubdb fetch <tableId> <dest>
The list of HubSpot CLI commands is being updated constantly. You can find a full list of updated commands on the HubSpot website.
Create a HubSpot theme
When running the command below you will create a new theme which will be populated with the HubSpot boilerplate theme.
Rename my-website-theme with the name of the theme of your wishes.
hs create website-theme my-website-theme
Currently, the theme resides in your local environment. To upload the theme to your HubSpot account run the command below. Make sure to replace my-website-theme with the allocated name from the command below.
hs upload my-website-theme my-website-theme
Success! Your theme is uploaded on your HubSpot account and you are ready to create website pages and landing pages.
The HubSpot boilerplate theme structure:
- – css
- – images
- – js
- – modules
- – sections
- – templates
- – fields.json
- – licence.txt
- – theme.json
You can start editing these files and create new templates, sections, and modules.
Follow up as I will be adding constantly articles about theme and module development in HubSpot.
Happy Coding!
We ignite creative sparks with passionate minds, transforming ideas into powerful brands that stand out. Our design gurus craft exceptional UI/UX experiences for a lasting impact.
