# 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 ```bash npm install @hubspot/cms-cli ``` ```bash npm init ``` ```bash 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> ```bash hs create template templates/nuc-plant-1 ``` If the "hs" command doesn't work, try "npx" or "npx hs" ```bash 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](https://wiki.danicus.net/uploads/images/gallery/2023-08/scaled-1680-/Ds25vKbFleLwhMi6-image.png)](https://wiki.danicus.net/uploads/images/gallery/2023-08/Ds25vKbFleLwhMi6-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 ```bash 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 ```bash 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](https://wiki.danicus.net/books/vs-code-visual-studio-code/page/download-a-theme-from-hubspot "Download a theme from HubSpot") HubSpot CLI commands: [https://developers.hubspot.com/docs/cms/developer-reference/local-development-cli](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> ```bash 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](https://code.visualstudio.com/docs/nodejs/nodejs-tutorial) Install Node.js on your OS. [https://nodejs.org/en/download/package-manager](https://nodejs.org/en/download/package-manager) --- Now you should be able to do the next steps here: [Install HubSpot CLI into folder](https://wiki.danicus.net/books/vs-code-visual-studio-code/page/install-hubspot-cli-into-folder "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: ```bash hs fetch @hubspot/barricade ``` How it looks: ```shell hs fetch @hubspot/barricade /home/documents/website ``` # Create HubSpot Theme | Boilerplate In terminal run <npx @hubspots/account/location /your/locate/saveto/location> ```bash 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> ```bash npx hs fetch hs/location ./local/location ```