I wrote a separate article called Organize Your Side Projects with a Single Domain that explains what a side project domain is, and why you should use one.
I highly recommend you read that article first, as this post was originally meant to be just a quick walkthrough at the end of that article, but I decided to separate it into it's own post to keep things short and to the point.
How to Setup a Side Project Domain with Route53 and Heroku.
I chose to use Route53 and Heroku in this article because I think they are two of the most popular and easy to use solutions out there, however, even if you use two totally different services, it should be easy enough to follow along and figure out what the minor differences are.
Step #1
Choose a side project domain
Try to keep it short.
I like the idea of using a ‘username’ style for your side project domain, something you might use on Github or Stack (maybe even something you did use on Github or Stack.)
I went with jhadik307.com
Step #2
Purchase the domain on Route 53
You don’t have to use Route 53. I chose it because it’s really easy to use, and because I use AWS a lot so it’s nice to have everything consolidated in one place. If you choose to use something else, the steps will be a little different, but it should still be easy enough to figure out.
Assuming you're using Route 53, and you already you have an AWS account setup, visit the Route 53 home page. Once there, type your new domain name under the Register domain section and check if it’s available!
Once you find an available domain, click 'Add to Cart' and follow along with the checkout process to purchase your brand new side project domain!
Step #3
Come up with a subdomain for your project.
One of the best parts about using a side project domain is that none of the subdomains will be taken! This means you can use whatever subdomain you want, most likely just the name of your project.
I'll be using 'somethingsupercoolijustmade' for mine, but you can feel free to use the name of one of your existing side projects, or to use whatever else you want to as a subdomain!
Step #4
Add the full domain to your Heroku app
Visit your existing Heroku project or start a new one, then go to the settings tab for your project and find the section ‘Domains and Certificates.’ Once there press 'add domain' and type in the full domain name for your side project (with the subdomain included.)
Step #5
Copy the DNS Target.
Copy the text found in the DNS Target for your new domain on Heroku (as seen highlighted below.)
Step #6
Setup subdomain on Route 53
Go to the hosted zones section for your new domain on Route 53 and click ‘Create Record Set.’
Enter the subdomain in the ’name’ field, choose CNAME as the type, and paste the DNS target in as the value.
Note - never copy the protocol (http / https) at the beginning of the domain into the cname value box
Once your done, click create.
Step #7
Visit your new site!
Thanks for reading
I hope you enjoyed this article! Feel free to ask any questions or leave your feedback in the comments below!
Top comments (8)
Thanks for the heads up, I have successfully implemented one here yeepkamp.techam.org, but when I visit yeepkamp.herokuapp.com it still works. Is there a way to redirect from the herokuapp to this new DNS?
The Heroku docs say you need to register both the custom root domain and the subdomain, but when I try to do this it says :
is not permitted as it conflicts with other records with the same DNS name in zonedevcenter.heroku.com/articles/cust...
I'm a bit confused as the root domain goes to my marketing site.
Do you have any thoughts on this?
I didn't know it would be that easy. Thank you for this @joshhadik
Can you do something like this for DigitalOcean too ?
I haven't actually worked with DigitalOcean before, but it's been on my list of things to learn... maybe this would a good reason!
I'll let you know if I write something up!
Great recommendation! Thanks!
Anytime!
Great job. Simplified operations for me!
Awesome! Glad I could help