How to Host a Blog on a Subdirectory Instead of a Subdomain

In this guide, you’ll learn how to host your blog on a subdirectory (e.g. example.com/blog) instead of a subdomain (e.g., blog.example.com). Every step here has been tested and verified to work.

Introduction

Hosting your blog on a subdirectory can improve SEO and enhance user experience.

Although there are a lot of articles that espouse the benefits of using subdirectories over subdomains, few resources that provide a step-by-step guide on how to actually set this up.

Why Host on a Subdirectory?

The benefits to hosting on a subdirectory is primarily to improve SEO.

There are a lot of other articles out there on this topic, but they all say something similar to the following:

• Hosting your blog on a subdirectory is better for SEO because it consolidates your website’s authority and ranking power.
• Google has stated that they do not treat subdomains as a separate entity.
• Despite what Google has stated, empiric data suggests that subdirectories outperform subdomains in search rankings.
• If you want to maximize your SEO efforts, hosting on a subdirectory is the way to go.

My personal experience has been similar. When I moved a blog from a subdomain to a subdirectory, I saw a noticeable increase in organic traffic and search engine rankings. The increase happened after a few weeks. During that time, I did not release any new content and nor did I promote the blog.

Why Not Host on a Subdirectory?

The setup is more complex. Many blogging platforms and CMSs are designed to work on subdomains, and configuring them to work on a subdirectory can be tricky.

I’ve personally found the setup process to be quite time consuming. It’s a tricky process and you have to follow the instructions carefully.

Steps to Host Your Blog on a Subdirectory

Lets suppose you have two sites right now. One is example.com and the other is blog.example.com. You want to host the blog on example.com/blog instead of blog.example.com.

Lets also suppose your blog (blog.example.com) is a Next.js app hosted on Vercel and your main site (example.com) is a static site hosted on Render.

Step 1: Set Up DNS Records for the Main Site

First, set up the DNS records for your main site (example.com) in Cloudflare. Ensure SSL/TLS is set to "Full" and add CNAME records for your main site with "Proxied" status.

Step 2: Set Up DNS Records for the Blog

Make sure your blog is already accessible on a subdomain. Add another DNS Record for the blog in Cloudflare, pointing to your blog's hosting provider (e.g., Vercel), also set to "Proxied".

Step 3. Configure Your Next.js Blog

Edit the next.config.js or next.config.mjs file and add basePath: "/blog" to the config to ensure correct routing for static assets.

Step 4. Add a Cloudflare Worker

Create a new Cloudflare Worker named blog-worker. Use the fetch API to proxy requests from the subdirectory to the subdomain by replacing the URL strings in the request.

Step 5. Connect Next.js Site with Cloudflare Worker

Go to "Worker Routes" in the Cloudflare Dashboard and add routes for example.com/blog* and example.com/blog/_next/static* to point to your new worker.

Finally, configure your robots.txt to ensure search engines index the subdirectory instead of the subdomain.