VS Code | Visual Studio Code
- Setup HubSpot CMS config - DELETE?
- Creating website templates | Basic
- Install HubSpot CLI into folder
- Upload from VScode to HubSpot account
- Install Node.js and NPM
- Download a theme from HubSpot
- Create HubSpot Theme | Boilerplate
- Download from HubSpot account to VScode
Setup HubSpot CMS config - DELETE?
In VS Code terminal:
Because... the below code will pull from Hubspot and add the CLI language to the folder you are in. So, navigate VSCode to the folder you need to be in first. Then out can run the following
npm install @hubspot/cms-cli
npm init
npx hs init
Creating website templates | Basic
Templates and themes are not the same. A theme has a layout for a page that is used in multiple pages. A template is a copy of the code for any one specific script that you will use over, and over.
You will u need to copy down a template each time you use it.
A theme is coded ones. You can tweak the code in a theme as much as you like but, one edited to the theme, will change all pages that apply.
The following will create a basic template.
hs create <pulls from HS database> <your/locate/location>
hs create template templates/nuc-plant-1
If the "hs" command doesn't work, try "npx" or "npx hs"
npx hs create template templates/nuc-plant-1
The top portion of the template is significant. It looks like it is commented out but, Hubl can read it and will use it to know what to do with it.
Install HubSpot CLI into folder
Create a folder where your website/demo will live. Because... the below code will pull from Hubspot and add the CLI language to the folder you are in. So, navigate VSCode to the folder you need to be in first. There is where you will run the below command to enable the CLI
npm install @hubspot/cli
Configurations: Need to get a .yaml file in the Hubstop account that is needed. In the same area as the last step, in terminal, type in the following
npx hs init
1) It will ask you to fill in the name with what you want to call your website.
2) Next, it will pop up the HubSpot account. You can agree to it. Make sure you are already logged into the account you want to add this to. If your not, make sure you log into the correct one in the next step.
3) Once you are in, show the key, then copy it.
Paste that key into the terminal.
4) It will prompt you to enter a name for the CLI. This is what the name of your project/website is (ie: t-shirts, energy is better, food4less).
You are now connected to the HubSpot CLI and should have some new files/folders added to the locate folder. How you can continue with themes and building the website.
How to download theme:
HubSpot CLI commands:
https://developers.hubspot.com/docs/cms/developer-reference/local-development-cli
Upload from VScode to HubSpot account
Syntax:
npx hs upload <local/file> <destination/hubspot/location>
npx hs upload test-theme test-theme
Install Node.js and NPM
Install Node.js as you would any other software. Do a general install to your computer.
Refer to:
https://code.visualstudio.com/docs/nodejs/nodejs-tutorial
Install Node.js on your OS.
https://nodejs.org/en/download/package-manager
Now you should be able to do the next steps here:
Install HubSpot CLI into folder
Download a theme from HubSpot
How to download theme:
You will first need to find the theme that you want from HubSpots theme area. This command will pull from HubSpot to your locale file in VScode.
Example:
hs fetch @hubspot/barricade <destination-folder>
How it looks:
hs fetch @hubspot/barricade /home/documents/website
Create HubSpot Theme | Boilerplate
In terminal run
<npx @hubspots/account/location /your/locate/saveto/location>
npx @hubspot/create-cms-project test-theme
The "test-theme" will also be the name of the file that the boilerplate files are saved under.
Download from HubSpot account to VScode
Syntax:
npx hs download <destination/hubspot/location> <local/file>
npx hs fetch hs/location ./local/location