Creating a Blog in Builder
Powering your blog with Builder empowers your editors to build exciting blog articles easily and visually.
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:
This will be the article title when listing articles and for the page
This will be the URL handle, e.g.
This will be the main image for the blog post (e.g. when listing articles) as well as the
This will be the date for displaying when this was posted and for filtering by date posted
(optional) this will be the preview text when listing blog articles, and optionally can. be the SEO
(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
To list articles, fetch the articles and render each one. E.g. for a page at your-site.com/blog
Display an article
Next, let's render an individual article
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!