How to Create Custom Subdomains on Vercel, Heroku and Netlify

How to Create Custom Subdomains on Vercel, Heroku and Netlify

Introduction

After you finish building a project, you'd usually want to take it out of your localhost and put it somewhere else where you or others can access it as well. The next point of call would be to deploy the project to any of the several cloud hosting platforms available.

Some of these hosting platforms even give you free hosting and if you are like virtually every other developer, chances are that's what you'd be opting for. Of course, what you get is a subdomain and limited resources—but that is often more than enough for most stuff you'd be building. You're usually able to set the subdomain name from which your project will be accessed at the point of deployment. But, as it happens sometimes, your preferred subdomain may already be taken (or maybe you're just in a hurry) and you may opt for an auto-generated subdomain name which you can change later on if you wish.

However, after coming across several sizable projects (and even a personal portfolio site!) with auto-generated subdomains of the "notorious-badlands-47642.hostingplatform.app" kind, it became clear to me many either don't know they can customize their projects' subdomain names or just don't know how to. And that was why I set out to write this article. Picking three among the top cloud hosting platforms used by developers, I'd be showing you how to do just that.

Vercel

1) Log in and click on the project whose subdomain name you want to change

chrome_gR7nry6pf6.png

2) After it opens up, go to the settings page and click on "Domains"

chrome_BBq2nylqXB.png

3) Click on the "Edit" button on the particular domain you want to change

chrome_DPYQdxSuIj.png

4) Edit it and click on "Save" after you are done

chrome_TEDfi57UGe.png

5) That's it! Your new Vercel subdomain is ready.

chrome_OZWHvvcT39.png

Heroku

1) Log in and click on the project whose subdomain name you wish to change

chrome_agZCo1fhdI.png

2) After it opens up, click on "Settings"

image.png

3) Change the text in the "App name" input field to your preferred subdomain name and click on "Save"

image.png

4) Done and dusted! Your new Heroku subdomain name is set.

chrome_xq8YLvDga0.png

Netlify

1) Log in and click on the project whose subdomain name you want to change

chrome_VvLPxA9lyL.png

2) After it opens up, click on "Domain settings"

chrome_FZPtIC48bV.png

3) Under "Custom domains", click on "Options", then on "Edit site name"

chrome_FkfciMZhGs.png

4) Input your preferred subdomain name and click on "Save"

chrome_4aoZVF1GHf.png

5) Just like that—you've got a new Netlify subdomain name!

image.png

Conclusion

Whatever it is you're building, presentation is always essential. Whether your side project or your portfolio site, the domain name is the first point of contact for all who will behold whatever you've built. Random strings spat out by an algorithm do not make for a presentable domain name.

Hopefully, with all the info in this article, your "notorious-badlands-47642" days are over! 😉