Menu-new

How to make multiple URLs appear from the same domain

Problem

With the advances and more affordable prices available today in software and infrastructure, you might find yourself with parts of your website across a number of different platforms. For example, you might be using WordPress for your blog or podcast, you might be using a specialized tool to deliver online courses, another for digital memberships, yet another for physical products, another for opt-in forms and surveys, and the list goes on. Each one of these might allow you to add a custom domain. So maybe you have blog.example.com for your blog, courses.example.com for your online courses, store.example.com for you physical products, etc.. The only problem is that this isn’t as good for SEO as having example.com/blog, example.com/courses, so on and so forth and if you’re not careful, the transition between all of these tools might not be a great user experience/journey for your clients.

Solution

I recently wanted to implement this exact solution for a client of mine so I scoured the internet looking for instructions, only to find they all only gave me part of the solution. While I do have a background in software development, I am by no means a DNS expert and all the solutions out there required a preliminary knowledge in DNS. Luckily for you I was able to piece together the instructructions and with some help from my hosting provider, can now give you a step-by-step guide with instructions for every step.

Prerequisites & Disclaimer

We build all of our WordPress sites on Flywheel and put them behind a Cloudflare CDN. This combination gives us an amazing level of support and security that we can offer our clients while keeping our prices low. These instructions detail how to do these steps using these two platforms. That is not to say you can’t do them elsewhere, however you’ll need to adjust the instructions accordingly. Also, we love to promote our partners and save our clients money in the process so links we provide may be affiliate links. You are under no obligation to click on one of these links or make any purchases, however doing so may result in incentives for us, for you, or for both of us. Regardless of what software you choose, remember, the choice is yours. It is always important to weigh all of your options and choose the best fit for you. We offer no promises or guarantees for any third-party product we mention.

Shameless Self Promotion

If you’re thinking, Yes! finally someone gets me. They know exactly what I’ve been looking for all this time, only problem is I don’t want to implement these steps myself. Perfect, you can stop here because we do offer done-for-you services at affordable rates. All you have to do is click here and take this free, short survey to get started.

Cloudflare Setup

First thing you’ll need to do is setup a FREE cloudflare account. I do not believe in re-inventing the wheel so here is Cloudflare’s documentation on getting started. Some things you should know:

  1. For this project, all you need is a FREE Cloudflare account. Cloudflare will offer you other options, but you can choose the FREE option for the purposes of this project.
  2. You will need a domain name. We assume you already have one for this project, however if you need one, you can register a new domain in Cloudflare. We recommend Cloudflare as a registrar because they offer wholesale prices rather than retail. You also receive WHOIS privacy and an SSL certificate for free with a FREE Cloudflare account. If you are purchasing a domain that Cloudflare doesn’t support (some specialty and non-US domains are not yet supported in Cloudflare Registrar), then we suggest Google Domains because they do no not try and upsell you at checkout and they offer a wide variety of customization. Whomever you choose as your Domain Registrar, ensure they allow you to change the nameservers.
  3. Not all DNS providers allow you to change their name servers. If you’re able to change your nameservers, skip this step. Otherwise, you won’t be able to use Cloudflare while you remain on a provider that does not allow for custom nameservers. ICANN prohibits changes to domains for 60 days after any WHOIS data has changed for that domain. This means if you purchased your domain or made any changes to your contact information on your domain within the last 60 days, you will not be able to perform this step until that 60 day window is over. Once the 60 day window is over, you can move your domain to a registrar that supports custom nameservers. I prefer Google Domains because they do not try and upsell you at checkout. Anytime you move your domain registration, the new Registrar will require you to extend your registration by one year. Here is Google’s documentation on how to transfer your domain to their platform.
  4. Follow the Cloudflare wizard as setup instructions. Cloudflare will automatically import your DNS setup rules for you. Make sure you compare the two setups and confirm Cloudflare pulled everything in correctly, especially if you have any email addresses associated with this domain. If you do not ensure your MX, TXT, and CNAME records associated with your email are properly configured, you’re email will stop working. Do not skip this step!! Also, Cloudflare does not automatically pull in subdomains and redirects so if you need any of these, you’ll need to configure them manually under page rules. For the rest of the wizard, we suggest the following settings.
  5. We suggest you set Automatic HTTPS Rewrites to On

6. We suggest you set Always Use HTTPS to On

set Always Use HTTPS to On

