How to configure sub-folders blogs on your existing website with Vercel

Now, you want to host the HuatPage blog on /blog sub-folder of your main domain. How easy can that be using HuatPage?

Let’s say your main domain is www.domain.com and your HuatPage blog is domain.huatpage.com

To configure that, you have two options:

1. If you are using Next.js, add rewrite rules to your next.config.js. Make sure to change domain.huatpage.com to your subdomain URL and change www.domain.com to your own domain

//Typescript
import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   async rewrites() {
     return {
       beforeFiles: [
         {
           source: "/blog",
           destination: "https://domain.huatpage.com/blog",
         },
         {
           source: "/blog/:path*",
           destination: "https://domain.huatpage.com/blog/:path*",
         },
         {
           source: "/blog/_next/:path*",
           destination: "https://domain.huatpage.com/_next/:path*",
         },
         {
           source: "/blog/static/:path*",
           destination: "https://domain.huatpage.com/static/:path*",
         },
       ],
     };
   },
   async headers() {
     return [
       {
         source: "/blog",
         headers: [
           {
             key: "X-Forwarded-Host",
             value: "https://www.domain.com",
           },
         ],
       },
       {
         source: "/blog/:slug*",
         headers: [
           {
             key: "X-Forwarded-Host",
             value: "https://www.domain.com",
           },
         ],
       },
     ];
   },
 };
 export default nextConfig;

Whenever a person goes to your www.domain.com/blog, Next.js will not do anything but let HuatPage handle and display the blog.

Once this is done, go to HuatPage, navigate to Settings > Domains of your site and key in your website url, http://www.domain.com/

Once you completed these, your sub-folder should be live. You should be able to access your blog on HuatPage via http://www.domain.com/blog

2. Or if you are hosting on Vercel, you can add rewrite rules to your vercel.json. Make sure to change domain.huatpage.com to your subdomain URL in HuatPage and change www.domain.com to your own domain

{
 "rewrites": [
    {
 "source": "/blog",
 "destination": "https://domain.huatpage.com/blog"
    },
    {
 "source": "/blog/:path*",
 "destination": "https://domain.huatpage.com/blog/:path*"
    },
    {
 "source": "/blog/_next/:path*",
 "destination": "https://domain.huatpage.com/_next/:path*"
    },
    {
 "source": "/blog/static/:path*",
 "destination": "https://domain.huatpage.com/static/:path*"
    }
  ],
 "headers": [
    {
 "source": "/blog",
 "headers": [
        {
 "key": "X-Forwarded-Host",
 "value": "https://www.domain.com"
        }
      ]
    },
    {
 "source": "/blog/:slug*",
 "headers": [
        {
 "key": "X-Forwarded-Host",
 "value": "https://www.domain.com"
        }
      ]
    }
  ]
 }

Learn more how vercel.json works at Vercel configurations

If It is not working, feel free to contact us with your configurations.