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:
Name | Type | Notes |
---|---|---|
Title |
| This will be the article title when listing articles and for the page |
Handle |
| This will be the URL handle, e.g. |
Image |
| This will be the main image for the blog post (e.g. when listing articles) as well as the |
Date |
| This will be the date for displaying when this was posted and for filtering by date posted |
Blurb |
| (optional) this will be the preview text when listing blog articles, and optionally can. be the SEO |
Author |
| (optional) to list info about authors, we recommend making a new data model (e.g. with fields |
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!