7. We suggest you check all the boxes in Auto Minify

Auto Minify

8. We suggest you set Brotli to On

set Brotli to On

Setting Up a Worker in Cloudflare

First let’s talk terminology. In this example we’ll have four websites. These are not real websites, they’ll just help you with seeing how the steps play out for what you need to change for your own setup to work.

  • Site 1: exampleblog.com – Custom domain for our blog
  • Site 2: examplepodcast.com – Custom domain for our podcast blog
  • Site 3: examplecourses.com – Custom domain for our virtual courses
  • Site 4 mainexample.com – Custom domain for our main website

Step 1: Create a Worker SubDomain in your Account Home

On your account home page in Cloudflare, click the Workers icon on the bottom right of the screen

Click Workers Icon

You will be entered into a Cloudflare setup wizard that will ask you to choose a subdomain. What you choose doesn’t really matter, but it needs to be unique to the Cloudflare platform so Cloudflare will make a suggestion and if you change it, it will let you know if your new entry is available or not. Once you’re done, click the setup button.

For the purposes of this exercise, you can choose the FREE option.

Step 2: Create a Worker in your Account Home

After you’re finished with step 1, click the Create a Worker button. A new screen will open and in the top left, underneath the Cloudflare logo you’ll see the name of your project. For this project, we’re going to start with our blog so we’re going to change fancy-leaf-df21, the default project name, to exampleblog, our custom name. You do this by click anywhere on that name (fancy…). It will turn into a text box. You then delete the contents and type in your new name. Click anywhere out of the box and your new name is still there. It’s not saved yet so don’t leave the page just yet.

fancy-leaf-df21 is a default name given by Cloudflare
Before name change – fancy-leaf-df21 is a default name given by Cloudflare
sample custom name: exampleblog
After name change – exampleblog is our custom name for this worker

Next we’re going to replace the contents of the script box with our own custom code.

script box
Sample script supplied to us by Cloudflare

To do that first copy the code below into a text editor and change the bold text to match your main site and secondary site information. Remember mainexample is our main website so you’ll replace that URL with the URL of your main website. /blog/ is the URL ending we want to use for our secondary site so replace that with whatever ending you want to use and finally exampleblog.com is our secondary site. In this case it is the URL to our blog so you’ll replace that with your blog. Finally, delete the sample code in the script box and paste your custom code in that box.

addEventListener('fetch', event => {
  var url = new URL(event.request.url);
  if (url.pathname === '/blog/') {
    handleBlog(event, url);
  } else {
    event.respondWith(fetch(event.request));
  }
})

async function handleBlog(event, url) {
  url = url.toString().replace('www.', '');
  var originUrl = url.toString().replace(
    'https://mainexample.com/blog/',
    'https://exampleblog.com');
   event.respondWith(fetch(originUrl)); 
}
Our custom code in the Script box on Cloudflare
Our custom code in the Script box on Cloudflare

Once complete, click Save and Deploy. Confirm everything is accurate and click Save and Deploy again.

Step 3: Create a Route on Your Main Website

Cloudflare Menu

Once you click on your main website’s domain in Cloudflare, the above menu will appear. Click on the Workers button in that menu. Click on the Add Route button.

Workers Section

