Skip to main content

​
Quick Start Guide

Get FreshJuice DEV up and running in just a few minutes. This guide will walk you through the essential steps to start developing with the theme.
This quick start assumes you already have Node.js and the HubSpot CLI installed. If not, see the Installation guide for detailed prerequisites.

​
Installation

1

Clone the repository

Clone the FreshJuice DEV repository to your local machine:
git clone https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme.git
cd freshjuice-dev-hubspot-theme
2

Install dependencies

Install the required npm packages:
npm install
Requires Node.js v22.0.0 or newer.
3

Prepare development environment

Install Husky hooks for git commit validation:
npm run prepare
4

Configure HubSpot CLI

If you haven’t already, authenticate with HubSpot:
hs auth
Follow the prompts to connect your HubSpot account.

​
Start Development

Once installed, you can start developing with hot-reload enabled: 
npm run start
This command runs Tailwind CSS, esbuild, and HubSpot CLI in parallel with file watching, automatic rebuild, and live upload to HubSpot.

​
What Happens When You Run npm run start

The start command runs three processes in parallel:
  1. Tailwind CSS Watcher – Monitors CSS changes and rebuilds /theme/css/tailwind.css
  2. JavaScript Bundler – Watches and bundles JavaScript files with esbuild
  3. HubSpot File Watcher – Automatically uploads changes to your HubSpot portal

​
Create Your First Page

Now that your development environment is running, let’s create a simple page:
1

Choose a template

Navigate to your HubSpot portal and go to:Marketing → Website → Website PagesClick Create and choose Website page.
2

Select FreshJuice DEV theme

In the template selector, choose FreshJuice DEV as your theme.You can start with any of the available templates:
  • home.html – Homepage template
  • about.html – About page template
  • landing-page.html – Landing page template
  • Or create a blank page
3

Add modules to your page

Use the drag-and-drop editor to add modules from the FreshJuice DEV library:
  • Hero Section – For page headers
  • Card Module – For content blocks
  • Accordion – For FAQs
  • Button – For CTAs
And 30+ more modules available in the sidebar.
4

Customize with Tailwind classes

If you want to customize styles, you can edit the module files in:
theme/modules/[module-name]/module.html
All Tailwind CSS utility classes are available to use.
5

Preview and publish

Preview your page to see how it looks, then publish when ready.

​
Available Commands

Here are the most commonly used npm scripts: 
# Start development with hot-reload
npm run start

​
Command Breakdown

CommandDescription
npm run startRuns Tailwind, esbuild, and HubSpot CLI with file watching
npm run buildBuilds Tailwind CSS and JavaScript for production
npm run upload:hubspotUploads the theme to HubSpot via CLI
npm run watch:hubspotWatches theme folder and auto-uploads changes
npm run watch:tailwindWatches CSS changes and rebuilds Tailwind
npm run watch:jsWatches JavaScript changes and rebuilds with esbuild
npm run build:tailwindBuilds Tailwind CSS (production mode)
npm run build:jsBundles JavaScript with esbuild

​
Project Structure Overview

Understanding where files live is key to working efficiently: 
.
├── source/              # Your source files (edit these)
│   ├── css/            # Tailwind CSS source
│   ├── js/             # JavaScript source
│   └── images/         # Image assets
│
├── theme/               # Compiled files (auto-generated, uploaded to HubSpot)
│   ├── css/            # Compiled CSS
│   ├── js/             # Compiled JavaScript
│   ├── modules/        # HubSpot modules
│   ├── templates/      # HubSpot templates
│   └── ...
│
└── package.json         # Dependencies and scripts
Edit files in the source/ directory for CSS and JavaScript. The theme/ directory contains compiled files that are auto-generated.

​
Next Steps

Now that you’re up and running, explore more:

Installation Details

Learn about prerequisites, detailed setup, and verification steps.

Theme Configuration

Customize theme settings, colors, and behavior.

Module Library

Explore all available modules and how to use them.

Customization

Learn how to customize styles and create your own modules.

Build docs developers (and LLMs) love

Get started for freeTalk to us