Qwik Host Logo

How to Host Your Qwik Blog on a /blog Sub-Folder with Vercel

Vercel configuration setup to host your blog as a /blog sub-folder

Dec 5, 2024

How to Host Your Qwik Blog on a /blog Sub-Folder with Vercel

If you want to serve your Qwik Blog (e.g., my-domain.myqwik.blog) under the /blog sub-folder of your main website (e.g., www.mydomain.com), you can do so with Vercel's rewrites feature. This guide walks you through the setup process step-by-step.

Step 1: Setup Overview

  • Main Domain: Your primary website, e.g., www.mydomain.com.
  • Qwik Blog URL: Your blog hosted on Qwik Host, e.g., my-domain.myqwik.blog.
  • Goal: Serve your Qwik Blog at www.mydomain.com/blog.

Step 2: Configure vercel.json

To integrate your Qwik Blog, you'll need to add the following rewrites to your vercel.json file. Replace my-domain.myqwik.blog with your actual blog URL.

{
  "rewrites": [
    {
      "source": "/blog",
      "destination": "https://my-domain.myqwik.blog/blog"
    },
    {
      "source": "/blog/:path*",
      "destination": "https://my-domain.myqwik.blog/blog/:path*"
    }
  ]
}

Explanation of the Rewrites

1. First Rule:

source: /blog

Matches requests to www.mydomain.com/blog.

destination: https://my-domain.myqwik.blog/blog

Redirects the request to the main blog page.

2. Second Rule:

source: /blog/:path*

Matches any path under /blog (e.g., www.mydomain.com/blog/post-1).

destination: https://my-domain.myqwik.blog/blog/:path*

Redirects requests to specific blog posts or pages.

Step 3: Deploy the Configuration

1. Save the vercel.json file at the root of your project directory.

2. Deploy your project to Vercel.

3. Once the deployment is complete, visit www.mydomain.com/blog to ensure the rewrites are functioning correctly.

Step 4: Test the Integration

• Open your browser and navigate to /blog on your primary domain to verify the integration.

• Test various sub-paths like /blog/post-title to confirm that all routes redirect properly to your Qwik Blog content.

Why Use Rewrites Instead of Redirects?

Using rewrites ensures that visitors stay on your primary domain (www.mydomain.com/blog) without being redirected to the Qwik Blog URL (my-domain.myqwik.blog). This improves the user experience by maintaining a cohesive domain structure and enhances SEO by consolidating all content under your main domain.

By following these steps, you can effortlessly host your Qwik Blog under the /blog sub-folder of your main website, offering a unified experience to your visitors.

Published with

logo