Resources

Ɨ

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

ā˜°

Forum

Blog

Github

Signup

Made in Builder

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

First, we need to make a model for our blog articles. To do this, go to builder.io/models and hit + Create Model and choose Section

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

NameTypeNotes

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

Display an article

Next, let's render an individual article

Next.js Example

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?