VS Code | Visual Studio Code

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. 

image.png

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:

Download a theme from HubSpot

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