{"id":474,"date":"2023-04-27T18:54:33","date_gmt":"2023-04-27T18:54:33","guid":{"rendered":"https:\/\/kevingoedecke.com\/?p=474"},"modified":"2023-04-28T18:03:32","modified_gmt":"2023-04-28T18:03:32","slug":"how-to-host-a-blog-under-a-subdirectory-using-vercel","status":"publish","type":"post","link":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/","title":{"rendered":"How to host a blog under a subdirectory using Vercel"},"content":{"rendered":"\n<p>I&#8217;ve recently been trying to add a blog to my existing NextJS website hosted on Vercel. If you want your blog to be indexed in search engine optimized (SEO) way, you might want to consider hosting it under a subdirectory like <code>\/blog<\/code> rather than a subdomain like &#8220;blog.yourwebsite.com&#8221;. The only problem here is that it&#8217;s not easily possible to configure a subdirectory to point to a different Vercel site or a different server all together. And that&#8217;s where my journey started.<\/p>\n\n\n\n<p>Turns out you can actually create two separate Vercel projects and sort of link them together. All this magic takes places in the <code>vercel.json<\/code> config file in the project root.<\/p>\n\n\n\n<p>Let&#8217;s look at how this look in practice.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"rewrites\": &#91;\n    { \"source\": \"\/blog\/:subdir*\", \"destination\": \"https:\/\/magicul-blog.vercel.app\/:subdir*\" },\n    { \"source\": \"\/(.*)\", \"destination\": \"\/\" }\n  ]\n}<\/code><\/pre>\n\n\n\n<p>Seems pretty straight forward right. The rewrites section tells Vercel that the subdirectory\/subpath <code>\/blog<\/code>  will be served from another Vercel app with the URL <code>https:\/\/magicul-blog.vercel.app<\/code>.<\/p>\n\n\n\n<p>If you already have a <code>vercel.json<\/code> file in your project then make sure that you append this and keep all existing stuff in there.<\/p>\n\n\n\n<p>You can potentially configure this to serve more than one directory to multiple different Vercel projects. Make sure that the last part with <code>\/(.*)<\/code>  stays there, because this makes sure that all traffic going to the normal sites does not get lost.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve recently been trying to add a blog to my existing NextJS website hosted on Vercel. If you want your blog to be indexed in search engine optimized (SEO) way, you might want to consider hosting it under a subdirectory like \/blog rather than a subdomain like &#8220;blog.yourwebsite.com&#8221;. The only problem here is that it&#8217;s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":475,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-474","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to host a blog under a subdirectory using Vercel - Kevin Goedecke<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to host a blog under a subdirectory using Vercel - Kevin Goedecke\" \/>\n<meta property=\"og:description\" content=\"I&#8217;ve recently been trying to add a blog to my existing NextJS website hosted on Vercel. If you want your blog to be indexed in search engine optimized (SEO) way, you might want to consider hosting it under a subdirectory like \/blog rather than a subdomain like &#8220;blog.yourwebsite.com&#8221;. The only problem here is that it&#8217;s [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/\" \/>\n<meta property=\"og:site_name\" content=\"Kevin Goedecke\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-27T18:54:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-28T18:03:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kevingoedecke.com\/blog\/wp-content\/uploads\/2023\/04\/host-blog-subdirectory-vercel.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kevin Goedecke\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin Goedecke\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/\",\"url\":\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/\",\"name\":\"How to host a blog under a subdirectory using Vercel - Kevin Goedecke\",\"isPartOf\":{\"@id\":\"https:\/\/kevingoedecke.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kevingoedecke.com\/blog\/wp-content\/uploads\/2023\/04\/host-blog-subdirectory-vercel.jpg\",\"datePublished\":\"2023-04-27T18:54:33+00:00\",\"dateModified\":\"2023-04-28T18:03:32+00:00\",\"author\":{\"@id\":\"https:\/\/kevingoedecke.com\/#\/schema\/person\/4b156cd6453e1af4bab9076b0a663871\"},\"breadcrumb\":{\"@id\":\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#primaryimage\",\"url\":\"https:\/\/kevingoedecke.com\/blog\/wp-content\/uploads\/2023\/04\/host-blog-subdirectory-vercel.jpg\",\"contentUrl\":\"https:\/\/kevingoedecke.com\/blog\/wp-content\/uploads\/2023\/04\/host-blog-subdirectory-vercel.jpg\",\"width\":1800,\"height\":900},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kevingoedecke.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to host a blog under a subdirectory using Vercel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kevingoedecke.com\/#website\",\"url\":\"https:\/\/kevingoedecke.com\/\",\"name\":\"Kevin Goedecke\",\"description\":\"Founder. Entrepreneur.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kevingoedecke.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/kevingoedecke.com\/#\/schema\/person\/4b156cd6453e1af4bab9076b0a663871\",\"name\":\"Kevin Goedecke\",\"url\":\"https:\/\/kevingoedecke.com\/blog\/author\/kgoedecke\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to host a blog under a subdirectory using Vercel - Kevin Goedecke","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/","og_locale":"en_US","og_type":"article","og_title":"How to host a blog under a subdirectory using Vercel - Kevin Goedecke","og_description":"I&#8217;ve recently been trying to add a blog to my existing NextJS website hosted on Vercel. If you want your blog to be indexed in search engine optimized (SEO) way, you might want to consider hosting it under a subdirectory like \/blog rather than a subdomain like &#8220;blog.yourwebsite.com&#8221;. The only problem here is that it&#8217;s [&hellip;]","og_url":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/","og_site_name":"Kevin Goedecke","article_published_time":"2023-04-27T18:54:33+00:00","article_modified_time":"2023-04-28T18:03:32+00:00","og_image":[{"width":1800,"height":900,"url":"https:\/\/kevingoedecke.com\/blog\/wp-content\/uploads\/2023\/04\/host-blog-subdirectory-vercel.jpg","type":"image\/jpeg"}],"author":"Kevin Goedecke","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kevin Goedecke","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/","url":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/","name":"How to host a blog under a subdirectory using Vercel - Kevin Goedecke","isPartOf":{"@id":"https:\/\/kevingoedecke.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#primaryimage"},"image":{"@id":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#primaryimage"},"thumbnailUrl":"https:\/\/kevingoedecke.com\/blog\/wp-content\/uploads\/2023\/04\/host-blog-subdirectory-vercel.jpg","datePublished":"2023-04-27T18:54:33+00:00","dateModified":"2023-04-28T18:03:32+00:00","author":{"@id":"https:\/\/kevingoedecke.com\/#\/schema\/person\/4b156cd6453e1af4bab9076b0a663871"},"breadcrumb":{"@id":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#primaryimage","url":"https:\/\/kevingoedecke.com\/blog\/wp-content\/uploads\/2023\/04\/host-blog-subdirectory-vercel.jpg","contentUrl":"https:\/\/kevingoedecke.com\/blog\/wp-content\/uploads\/2023\/04\/host-blog-subdirectory-vercel.jpg","width":1800,"height":900},{"@type":"BreadcrumbList","@id":"https:\/\/kevingoedecke.com\/blog\/2023\/04\/27\/how-to-host-a-blog-under-a-subdirectory-using-vercel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kevingoedecke.com\/"},{"@type":"ListItem","position":2,"name":"How to host a blog under a subdirectory using Vercel"}]},{"@type":"WebSite","@id":"https:\/\/kevingoedecke.com\/#website","url":"https:\/\/kevingoedecke.com\/","name":"Kevin Goedecke","description":"Founder. Entrepreneur.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kevingoedecke.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kevingoedecke.com\/#\/schema\/person\/4b156cd6453e1af4bab9076b0a663871","name":"Kevin Goedecke","url":"https:\/\/kevingoedecke.com\/blog\/author\/kgoedecke\/"}]}},"jetpack_featured_media_url":"https:\/\/kevingoedecke.com\/blog\/wp-content\/uploads\/2023\/04\/host-blog-subdirectory-vercel.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/posts\/474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/comments?post=474"}],"version-history":[{"count":2,"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/posts\/474\/revisions"}],"predecessor-version":[{"id":478,"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/posts\/474\/revisions\/478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/media\/475"}],"wp:attachment":[{"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/media?parent=474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/categories?post=474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kevingoedecke.com\/blog\/wp-json\/wp\/v2\/tags?post=474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}