Hello world!
I always wanted to build a blog website where I could share my interests in AI-related topics. I wanted to just create a website to showcase all my articles, but given my busy schedule, I kept delaying the project. Then I came across the Lovable Dev application, where you just give the prompts, and it builds the website for you. As you know, prompting is a skill also needed now in order to get work done from AI. Below is the prompt I used to get the website I wanted.
First Step: Be Clear
Be clear about how you want your website to be and give prompts based on your thought process.
I was clear on my goal: how I want my website to be and how minimalist it should be, including the name, headline, tags, and everything. I designed my website on Figma to show how I want my website to be according to my interests. I didn't want to showcase too much information. I wanted to keep it very simple, in a black and white format.
Prompt 1: Providing Information
Create a blog website where I can write and publish posts, showcase articles, and let visitors like and share. (No comments, no messaging me). I need an admin dashboard to edit the posts as I like and manage everything about the website.
The main core features: Tags, categories, post list, publish date, and time. In the footer, I need to publish contact information (email, LinkedIn profile), and the search should work.
Prompt 2: For Branding + Layout
I wanted a black/white theme, a very minimalist website. The name should be “The L Stack,” with a tag line. It should show only my blog posts, with a subtle background watermark: The L Stack. It needs a two-column layout: post and sidebar. The header should have Home, Substack, Medium, and search. In the header section, Medium and Substack should link directly to my profile on their respective social websites.
Prompt 3: Footer
Exclude the "About Me" section, messaging box, newsletter sign-up, and legal text; just include the copyright and Substack/Medium links in the footer.
Prompt 4: UX
I want each blog post to be clickable. It should show the title of the article, and I need a hover effect on the image, show the number of likes, read time (in minutes), and date. It should show the tags of the related topic. I need a “Continue Reading” link button. One user per like. The website should be scrollable.
Prompt 5: Final Finish
It should show “Load more posts” when scrolling down, no messaging toggle. It should show all the recent posts and categories of the posts.
Conclusion
I had my blog website built; build yours now. All you need to do is give the right prompts, and hurray, the website is ready.
Bonus Point
When you create a project in Lovable, you can be prompted to sign in to your GitHub account and authorize lovable.dev access to your repositories. Lovable will automatically create a new repository in your account and push the generated code to it. You can also edit the code if you are good with front-end. Try this today!