How to Create a Blog on Webflow

So, you've graduated from using ready-made templates and moved on to designing your layouts yourself using Webflow. That's awesome! Webflow is a fantastic way for you to create your own website and finally flex your design muscles. 💪 

But that's not to say it’s a perfect tool. As great as Webflow is, you’d probably agree that its native blogging capabilities can be a bit daunting. Sure, learning and configuring various collections, fields, and lists can be really helpful when creating something that needs that level of precision, but for many of us, this is too much. 

Since Webflow has a steep learning curve already, when it comes to blogging, many of us just want a tool that’s both effective and easy to use. With that being said, let’s dive into how to create an easy-to-use blog on Webflow, but first, let’s recap why Webflow can be tricky to use for blogging by itself. 

Why Webflow Isn’t Particularly Good for Blogging: The Webflow CMS

Creating a blog in Webflow can be a bit of a challenge, and here’s why: they introduced a CMS (content management system), which basically acts as a big database for all of your files. This system is great for experienced web developers who've been writing server-side code for years and speak SQL like a second language. However, for mere mortals, it can be a real head-scratcher.

Purpose-Built vs. Built for Every Purpose

Here’s what happened: Webflow tried to turn databases into something simple, so they created a general-purpose CMS that could be made into many things – a jack of all trades, if you will. This resulted in a system that can imitate a blogging platform but actually lacks many of the necessary features that purpose-built blogging platforms like WordPress or Weebly provide.

This problem is due to the same issue many no-code website builders face (think Squarespace and Wix). They strive to create a simple solution for making beautiful websites, but the more features they try to implement, the more complicated their simple solution becomes. Your typical catch-22.

Therefore, you may spend days or weeks perfecting your website, and when the time comes to add a blog, you find that Webflow’s native blogging solution requires a lot more time and effort than you had initially expected. The blog feels clunky, and you’re wondering why you can’t just write a simple blog post and have it show up on your site.

Blogging in Webflow Doesn’t Need to Be Complicated

Luckily, you can opt for a much better alternative, like DropInBlog, the most user-friendly blogging tool that allows you to skip all this mess. There are no CMS collections to set up, and you don't have to manually configure each part of your Webflow template. You literally just copy and paste a couple of lines of code into your layout, and DropInBlog handles the rest. It’s a piece of cake! 🍰

DropInBlog - A Truly Simple Alternative

The best thing about DropInBlog is that it's simple to use while still giving you the option to get technical with code if you want to go deeper. You have access to a variety of complex features that would otherwise take forever to obtain in Webflow. Take a look:

As you can see, DropInBlog allows you to choose which information about your content you want to be visible. You can easily toggle them off and on at any time and customize your blog posts’ previews. But that’s not all you’re getting. You also need to optimize your content for search engines so it can be easily found when someone searches for topics that you blog about, which is key to driving traffic to your site. In other words, you’ll need to step up your SEO game.

SEO Doesn't Have to Be Mysterious

If you're using Webflow, you're probably pretty seasoned in the way of the web and know the value of SEO or have at least heard of it. You've built this beautiful site, but how do you get people to look at it? SEO is what gets your blog posts and website to the top of search engine results.

Reading guides online about SEO, you'll find it's a quagmire of guessing, outdated information, and sometimes things that are just plain wrong. Some will advocate stuffing your post full of keywords, adding certain metadata, or even backlinking, but it's guesswork to figure out what's actually useful to an ever-changing search algorithm.

Unfortunately, Webflow does not offer tools to analyze your blog posts, but just basic guidelines you should follow. On the other hand, DropInBlog will actually help you with your SEO. Besides the ease of use and flexibility, DropInBlog also offers another invaluable tool: the SEO Analyzer. 

Added SEO Benefits

When it comes to SEO, DropInBlog’s SEO Analyzer is your best friend. It’s an interactive tool that assists you as you’re writing your posts and gives you immediate feedback. What it does is it analyzes your post and provides a simple bullet point list of things you can do to improve your SEO. This may be something simple like including your main keyword in the meta-description, or something more advanced, like adding an alt tag image description.

As you’re constructing your post, the tool grades your content and gives you a score out of 100. In general, anything between 90 and 100 is considered a good SEO score, which means that the chances of attracting organic traffic through search engines are high.

