Last modified: August 22, 2025

HubSpot CMS Boilerplate structure

Folder Structure of the HubSpot CMS Boilerplate
The HubSpot CMS Boilerplate’s underlying template structure revolves around a common base layout, located in the templates > layouts folder, that is then {% extends %} tag and referencing the {% block body %} block for its main content. A sample of how the extend tag and blocks are being used can be seen in any of the html files inside of the templates directory. Learn more about blocks and extends. This is a common method of developing on CMS systems where you have a base (sometimes called a main/parent) template that contains all the main common structural pieces of content on your site. These are often items that are inside of the <head> element on your site such as common meta properties (ex: Title and Meta Description), Favicon links, CSS links, and 3rd party scripts
<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
 <head>
   <meta charset="utf-8">
   <title>{{ page_meta.html_title }}</title>
   {% if site_settings.favicon_src %}<link rel="shortcut icon" href="https://developers.hubspot.com/docs{{ site_settings.favicon_src }}" />{% endif %}
   <meta name="description" content="{{ page_meta.meta_description }}">
   {{ require_css(get_asset_url("../../css/layout.css")) }}
   {{ require_css(get_asset_url("../../css/main.css")) }}
   {{ require_css("https://fonts.googleapis.com/css?family=Merriweather:400,700|Lato:400,700&display=swap") }}
   {{ require_js(get_asset_url("../../js/main.js")) }}
   {{ standard_header_includes }}
 </head>
 <body>
   <div class="body-wrapper {{ builtin_body_classes }}">
     {% block header %}
       {% global_partial path="../partials/header.html" %}
     {% endblock header %}

     {% block body %}
       <!-- Nothing to see here -->
     {% endblock body %}

     {% global_partial path="../partials/footer.html" %}
   </div>
   {{ standard_footer_includes }}
 </body>
</html>
Inside of this base layout, there are also calls to our global header and footer partials. This allows us to be able to keep the code for these partials in their own separate files for modularity and, because they are global partials, can then be easily edited using our Global Content Editor by your content creators. For more depth into the assets included in the boilerplate check out the boilerplate’s wiki on GitHub.

jQuery

The HubSpot Theme boilerplate doesn’t require jQuery in order to function. For older HubSpot accounts jQuery is loaded by default. Newer HubSpot accounts have jQuery disabled by default. Historically HubSpot scripts required jQuery to function properly, so the domain-wide setting was there to help ensure compatibility. HubSpot scripts no longer use jQuery. Because JQuery is not required, and there are better ways for developers to include libraries that also work with source control. It is advised to disable the jQuery settings for new websites. Be aware if disabling jQuery on a domain that has an existing website - any landing pages or existing web pages you may have could break if they depend on jQuery. If you wish to use jQuery on your new website it is recommended that you use the latest version of jQuery. There are two easy ways to do that:
  • Upload the latest version of jQuery to your developer file system and use require_js to load it where and when you need it.
  • Use a CDN you trust, and use require_js to load jQuery where and when you need it.