Run your Blog in a subdirectory with Nginx or Cloudflare

Introduction

For SEO subdirectories are better than subdomains. But hosting a blog is much easier in a subdomain.

So: shall you go for SEO or for ease of hosting? This article helps you to show how easy it is to host in a subdirectory - but you still need to decide on your own. There's some situations where you want to stay on a subdomain.

For a detailled rundown subdirectories vs subdomains see this article.

But now let's boost your blog's SEO, shall we?

Step-by-Step Guide to Hosting Your Blog in a Subdirectory

Nginx Server for Self-Hosters

If you're self hosting chances are high you're using Nginx.

So here's how to configure it:

location /blog {
    alias /home/philipp/backl-blog/out;
    try_files $uri $uri.html $uri/ @rewrite;
}
location @rewrite {
    rewrite ^(.+)/$ $1.html permanent;
}
location / {
    include /etc/nginx/next_proxy.conf;
    proxy_pass http://127.0.0.1:3000/;
}

This configuration:

• Directs Nginx to serve content from the /blog subdirectory
• Specifies the location of your HTML files (replace /home/philipp/backl-blog/out with the path where your html files lie)
• Searches for matching files or directories
• makes /blog/article.html be accessible as /blog/article (via the @rewrite rule)
• all the rest traffic is proxied to the webserver (I'm using next.js on port 3000)

Feel free to adjust this based on your specific setup, such as different file paths or port numbers.

Cloudflare for SaaS users or self hosters with multiple servers

If you're using an existing blog solution which doesn't offer subdirectory out of the box, or if you have multiple servers, you might want to use Cloudflare.

Cloudflare acts as a proxy which takes all your incoming requests and routes non-blog traffic to your main webserver and the blog traffic it routes to your blog webserver.

1. Create a Cloudflare account and add your domain
2. Route your domain to Cloudflare
3. In cloudflare go to workers and create a new worker with the following code:

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const { pathname, search } = url;
  var newPathname = pathname;
  if (pathname.startsWith('/docs')) {
    newPathname = pathname.replace('/docs', '');
  }
  const originUrl = `https://docs.boltai.com${newPathname}${search}`;
  console.log('originUrl', originUrl);
  const fetchOptions = {
    method: request.method,
    headers: request.headers,
    redirect: 'follow', // Ensure redirects are followed
  };
  const response = await fetch(originUrl, fetchOptions);

  // Check if the response is HTML
  const contentType = response.headers.get('content-type');
  if (contentType && (contentType.includes('text/html') || (contentType.includes('text/css')))) {
    // Get the response text
    let text = await response.text();

    // Replace the script sources
    text = text.replace(
      /\/_next\/static/g,
      'https://boltai.com/docs/_next/static'
    );

    // Replace the canonical link
    text = text.replace(
      /<link rel="canonical" href="https:\/\/docs\.boltai\.com\/docs/g,
      '<link rel="canonical" href="https://boltai.com/docs'
    );

    // Create a new response with the modified HTML
    const newResponse = new Response(text, {
      status: response.status,
      statusText: response.statusText,
      headers: response.headers,
    });

    return newResponse;
  }

  // If not HTML, return the original response
  return response;
}

Props to Daniel Nguyen (maker of BoltAI) for this script.

For more detailed instructions on the setup of Cloudflare, visit createtoday.io.

When does it make sense to migrate to subdirectories?

You might be wondering if this change is worth the effort.

While subdirectories can provide an SEO edge, there are other factors that are more important. For instance having high quality content. Or having enough blog articles. If for you having a subdirectory setup hinders you from doing that, then don't do it.

If you already have your blog running and moving it to a subdirectory would consume more than a week of your time, it might not be the best use of your resources. You could potentially achieve better results by focusing on creating great content or implementing other SEO strategies.

Migration path: A step-by-step guide

If you've decided to make the switch, follow these steps for a smooth transition:

1. Set up subdirectory routing while maintaining the subdomain
2. Update internal links to reflect the new URL structure
3. Address image and CSS issues, ensuring all assets are properly linked
4. Revise your robots.txt file and sitemap
5. Update homepage header and footer links
6. Run Ahrefs site audit to crawl your site and see if you missed anything
7. Install 301 redirects for the old links of your subdomains (e.g. blog.yourdomain.com to yourdomain.com/blog) - this way the SEO you already built up will be 100% transferred to the new pages
8. Watch Google Search Console for errors. In my case there were some additional issues ahrefs site audit didn't catch.

Conclusion

Hosting your blog in a subdirectory provides a SEO boost. By following this guide, you can effectively make the switch, whether you're hosting the blog yourself or use an SaaS blog solution. Remember, while structure is important, content remains the cornerstone of SEO success.

FAQs

1. Q: What's the typical timeframe for moving a blog to a subdirectory? A: It varies based on blog size and technical expertise. For me it took 2-3 hours (plus some sweat) to do the switch.

2. Q: Are 301 redirects necessary when moving to a subdirectory? A: Yes, 301 redirects from old URLs to new ones are essential for preserving SEO value and user experience.

3. Q: What are the potential drawbacks of using a subdirectory for my blog? A: The main challenge is the initial migration effort. Also if you're just starting out and are overwhelmed with the subdirectory setup you might consider the subdomain setup to mentally unblock you from starting to write content.