Keep Your Own Style

Additionally, with DropInBlog, you can choose a professionally designed template and have your blog running on Webflow in seconds. DropInBlog looks at the existing CSS of your site and automatically adopts it. It takes about as long as dragging and dropping any other element into your Webflow layout. Check out this integration tutorial here for more detailed information.

Webflow and DropInBlog - The Perfect Union

There are many general-purpose CMSs other than Webflow that are not ideal blogging solutions – simply, when a platform wasn't built from the ground up for blogging, it shows. In contrast, DropInBlog was specifically built for one purpose: to make adding a blog to any site painless.

With the power of both platforms, you'll now have:

• A blog that is simple to implement & maintain

• A ton of options at the flick of a switch

• A purpose-built blogging platform

• Blog posts that are analyzed for SEO

How to Create a Blog on Webflow

Before we begin, you should know that in order to add custom code to Webflow, you'll need either a paid account or paid hosting for your site. You can either go here to add your site or here to upgrade your Webflow account to at least the Lite version. You can find more information about Webflow’s pricing plans here.

Getting the Snippets

Alrighty, let's get started! Go ahead and log into your DropInBlog account and find the Code & Layout page. There, you'll see the two snippets used for connecting Webflow to your DropInBlog content. For now, we're just going to use the four lines of code under Step 1, so copy those, and then we can hop on over to Webflow. 

Connecting to DropInBlog

In your Webflow site builder, open the pages tab in the left-hand toolbar and create a new page called Blog (or whatever you'd like!). Now, when you hover over your new Blog page, a gear icon will appear that opens a new settings panel. At the bottom of that panel, under where it says Before </body> tag, we can paste in the code snippet we copied from DropInBlog.

Just like that, we've added DropInBlog, and we're ready to start using all the goodies it gives us.

Adding Our Posts

Now that Webflow is connected to DropInBlog, we need to tell it exactly where on the page we want our posts to be loaded. This is important, so follow closely.

In the Add Elements tab, the little square with a plus, we can drag and drop a new Container wherever we want onto our new Blog page. You can use other elements if you want, but containers will center your content and add some spacing around the sides, which looks best most of the time.

When we click on the container, a new sidebar will appear on the right. In the Settings tab, the one with another little gear, we need to set the ID to “dib-posts” (you can find this ID under Step 2 in your DropInBlog account). Setting the container's ID tells DropInBlog what content we want to pull in from our account – in this case, our posts!

Once you get the hang of this, you'll see you're not just limited to pulling in posts – you can add more containers with other IDs like dib-categories or dib-authors.

A note: Don't worry that nothing is showing in the page builder; it's all happening behind the scenes and will be loaded in when the page is published.

Publishing 

It's now time to publish our new Webflow site. On the top right of the site builder, you'll find the publish tab with a cute little rocket ship. Just select your site from the dropdown, hit Publish Selected Domains, then click on the link to your new site.

Here's a preview of ours. Pretty slick, eh?

One Last Step

Now we have everything loading on the blog page, but the links to the posts themselves won't work properly. This is because while Webflow is connected to DropInBlog, DropInBlog isn't yet connected to Webflow, and therefore it doesn't know where to generate our posts, so the links to them won't work.

To resolve this, just copy the URL of your published site, head over to the Settings page on your DropInBlog account, and paste it into the Blog URL input field. Now, unless there are any other settings you want to tinker with, you're all set!

Custom Styles

Though DropInBlog will automatically use any CSS styles your site already has in place, you can still easily restyle anything from DiB however you want. Back in your blog page's settings, above where we added our snippet, you can throw any custom styles inside of some style tags, and you're good to go.

Webflow FAQs

Closing Thoughts

Once again, DropInBlog comes to the rescue allowing you to seamlessly integrate a powerful blogging solution into your Webflow site.

You can now take full advantage of DropInBlog's built-in features and launch your Webflow website to the next level! 🚀

The DropInBlog team is dedicated to bridging the gap between professional developers and people who just want a place to express themselves. If there was any part of this integration process you had trouble with, or you just have suggestions for how we could improve DropInBlog, feel free to message us.