A blog is essential for every website. When you have a website, a blog can be a powerful tool to attract relevant visitors through search engines. Additionally, a blog helps your visitors learn more about your site and products while enhancing your online visibility.
However, building a blog is not easy. If you're looking to learn how to add a blog to an HTML/CSS website, we're here to help. Let's explore the options.
Options to Add a Blog to Your Existing Website
Typically, there are three ways to add a blog to your existing website:
- Custom Made
This means you create it yourself by writing HTML & CSS code, or you hire an expert (vendor) to do it for you. While this option offers flexibility in how you want the blog to look and function, it is time-consuming and more expensive. You might spend weeks, if not months, developing the blog itself, along with a content management system (CMS) to write posts and other relevant features. - Blog Platforms like Medium & WordPress
You can add a blog to your existing website using platforms like Medium or WordPress. All you need to do is link the platform to your subdomain, essentially creating an alias like subdomain.yourblog.com that points to the platform. However, this approach comes with limitations. What you’re actually creating is a separate website from your main site, so the design will differ. Also, using a subdomain may not perform well with SEO. - Third-Party Blogging Platforms like Blogstraps
With Blogstraps, you're provided with a CMS where you can write blog posts. The difference between this and platforms like Medium and WordPress is that you can embed, place, and present the blog on any website within minutes, using your existing design. You just need to insert a few lines of code.
Integrate Blogstraps with an Existing HTML/CSS Website
First, you'll need to register and create a Blogstraps account. Don't worry—Blogstraps offers a free plan, so you can try it out before committing to a more advanced plan. Here's what you need to do:
1. Go to the Dashboard > Embed & Code page and copy the embed key.
2. Add Blogstraps' JS Script at the end of your <body> tag. It should look like this<script async src="https://blogstraps.com/embed/blogstraps.min.js"></script>
3. Next, copy this code into the container on your web page where you want the blog to appear<div id="bs-blog" data-key="<your_embed_key>"></div>
You can follow the tutorial in the Blog Code tab on the Embed & Code page.
Finally, you can make UI adjustments in the Design Customization page, where you can change colors and even add custom CSS to the blog posts.
