Creating a blog in Builder.io

Powering your blog with Builder empowers your editors to build exciting blog articles easily and visually.

Setup

If you don't have one already, go create an account over at builder.io/signup

In this example we are also assuming you are a developer and will be hooking up this blog to a custom website or app

Create a Blog Article model

Now let's add our fields. We recommend adding the following fields:

Name	Type	Notes
Title	`text`	This will be the article title when listing articles and for the page `<title>` tag for SEO. E.g. "Announcing our new product line"
Handle	`text`	This will be the URL handle, e.g. `new-product-line`
Image	`file`	This will be the main image for the blog post (e.g. when listing articles) as well as the `og:image` for previewing on social media sites like Facebook
Date	`timestamp`	This will be the date for displaying when this was posted and for filtering by date posted
Blurb	`text`	(optional) this will be the preview text when listing blog articles, and optionally can. be the SEO `meta description` as well
Author	`reference`	(optional) to list info about authors, we recommend making a new data model (e.g. with fields `full name` of type `text` and `photo` or type `file`) and using a reference type to reference the author for an article

Tip: You probably want to mark some of those options, like Title, Handle, Image, and Date as required so the editor must enter those values to publish

Connect this to a site

Now, you can query your Blog Articles using our Javascript SDK, Content API, or GraphQL API.

List articles

To list articles, fetch the articles and render each one. E.g. for a page at your-site.com/blog

Next.js Example

import { builder } from '@builder.io/react';

builder.init(YOUR_KEY);

const articlesPerPage = 30;

function Blog({ articles }) {
  return (
    <div>
      {articles.map((item) => (
        <Link href={`/blog/${item.data.handle}`}>
          <div css={{ overflow: 'hidden', width: 300 }}>
            <div css={{ width: 300, height: 200, display: 'block' }}>
              <img src={item.data.image} />
            </div>
            {item.data.title}
            {item.data.description}
          </div>
        </Link>
      ))}
    </div>
  );
}

Blog.getInitialProps = async ({ req, res, asPath, query }) => {
  const page = Number(query.page) || 0;
  const articles = await builder.getAll('blog-article', {
    req, res,
    // Include references, like our `author` ref
    options: { includeRefs: true },
    // For performance, don't pull the `blocks` (the full blog entry content)
    // when listing
    omit: 'data.blocks',
    limit: articlesPerPage, 
    offset: page * articlesPerPage
  });

  return { articles };
};

export default Blog;

Display an article

Next, let's render an individual article

Next.js Example

import { builder, BuilderComponent } from '@builder.io/react';
import Head from 'next/head';
import Link from 'next/link';

builder.init(YOUR_KEY);

function BlogArticle({ article }) {
  return (
    <div>
      {!article ? (
        <>
          <div css={{ textAlign: 'center', padding: 50 }}>
            Article not found. <Link href="/blog">Back to the blog</Link>
          </div>
        </>
      ) : (
        <>
          <Head>
            {/* Render meta tags from custom field */}
            <title>{article.data.title}</title>
            <meta name="description" content={article.data.blurb} />
            <meta name="og:image" content={article.data.image} />
          </Head>

          <div>
            <div>{article.data.title}</div>
            {/* Render the Builder drag/drop'd content */}
            <BuilderComponent name="blog-article" content={article} />
          </div>
        </>
      )}
    </div>
  );
}

BlogArticle.getInitialProps = async ({ req, res, asPath }) => {
  const article = await builder
    .get('blog-article', {
      req,
      res,
      // Include references, like our `author` ref
      options: { includeRefs: true },
      query: {
        // Get the specific article by handle
        'data.handle': asPath.split('/')[2],
      },
    })
    .promise();

  if (!article && res) {
    res.status = 404;
  }

  return { article };
};

export default BlogArticle;

Add a preview URL

Once you get the code setup locally, let's connect your local site to the Visual Editor. This will allow for accurate previewing and editing as well as using your custom components directly in the editor!

To do this, go back to builder.io/models, choose Blog Article, and find the preview URL option. Enter a URL that will route on your site to the BlogArticle page, for instance http://localhost:3000/blog/_ (assuming you are using the format /blog/:handle)

Enter in the URL and hit save

Create a Blog Article

Now you can go to builder.io/content, hit + New Entry and choose Blog Article. You should now see the drag and drop editor loaded right onto your local site!

You can now create articles visually and publish them ready.

Note: when you publish your site updates to production, you will want to update your editing URL to be a production URL, such as https://your-site.com/blog/_ and no longer a localhost one so anyone can create blog posts visually

And that's it!

We've showed several key features here such as custom models, custom fields, and connecting to your website

If you have any questions at all, please ask in our forum!

Was this article helpful?