Zein's Blog

Redirecting a Subdomain to an Existing Site

If you have a domain (e.g. https://zeinh.ca), you can redirect it’s subdomains to unique IP addresses separately from the base domain.

The issue for some is that you can redirect it to a specific page on a hosted site without some workarounds.

Here I show a quick way to set it up so that you can redirect subdomains to specific pages somewhere else (e.g. my subdomain resume.zeinh.ca redirects to a file found on my main site https://zeinh.ca/resume/ZeinHajjAli-Resume.pdf).

Requirements

Steps

  1. Log into your Netlify account

    • Find the Domains tab on the left hand side

    • Click on “Add or Register Domain” button

    • Enter your domain name and click verify (in my case my secondary domain is zeinhajjali.com)

      Then click on Add domain. The warning appears since the domain was registered on a different registrar before adding to Netlify

    • If you’re not using the domain for any other services like email, just press Continue

    • The next page will show you a list of DNS records. Keep these handy and press Continue

  2. Log into your domain management view with your registrar

    • Note: Each registrar will layout these options differently, but the gist is the same

    • Find the option for changing the domain’s nameservers

    • Change the nameservers to the ones Netlify gave you

  3. Now that we have our domain using Netlify’s DNS we can set up a site to redirect our subdomains from Netlify

    • In an empty folder, make a new text file and save it as _redirects.
      • Note that the filename doesn’t have an extension like .txt
    • Edit the file to redirect your chosen subdomain to your chosen site
      • I’m going to redirect the resume subdomain of zeinhajjali.com (resume.zeinhajjali.com) to the PDF file on my other site at https://zeinh.ca/resume/ZeinHajjAli-Resume.pdf
      • Here’s what this would look like:
        1
        
        https://resume.zeinhajjali.com/* https://zeinh.ca/resume/ZeinHajjAli-Resume.pdf 301!
        
      • In this case, the /* after the domain makes it so that any page opened on the subdomain will redirect
      • The 301! at the end is the status code given to your browser.
        • Status 301 is Moved Permanently (for permanent redirections).
        • You can also use 307! instead if you’re only redirecting the subdomain temporarily
    • Make another file in the same folder called index.html
      • You can leave this blank
  4. Go back to Netlify

    • In the Sites tab on the right, click Add new site and Deploy Manually from the dropdown

    • Drag-and-drop the folder containing the two new files into the next screen

    • After it’s been uploaded, go to the Domain management tab on the left hand side

    • Click on and enter your desired subdomain that you set in the _redirects file earlier

    • Then click

  5. That’s it!

You might have to wait up to 24 hours for things to start working, since updating a domain’s DNS records (Step 2) can take some time to propagate.

Otherwise, you should have a working redirect to any page on any site from your subdomain.

You can add multiple subdomain and redirects by adding new lines in Step 3. Though you can’t redirect the same subdomain to multiple destinations.

Check out the subdomain redirect I made following this process while writing: https://resume.zeinhajjali.com