How to display latest blog post on homepage bigcommerce theme?

<section class="blog-homepage">
  <h2 class="page-heading">{{lang 'blog.recent_posts' }}</h2>
  <ul class="blogGrid--maxCol4" itemscope itemtype="http://schema.org/Blog">
    {{#each blog.recent_posts}}
    <li>
      <article
        itemprop="blogPosts"
        itemscope
        itemtype="http://schema.org/BlogPosting"
      >
        <figure>
          <a href="{{url}}" itemprop="url">
            <img
              src="https://cdn11.bigcommerce.com/s-h7ti6c9310/stencil/0fbdd750-6e7a-0136-6996-71bd3cb7e197/e/435f9b30-2057-0137-158b-0242ac110019/img/loading.svg"
              class="lazyload"
              data-src="{{getImage thumbnail 'zoom_size'}}"
              alt="{{thumbnail.alt}}"
              width="1280"
              height="1280"
              itemprop="image"
              itemscope
              itemtype="https://schema.org/ImageObject"
            />
          </a>
        </figure>
        <h3 title="{{title}}" itemprop="headline">
          <a href="{{url}}" itemprop="url">{{title}}</a>
        </h3>
        <p itemprop="description">{{summary}}</p>
      </article>
    </li>
    {{/each}}
  </ul>
</section>

.blog-homepage {
    margin: 50px 0px 0px;
    clear: both;
    ul {
      list-style: none;
      margin-left: 0;
      margin: 0 -0.75rem;
      max-width: none;
      width: auto;
      font-size: 0;
      margin-bottom: 1.5rem;
      li {
        @include breakpoint("medium") {
          width: 33.33%;
        }
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        width: 100%;
        float: none;
        display: inline-block;
        font-size: 1rem;
        vertical-align: top;

        a {
          font-weight: 700;
          text-decoration: none;
        }
      }
    }
  }

Paste below HTML code at before {{/partial}} at home.html

Paste below SCSS at theme.scss last line.