# Create Blog page

**URL:** <https://forum.builder.io/t/create-blog-page/15844>\
**Category:** Technical Questions\
**Tags:** styling, feature, custom-components\
**Created:** [October 8, 2025, 11:34am UTC](https://forum.builder.io/t/create-blog-page/15844 "2025-10-08T11:34:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![apatil](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@apatil](https://forum.builder.io/u/apatil)\
**Post date:** [October 8, 2025, 11:34am UTC](https://forum.builder.io/t/create-blog-page/15844/1 "2025-10-08T11:34:18Z")

</div>

I want to create a Blog Page which loads all the blogs in card structure of data model that contain blog title, image, Category, and short description. When a user clicks on Blog card , it should navigate to the detailed Blog description page. I want to use only single Blog description page according to blog title the description will change. How can I achieve this using Builder’s functionality without using Visual Editor(with minimal code).

---

<div class="post-metadata">

**Author:** ![xbrandonpowell](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/xbrandonpowell/32/3146_2.png) [@xbrandonpowell](https://forum.builder.io/u/xbrandonpowell)\
**Post date:** [October 8, 2025, 7:06pm UTC](https://forum.builder.io/t/create-blog-page/15844/2 "2025-10-08T19:06:58Z")

</div>

@apatil There are few things that would move forward to doing this.

My [builder.io](http://builder.io) tool uses my favorite tool is **Symbols** and **GraphQL** , because it keeps understanding how to use the data model, and picks what best works for your workflow. You do not have to follow everything in Builder; your workflow matters than following the Builder workflow in development at the time.

@manish-sharma Is this correct?

```graphql
Builder.registerComponent(Blog, {
  name: 'Blog',
  inputs: [
    {
      name: 'items',
      type: 'list',
      subFields: [

        { 
          name: 'title', 
          type: 'string', 
          defaultValue: 'Blog Title' 
        },

        {
          name: 'link',
          type: 'url'
        }
            
        { 
          name: 'description', 
          type: 'string', 
          defaultValue: 'Blog Description' 
        },

        {
          name: 'image',
          type: 'file',
          allowedFileTypes: ['jpeg', 'png', 'svg', 'webp'],

        }
      ],
    },
  ],
});

```

Then, from your going, import your code correctly into **HTML** after you preview everything. Styling is the most important part of your project. You can begin to style your page to your liking by following your **GraphQL** correctly.

This will allow you to try as many times as needed to get the coding workflow correct for your blog, using the template I created for you.

```auto
import React from 'react';
import { BuilderBlocks } from '@builder.io/react';

function Blog({ items }) {
  return (
    <>
      {items && items.length > 0 ? (
        <ul>
          {items.map((item, index) => (
            <li key={index}>
              <h1>{item.title}</h1>
              {item.image && <img src={item.image} alt={item.title} />}
              <article>{item.description}</article>
              {item.builderContent && (
                <BuilderBlocks
                  blocks={item.builderContent.blocks}
                  data={item.builderContent.data}
                />
              )}
              {item.link && <a href={item.link}>Read more</a>}
            </li>
          ))}
        </ul>
      ) : (
        <p>No blog items found.</p>
      )}
    </>
  );
}

export default Blog;

```

Make sure you style your Blog Card becuase if you do not style your Blog Card then you will not be like your design layout that you are design in your project.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [October 9, 2025, 10:46am UTC](https://forum.builder.io/t/create-blog-page/15844/3 "2025-10-09T10:46:38Z")

</div>

Hello @apatil,

For guidance on creating a blog page in [Builder.io](http://Builder.io), you may find the following resources helpful:

> **[The definitive guide to building a drag and drop editable blog with Builder](https://www.builder.io/blog/builder-drag-drop-blog)**
>
> Design a composable blog experience with Builder that is dynamic and fits your team's workflow. Walk through some of our top examples and how to implement them

> [@How to get content from Dynamic URL?](https://forum.builder.io/t/how-to-get-content-from-dynamic-url/7028/12):
>
> Hi @kevinroy, This behavior is expected because you currently have a single page where content is dynamically published based on the most recent slug. As a result, our content API only returns content that matches the slug of the last published update. If it helps here is a loom video with similar implementations that could help you achieve what you are trying Let us know if you need any further assistance. Best regards,

These links provide step-by-step instructions and examples for setting up both blog pages and dynamic content fetching.

Thanks,

---

<div class="post-metadata">

**Author:** ![Witard](https://avatars.discourse-cdn.com/v4/letter/w/c4cdca/32.png) [@Witard](https://forum.builder.io/u/Witard)\
**Post date:** [November 24, 2025, 3:02pm UTC](https://forum.builder.io/t/create-blog-page/15844/4 "2025-11-24T15:02:48Z")

</div>

Oh, that’s one of the answers I was looking for, thanks.