You’ll notice Cloudflare gives you some sample values for the questions, such as *.mainexample.com/* These stars represent wildcards so what this sample URL means in actuality is look for anything on mainexample.com regardless of whether it’s the main domain, a subdomain, or has something after the .com. In this case, we only want to pay attention to the URLs specific to our example secondary site so we’re going to enter *.mainexample.com/blog* Do not put a slash at the end, we’ll handle that later. Of course you’re going to replace this with *.[YOUR MAIN SITE]/[YOUR SECONDARY SITE URL ENDING]* from Step 1. Once you’re done, click save.

Step 4: Setup a Redirect for /’s

In the olden days a URL that ended in a / represented a folder and a URL that ended without a / represented a page or file. That’s no longer the case, however doing a 301 redirect from no / to / is best practice for increasing SEO so that’s what we’re going to take care of next. Go back up to the main menu, still on your main website Rules (one icon to the right of Workers). In the first box, enter *[MAINWEBSITE]/[SECONDARY SITE URL ENDING] with no / at the end. Then choose Forwarding URL from the dropdown, then choose 301, and for the following URL you’ll either put https://www.[MAINWEBSITE]/[SECONDARY SITE URL ENDING]/ with a / at the end or you’ll do *[MAINWEBSITE]/[SECONDARY SITE URL ENDING]/ with a slash at the end.

Which one do you choose? You’ll choose the first option if this is a WordPress site. For most other platforms and websites you can still choose this first option, however some platforms do not support forced https://www so in that case, just use the second option. If you don’t know, try the first option. If it works, great, if it doesn’t, try the later.

Edit Page Rule Section

Step 5: For WordPress Multisite Networks

If you’re running a WordPress Multisite Network as either your main website or one of your secondary sites, you’ll want to do the following. Like I said earlier, we use Flywheel as our WordPress hosting partner. If you’re a do-it-yourself-er and want a great partner, I highly suggest Flywheel as your go to WordPress partner. If you need help designing, butilding, and maintaining your WordPress site, and you also want to think long-term about optimizing your business and automating your workflows, then we have great packages that start as low at $15 per month. You can get started with this FREE survey. Either way, if you’re using Flywheel you can just ask them to make the following changes to your WordPress Multisite Network via their handy support ticketing system. 

Don't write WP_SITEURL to wp-config.php
Disable primary domain redirect
Deactivate Sunrise

If you are technical and want to do this yourself or you don’t have someone as great as Flywheel as your WordPress hosting partner then you’ll want to modify your home and siteurl values so they can be set by WordPress dynamically. You can do this by adding these lines in your wp-config.php (on the source install)

define('WP_SITEURL', 'https://' . $_SERVER['SERVER_NAME']);
define('WP_HOME', 'https://' . $_SERVER['SERVER_NAME']);

If you’re using WordPress on the source install, you’ll want to change the RewriteBase line in your .htaccess to:

RewriteBase /YOUR_SUBDIRECTORY/

…in the case above it would be RewriteBase /blog/.

Step 6: Update Your Headers & Footers

You can now go through and replace any headers that had a different URL such as exampleblog.com or blog.mainexample.com with your new mainexample.com/blog/ URL. You should of course put in the full URL: https://www.mainexample.com/blog/

Step 7: Repeat for Additional Subsites

Repeat steps 2 through 6 for any additional subsites you might have.

Conclusion

At the end of this process, if you were using all of the same sample sites we were your header might look something like: Home Blog Courses Podcast

When you click on home, what the viewers will see is https://www.mainexample.com, where the site really lives would be the same.

When you click on Blog, what the viewers will see is https://www.mainexample.com/blog/, where the site really lives would be https://www.exampleblog.com therefore if this is a WordPress site, then your wp-admin login URL would be https://www.exampleblog.com/wp-admin/. If people went to https://www.exampleblog.com they would be redirected to https://mainexample.com/blog/.

When you click on Courses, what the viewers will see is https://www.mainexample.com/courses/, where the site really lives would be https://www.examplecourses.com therefore if this is a WordPress site, then your wp-admin login URL would be https://www.examplecourses.com/wp-admin/. If people went to https://www.examplecourses.com they would be redirected to https://mainexample.com/courses/.

When you click on Podcast, what the viewers will see is https://www.mainexample.com/podcast/, where the site really lives would be https://www.examplepodcast.com therefore if this is a WordPress site, then your wp-admin login URL would be https://www.examplepodcast.com/wp-admin/. If people went to https://www.examplepodcast.com they would be redirected to https://mainexample.com/podcast/.

Take it up a Level

Now that you have a nice consistent domain structure, don’t forget to make all of your headers across all of your different platforms the same. Same brand, same log, same layout, same links, same ordering, etc… This is what is going to give people that seamless transition from one platform to another. Regardless of your reasoning for using multiple platforms, your users do not need to know they are switching from platform to platform. You do need to add all the various systems to your privacy policy to make sure your viewers are aware of all the systems capturing their data, but that doesn’t mean that they have to be reminded at every step that they are transitioning between them.

Remember, people leave your site for 3 main reasons – they’re confused, they’re overwhelmed, or they’ve determined you aren’t a good fit for them. Two of these reasons are within your control and could prevent your ideal client from saying YES to you. And if you’ve authentically communicated what problem you solve, who you solve it for, and why you and it’s still not a good fit for them, then let them go; it’s more important for you to ensure a pleasurable user experience for your ideal client, then wasting your time trying to please everyone.