Hey @Honganh,
as @karstenkoehler and @Berangere mentioned - unfortunately there’s no “easy” way to transform an static HTML template into a user-friendly and reusable template.
The core idea of HubSpot is like this:
- Theme - the container which contains all styles, templates, sections, modules …
- Templates - dedicated reusable and predefined layouts with drag&drop areas, sections, modules, template specific CSS&JS files … so you don’t need to build every page from scratch
- Sections - reusable and predefined row&column layouts with individual modules
- Modules - reusable and predefined elements with specific functionalities. If set to global module, every module instance will display the same content.
There are a few routes you can go:
- Grab a marketplace theme, create a child-theme in order to be able to apply code-side modifications to it at a later point
- Create a new theme with the HubSpot boilerplate and build a theme yourself
- Create a custom theme from scratch
From my experience I’d rate those options like this:
- Easy: If you’re not looking for a pixel-perfect integration where users switch between an external website like WordPress and your landing page, go with a marketplace theme. Look for one which meets around 80% of your requirements. The last 20% are something you can easily modify
- Medium: If you want to have a starting point for a custom theme, start with the boilerplate
- Hard: If you want to start with a blank page and create everything on your own, go with the custom theme
Something you can always do is creating custom modules.
A custom module is a building block which can be placed by drag&drop into your templates. If you’re working with the Design-Manager - something I’d recommend if you got little to none dev experience - it’s easier than going the full local development route.
The core idea of a module is: Give the content editors predefined fields to use.
A very basic example:
If you want something like a headline, you add at least a text field as an available field to the module and put the variable into the module.html part
Doing so will allow the users to have a text input for the headline which can be modified in every instance of the module
So rather than having full static content like
<h1>this is my headline</h1>
You write it like this
<h1>{{module.headline}}</h1>
If the content editor puts something like
“This is our amazing whitepaper” into the text field, the page will display
<h1>This is our amazing whitepaper</h1>
…
Important: This works only unless you don’t enable the global module option.
Global modules are being handled differently. Once you update the content in one instance, every instance of this module get’s updated. Might be helpful in some cases, but not always.
There are TONS of options and routes you can go and do and it all comes down to what you want/need.
As for template(s) itself - to get the most basic drag&drop experience in a template, it’s enough to write it like this
<!--
templateType: page
label: Page template
isAvailableForNewContent: false
-->
<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
<head>
<meta charset="utf-8">
{% if page_meta.html_title %}
<title>{{ page_meta.html_title }}</title>
{% endif %}
{% if branding_favicon %}
<link rel="shortcut icon" href="{{ branding_favicon }}" />
{% endif %}
<meta name="description" content="{{ page_meta.meta_description }}">
{{ standard_header_includes }}
</head>
<body class="{{ builtin_body_classes }}">
<main id="main-content" class="">
{% block body %}
{% dnd_area 'main' %}
{# THIS IS THE AREA WHERE YOUR CONTENT WILL BE PLACED/DISPLAYED #}
{% end_dnd_area %}
{% endblock body %}
</main>
{{ standard_footer_includes }}
</body>
</html>
But I highly advise you not to blindly copy&paste this as this is just a simple shell.
p.s.:
If you need dev support, feel free to book a meeting by clicking my signature 
hope this helps
best,
Anton
