Web development has been on a constant rise since the past two decades. New frameworks, new technologies and libraries have empowered web developers to create robust and responsive designs for web-pages. If one wants to start learning front end development technologies today, there are a multitude of options to choose from. Those days of writing static, non-responsive code have long gone and a person can choose from an arsenal of powerful tools to create beautiful websites.
Hi! I am Sumeet Hande, a front-end engineer at Addend Analytics and in this blog I will give you a bird’s eye view of the HubSpot CMS, a powerful tool which helps a developer manage not only content but also their website code.
The HubSpot Content Management System provides an IDE where a developer can develop code using HTML, CSS and JavaScript. HubSpot has it’s own database called the ‘HubDB’ which can be used to store data to be displayed on the website. For instance, bio’s about the blog authors, employees, customers can be stored in HubDB and can be retrieved using HubSpot’s very own templating language called ‘HubL’ (pronounced as Hubble). This way, you need not write the content in your HTML code directly but retrieve it using HuBL and HubDB whenever required. This can help reduce redundancy in your code and make it more readable and shorter in size. Let’s first understand some terms a developer must be familiar with when it comes to developing web assets using HubSpot tools.
Templates:
A template is a skeleton or a frame from which web pages can be created. A developer creates a template using HTML, CSS, JavaScript and can even add HubL for any data-retrieval from HubDB. There are various types of templates like Page templates, Blog Templates and System templates.
A page template refers to any normal website page which may provide information or may even be a landing page.
A blog template as the name suggests, is a template for creating blog posts. Creating a blog template, by far, is one of the most complex and trickiest tasks as compared to other template types.
A system template is a special type of template which can be used to create special pages like pages displaying errors or warnings.
A developer can choose from either developing a ‘drag and drop’ template or code a template from scratch by selecting the ‘coded template’ option.
Modules:
Modules are the basic building blocks which make up a template. A module is a piece of code which can perform a desired functionality and can be reused on other web pages as well. HubSpot provides a wide variety of built-in modules which can be easily dragged and dropped onto your template. Right from a simple text module to a complex image gallery module, using HubSpot’s built-in modules is a good starting point for beginners to explore the ‘drag and drop’ template type. However, there are situations where built-in modules cannot satisfy your requirement. That is when custom modules come to save the day. Developers can create their own module in the coded format where they can fine-tune according to their requirements to the lowest level of granularity. While making modules, a developer must keep in mind that a module should not lose it’s ‘reusability’ feature. That is what makes modules so powerful as they allow us to save time by avoiding rewriting of code. Avoiding redundancy can be achieved easily by creating reusable modules.
Pages:
A page is created from a template. A content editor or a marketer can use a template to fill in their own content to create a meaningful page from the template. This page can then later be published and linked to other website pages created from other templates. A page can either be a landing page or a website page. A website page provides information. A landing page is usually a page to turn your prospects to possible leads, that is, it is a page where you can acquire customers for your business. Such pages usually contain links to brochures or forms for customers to provide their information or place specific requests.
This whole concept of templates, modules and pages and the way they are connected to each other makes it easier for marketeers and other leading heads of a company to create pages on their own by using a template made by a developer. Due to this ease which HubSpot has provided, creating web pages and blogs does not stay restricted only to the web developers but also empowers the marketeers and content creators to create and publish web pages themselves. This can benefit the entire organization and remove bottlenecks as the entire team will not depend on the web developer to put up the content online.
In the HubSpot CMS, a developer’s workplace is the ‘Design Manager’, the IDE where code can be written or templates can be created. The design manager can be found under the marketing tab > Files and Templates > Design Tools.
The Design Manager:
The Design Manager is split into two sections: The Finder and the main workspace.
The Finder is for creating and organizing web assets like templates and modules. It is analogous to the file system which we can find in any typical operating system. The Actions Menu present at the top of the finder can be an important tool to copy assets and make clones. We can also see ‘dependencies’ which can help us find out on how many pages a specific asset is used. This can be extremely important while we are deleting assets as it helps us to ensure that we do not delete a template or module which is present on any live web pages.
(The Finder)
At the right of the finder is the main workspace. The main workspace displays either the drag and drop template or the coded template depending on the type of asset you are editing. Custom modules are usually coded from scratch so they do not get a drag and drop display. The main workspace also contains an inspector to it’s right. When we select a particular component, it’s detailed information and editing options are displayed on the right in the Inspector. We can fine-tune the options of a particular component in the inspector according to our requirements.
(Main Workspace as a Drag and Drop template)
(Main Workspace as a module editor)
When any particular element/component is not selected on a drag and drop template, the inspector provides information of the entire template. Here we can link any external CSS files or Script files to supplement the created drag and drop template.
Custom modules require a deeper level of granularity and thus have to be coded from scratch. Hence we can see in the above illustration that a module editor looks fundamentally different than a drag and drop workspace. It is divided into three sections where we can write the HTML, CSS and javascript separately.
As a developer who is going to create templates and custom modules, this basic information is a must to have. With this basic information, a beginner can start implementing templates and modules of his own.
Sumeet Hande
Front-end Engineer
Addend Analytics