Personal Blog
Create a fully-featured blog with tags, archive and search and manage and edit your posts right inside Craft.
Live Demo
This real example shows what the Craft doc and the blog created with Lovable look like:
Write actions have been disabled for the demo
Build It Yourself
Built with Craft and Lovable
In this example we will use Craft to manage a personal blog and turn it into a beautiful personal website with posts, tags and search using Lovable.
Step 1 — Create Your Doc
Our blog posts are kept in a collection: we use the collection fields to manage tags, posting date and the publish status. The content of each blog post is the content of the collection item – this way you can use Craft’s powerful editor to write and polish your blogposts.
Use the template to create a new doc with a collection for your blog, filled with some example posts:
Step 2 — Enable API Access
Enable API Access for your doc to get a unique URL that can be used to read from and add to your doc.
Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Step 3 — Build on Lovable
Now lets go on and build the actual website for our blog on Lovable. For the example site shown above, we used this prompt:
I would like you to build my personal blog.
The information is stored in Craft. Please check the attached file including an example of the current state of my Blog Craft doc, as well as information on the API you should use to get this document and my blog posts. Please read the API documentation carefully and follow its instructions.
I want there to be:
- A landing page showing the last 3 entries and their dates and blurbs, then a link to the archive
- An archive listing all published posts and their dates as a table
- A page for each post with prev/next navigation at the bottom
- A page page that shows all blocks with a certain tag
- There should also be a search functionality
Every post has a published property. Only show those posts where it is set to true.
I want a clean and modern design that pays attention to detail and feels super well crafted. It’s supposed to be sophisticated but not snobby, with great, modern typography and lots of whitespace.
Go to Lovable and paste the prompt into the prompt box. Make sure to attatch the AI Bundle for your document that we just downloaded.
Lovable gets to work, analyzing the content of the bundle to understand the doc structure and how to use the API. Then it starts to build the website according to our prompt.
Now we have a beautiful blog that displays our posts and supports search and tags!
