Mar 4, 2025 • Adrian T
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
const nextConfig = {
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*",
},
],
},
},
headers: [
{
source: "/blog",
headers: [
{
key: "X-Forwarded-Host",
},
],
},
{
source: "/blog/:slug*",
headers: [
{
key: "X-Forwarded-Host",
},
],
}
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"
}
]
}
]
}
If It is not working, feel free to contact us with your configurations.
Continue Reading
Road map of HuatPage features
How to display a YouTube video on HuatPage Blog
More than 20 types of Blog Posts to Try and Why They Work
Why use Google Docs as a blog post editor
45 Attention-Grabbing Hooks for Social Media Posts
How to edit the title and metadata of the blog hosted on HuatPage?
How to Delete a page in Google Docs
Essential Google Docs Shortcuts to Save Time
How to edit Google Docs without wifi or internet access?
How to Create a Table of Contents in Google Docs Automatically
The Ultimate Guide to Writing Attention-Grabbing LinkedIn Posts
What is Huat Page? How does it work to create Blogs using Google Docs?
10 Ways a Blog Can Skyrocket Your Solopreneur Business
How to Pick the Perfect Blog Niche (With Examples) for Your Side Hustle
Why indie hackers need to use a simple solution to write a marketing blog
30 things you should never say to your customers when providing support
Essential Google Docs Shortcuts to Save Time
How to Track Changes by Different Writers in Google Docs
How to display a Google Map location on your HuatPage blog
How to display a TikTok video on HuatPage Blog
How to change the design of your HuatPage Blog
The Entrepreneurial Leap: When Your Intrapreneurial Spirit Yearns for More
How to change Margins in Google Docs
