- Esbuild
- Nodejs
- Typescript
- SCSS (Pre installed, Bootstrap 5)
- node-modules support (Pre installed, GSAP, JQuery)
- Webpack
This theme uses esbuild to compile scss and typescript code.
It has a simple and efficient structure and supports node_modules and bundling.
This is probably one of the most modern ways of building a hubspot theme with minimal overhead.
git clone https://github.com/samuellembke/hubspot-theme-boilerplate.git
npm i
Change the project name from: hubspot-theme-boilerplate, to your theme name. Only use lowercase letters and no spaces no special symbols. Basically a slug/path compliant name
- hs-watch.sh
- hs-up-watch.sh
- website-theme/theme.json
- esbuild.js
- package.json
Connect hubspot with the hubspot account you want to publish on
hs init
Copy your .npmrc in the root folder of the project if you want to use GSAP's premium features.
if you don't have a GSAP premium subscription please remove the gsap-shockingly modules and other gsap premium features from the package.json and the ts/main.ts
npm run dev
./hs-watch.sh
or if you want to upload the theme before watching (Recommended for initial project run)
./hs-up-watch.sh
- Copy boilerplate template file from /website-theme/templates/boilerplate.html and paste into /website-theme/templates/[Name Of Template].html
- Copy boilerplate scss folder in /website-theme/scss/boilerplate and paste into /website-theme/scss/[Name Of Template]
- On line 1 in [Name Of Template].html change the template label to your preferred label:
label: [Label Of Template]
- On line 7 in [Name Of Template].html correct SCSS path for your template:
{{ require_css(get_asset_url('../dist/scss/[Name Of Template]/index.css')) }}
On line 8 in /esbuild.js add your new SCSS path to the array:
entryPoints: ["website-theme/scss/[Name Of Template]/index.scss", .../*rest of array*/]
After that restart the filewatcher...
- Hubspot tags docs - https://developers.hubspot.com/docs/cms/hubl/tags
- Hubspot blog template docs - https://developers.hubspot.com/docs/cms/building-blocks/templates/blog
- Hubspot exportToContext docs (Helpful for blog listing pages) - https://developers.hubspot.com/docs/cms/building-blocks/modules/export-to-template-context
- Hubspot functions docs - https://developers.hubspot.com/docs/cms/hubl/functions
- Hubspot module docs - https://developers.hubspot.com/docs/cms/building-blocks/modules/files
- Hubspot CLI docs - https://developers.hubspot.com/docs/cms/developer-reference/local-development-cli