# Building a Blog
In this guide we will build a simple blog from scratch, demonstrating how to use the built-in blog components, write blog posts and export your design as a static website that can be uploaded anywhere, all without relying on a CMS or WordPress.
# 1. Starting with a Blank Canvas
Begin by opening a blank design in Bootstrap Studio. To give your blog a modern touch, switch the theme to Lux.
Next, add a container to the canvas and adjust its margins by holding Shift while dragging. This will ensure proper spacing for your content.
Drop in a heading and rename it to “Latest Trips” to set the tone for your blog.
# 2. Setting Up Blog Posts
# Organizing Files
Import the cover images for your posts by dragging them into the design. Create a folder called “blog” (or any preferred name) to house your blog post pages.
# Creating a Blog Post
Inside the folder, add a new page, e.g., “paris-trip.html”. Structure the page by dropping a container, adjusting its margins, and adding navigation elements like a back-arrow link.
# Blog Options
Use the Blog Options tab in the page’s properties dialog to input key details:
- Select a cover image.
- Enter a title, excerpt, and date for the post.
We will display this data on the page itself by placing the new Blog Post Title, Blog Post Excerpt and Blog Post Image components.
You can write your blog post content in the page itself by dropping headings, paragraphs, images and all other elements that you need to create a compelling story.
# 3. Displaying Posts on the Index Page
To showcase your blog posts on the homepage add a Blog Loop component and set the “blog” folder as the source. This automatically generates a list of posts.
This list is updated live whenever pages are added, removed or edited. You don't need to do anything to keep the list up to date, which is the greatest benefit of Blog Loop.
Since Blog Loop inherits all the options of Row, we can customize the layout by adjusting the number of posts per row using Bootstrap’s row and column settings.
We also use the Length Limit option to trim excerpts to a specified character count, ensuring uniformity. Then we drag and drop the Blog Post Date component to include publication dates on your post cards.
Finally we activate the Show Pagination option and configure the posts displayed per page. For improved functionality, we enable the Add URL Parameter option to support browser history and direct links.
# 4. Creating Related Post Sections
Under each blog post, you can display a list of related posts:
- Add a container to the post page and insert a Blog Loop component.
- Set the source as the “blog” folder and limit the number of posts displayed.
- Exclude the current post from the list using the Exclude current page option.
- Apply the same layout to all posts by copying the container and using the Link copies feature.
# 5. Finalizing and Exporting
Once your blog is complete, test it thoroughly:
You can preview the site in a browser to ensure all elements are functional.
When you're ready, export the project, generating a folder with HTML files and assets ready for upload.
Since Blog Loop embeds the contents of the list as regular HTML code in the page, the blog is lightning fast, works on any web host, and doesn't require a CMS like WordPress to function.
# Conclusion
The Blog Loop and related components are not limited only to blogs. You can use them to create portfolios, testimonials, online courses, and more. We look forward to seeing what you build with it!