There is no doubt about the significance of blogging in today's social media marketing environment. Whether you are a small business or a multinational firm, blogging has become indispensable to your content marketing strategy. 

Do you know what makes a blog post? Quality content, impressive title, author bio, tags, meta description, URL, and featured image. Did we miss something? Ever heard about blog listing? 

Well, listing a blog is as important as composing the blog itself. Besides, listing a blog makes it easier for people to find your blog on search engines.

This article will explain the standard markup for blog page templates and outline the steps to set up a blog listing page and blog template in HubSpot Boilerplate.

So let's get started!

Getting started with a Blog Template in HubSpot Boilerplate

Blogs on HubSpot CMS include blog listing pages and individual blog posts. Every blog post within a blog is rendered using a single blog post template. 

The blog index or the blog listing template is what the users see while navigating to the blog's URL. This template is typically used to list summaries, titles, and featured images of all of the posts on the blog. Besides, it displays pagination to get to the previous posts.

First things first, I recommend you get some basic knowledge of front-end technologies like HTML, CSS, and HubSpot CMS for the absolute beginner. 

While creating a blog on HubSpot, we need two blog templates.

  • Blog index Template – Here, all blog posts are displayed, and you can click on the blog post that you are interested in learning to get redirected to the blog post. 
  • Blog Post Template – It is required to display the content of the blog post.

When we set up a boilerplate, it provides default templates of blog index and blog post.

default-blog-post-template

You can edit your code and clone this and make your template design according to your design needs. I recommend you a clone and edit the template, remove the code blocks you don't need, and use the code blocks you require.

Let us make a blog listing template and learn the basic things which are required in every blog template.

Every web page header footer is important, and mostly the header footer for websites remains the same, so you don't need to make a different header footer for your blogs. If you need, you can make it, but in most cases, header footers are global.

We will cover both Blog templates in this blog, i.e., Blog Index and Blog Post.

Blog Index Template

Every blog post template includes a blog listing, blog post title, blog post link, and blog featured image.

  • Blogs Listing – This shows a listing of all the blog posts. In the HubSpot boilerplate default blog index template, we can see a section of the blog index.
blog-listing-code

In the image, you can see a custom HTML code, and classes are used, and HubL code is used with it.

custom-html-code-for-blog-listing

You can use HubL codes to show particular blog details on your blog template as per your design requirements.

  • Blog post title or post heading- {{ content.name }} It shows the blog post heading. You can use it in the HTML tag and then style.
blog-post-title
  • You can use it in the blog listing and blog post templates.
  • Blog Post Link-  you have to use it in anchor tag as href. You can also place a blog post image or content name, or both in this anchor. When the user clicks on it, this code redirects the user to the listing page of the blog post page on which the user clicks.
blog-post-link
  • We simply need to add the URL and content name in the tag, so when the user clicks on content, he gets directed to the post.
  • Featured image- It is used to display the featured image of the blog.
blog-featured-image

I hope the example helps you understand how to use a blog hub using HTML.

Now let's discuss some predefined modules that can be used in a blog template.

Site Search Input

This module provides the search functionality for searching the blog post. It also has other search options like searching landing pages and web pages, but you should only enable the blog post search and disable the other search options. 

To do this, follow these steps:

  • Just search the module in the design manager.
site-search-input
  • This is the HubSpot predefined module, so you can't edit it. Therefore,  to enable the edit option, you have to clone this module and rename it as per your choice and move the cloned module to your project folder.
clone-module
  • You can use this module in your blog template.
  • For using any module in the blog template, use this code and change the module name.    
change-module-name

Blog Tag Filter

This module is used for giving tag filter functionality in the listing template. The tags given to all blog posts are automatically added in the dropdown.

blog-tag-filter

Here you can see posts by using the selected tag.

find-blog-using-selected-tag

Note that the process is the same for using the following modules like that of site search.

Social Share

  • This module is used for sharing a blog post on your social media accounts.
social-share-module
  • On clicking the respective social link, it redirects you to your social account post.

Post Filter

  • This module displays the list of tags used in all posts of the blog. On clicking tags, the user can see the post related to the tag.
blog-post-filter
  • It's similar to the Blog tag filter, but there is no dropdown. So, it shows the list of tags directly.
blog-post-filter-module

Pagination

  • At last, in the blog index template, you need to apply pagination in your blog listing.
  • Blog listing pages provide auto-generated pagination to allow visitors to browse through your blog posts easily.
blog-pagination
  • The Boilerplate blog supports simple, number pagination using the following markup. You can see the pagination code in the default blog index template.
pagination-code

Blog Post Template

The way of implementing the template is the same as the blog index template. Here we can use all HubL code and modules that we have used in the blog index. But in the blog post, we display the post content in place of the blog post listing. Here we use the following HubL code.

blog-post-template-code

This HubL code gives the option to add and edit the content on post pages. This is where the content is written. It is basically the main body of the blog post. You can use this with HTML div tags for better control of the content.

Rest everything is the same as the blog index template.

Wrapping Up

Well, there you go, folks. That was all about blog template in HubSpot Boilerplate. Hope you find this article useful. If you have any queries, feel free to ask.

And if you are new to HubSpot and need some help with HubSpot blogging software or HubSpot CMS onboarding, do get in touch with us now.

Our team of HubSpot experts will take care of everything for you! 

Editor: Richa Sharma

Frequently Asked Questions

A HubSpot boilerplate is like a blueprint for building websites on HubSpot. It gives developers a head start by providing a foundation and showing them the best ways to create a website using HubSpot's CMS. Think of it as a helpful guide that makes it faster and easier to set up a website on HubSpot. It's designed to follow the best practices for developers using HubSpot's CMS platform, so they can create effective and well-structured websites without starting from scratch. Essentially, it's a handy tool that helps developers kickstart their projects on HubSpot.

A blog template is like a recipe for writing a blog post. It's a structured guide that outlines the steps to follow when creating a blog. This template provides a formula, making it simple to craft articles that are valuable to readers while streamlining the writing process for you. It offers a clear structure and format, helping you organize your ideas, include essential elements like headings and subheadings, and maintain consistency across your blog. Using a template can make the writing process more efficient, ensuring your content is engaging, informative, and user-friendly.

Yes, boilerplate is like a pre-made template. It's a set of standard text or language that you can use over and over without modifying. You just copy and paste it into your document as it is, without making any changes. It's a convenient way to save time and maintain consistency when you need to use the same information or language repeatedly.

A HubSpot boilerplate is like a blueprint for building websites on the HubSpot CMS (Content Management System). It's a ready-made starting point that makes it easier for developers to create websites in the HubSpot environment. This boilerplate demonstrates the best methods for developers to use when working on the HubSpot CMS. Think of it as a handy tool that offers a head start in setting up websites and teaches developers how to do things the right way within the HubSpot platform, saving time and ensuring quality.

Jagroop Singh is a frontend web developer focusing on HTML/CSS, JavaScript, responsive design, web performance optimization, and frontend frameworks like React, Angular, and Vue. His expertise helps developers improve website functionality and user experience through clear and practical insights.