Articles on: Getting Started

Add a DropInBlog Blog to an HTML Site

Paste two snippets from your DropInBlog account into a page on your HTML site, and that page becomes your blog. After you set up your blog, you’ll manage your blog posts with DropInBlog, and everything you publish in your DropInBlog account will automatically show up on your HTML site. The setup takes a few minutes.

How to Install DropInBlog on an HTML Site

  1. Create a new page on your HTML site and open it in your code editor.
  2. Go to the Code & Layout page in your DropInBlog account and copy the code under Blog Script.
  3. Paste the Blog Script code within the <body> element in your code editor.
  4. Return to the Code & Layout page of your DropInBlog account and copy the code under Blog Container.
  5. Go back to your HTML site and paste the Blog Container code under the Blog Script code.
  6. Save your changes and republish your site.
  7. Visit your new blog page and copy the page link.
  8. Return to DropInBlog’s Code & Layout page and click the Verify Integration button.
  9. If asked for the link to your blog page, paste it into the blog URL field on the Code & Layout page and click the verification button again. You’ll get a success message informing you that your blog is live.

Where Your HTML Blog Lives

Your blog is hosted on DropInBlog’s servers, but it appears on your own domain, on the page where you pasted the code. If you name that page blog.html, your URLs will look like this:

  • your-domain-name/blog.html (blog homepage), or your-domain-name/blog if your host serves pages without the .html extension
  • your-domain-name/blog.html?p=blog-post-title (individual blog posts)
  • your-domain-name/blog.html?c=category-name (blog category pages)

Your URLs include query strings like ?p= and ?c= for now. The last step of Verifying the Integration shows how to get clean URLs.

Verifying the Integration

To check whether the blog integration was successful, publish a test post from within your DropInBlog account:

  1. Open the Posts page.
  2. Click the Add Blog Post button to launch the editor.
  3. Add your content, then select Published under Status.
  4. Click the View Post button and check that the post appears on your site and loads properly.

One More Step: Turn On the SEO Supercharger

Your blog is live, and Google indexes your client-side rendered posts as they are. Some other crawlers and link previewers only read a page’s raw HTML, though.


Turning on the SEO Supercharger serves your posts as flat static HTML for those too, with clean URLs that drop ?p= and ?c=. It’s a one-time setup, included in every DropInBlog plan.


You’ll need a custom domain with DNS at Cloudflare. Follow the SEO Supercharger guide to set it up.

Styling

Your blog picks up your HTML site’s fonts and colors, so it should look native out of the box. You can change its appearance from the Code & Layout page of your DropInBlog account:

  • For small design changes, go to Design → Design Customizations.
  • For CSS-based changes, go to Custom CSS in the Advanced Options section below Design.
  • For layout changes, go to Blog Layout in the same Advanced Options section.

Troubleshooting

If your blog isn’t showing up, check these first:

  • Check that you saved and republished your site. After you add your blog code, save and publish the changes you made.
  • Check whether your blog page contains both code snippets. You need to add both the Blog Script and Blog Container code to your site for the integration to work. Copy whichever is missing and paste it into your code editor.
  • Check whether your blog code is in the right section of the page. Placing the Blog Container code inside the <head> may stop your blog from displaying or make it appear in an unexpected location. Paste the Blog Container code into the <body> of the page.
  • Check whether your site has a layout rule (e.g., display: none) that hides your blog. Use your browser’s developer tools to find the rule, then change or remove it.

Still not working? Contact DropInBlog support and include a link to your blog page.

Limitations

DropInBlog adds a blog to your HTML site, but there are a few things to keep in mind:

  • Blog posts live in DropInBlog, not in your project files, so they aren’t version-controlled with the rest of your site.
  • Your site’s own sitemap won’t list your posts. Solved: DropInBlog builds its own XML sitemap automatically. Find it in Settings, below Blog URL, and submit it to Google Search Console.
  • Social previews show the blog page’s details, not each post’s. Solved: turn on the SEO Supercharger, and previews show each post’s SEO title, description, and featured image.

Updated on: 07/10/2026