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
- A domain name that you have control over.
- I look through TLD-List to find a domain for the cheapest price.
- The site lists the prices of your chosen domain and sorts them by cheapest registration/3-Year value
- I look through TLD-List to find a domain for the cheapest price.
- A free-tier Netlify account.
- You’ll be using their DNS service to manage the subdomains and their redirects
- Optionally: a free-tier GitHub account
- I use GitHub as my remote repository for personal projects.
- You can use it for version management of your site or config files
- Alternatively, you can directly upload the file we’re making to Netlify and make changes by hand every time you need to
- If you only have a small set of redirects that won’t change often, or you just don’t want to learn git, this will work fine
- This is the way I’ll be demonstrating
Steps
Log into your Netlify account
Find the Domains tab on the left hand side
Click on
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
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
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
- Note that the filename doesn’t have an extension like
- Edit the file to redirect your chosen subdomain to your chosen site
- I’m going to redirect the
resume
subdomain ofzeinhajjali.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
- I’m going to redirect the
- Make another file in the same folder called
index.html
- You can leave this blank
- In an empty folder, make a new text file and save it as
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 earlierThen click
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