loading...

๐ŸŒ How I host my projects on subdomains

chiangs profile image Stephen E. Chiang ใƒปUpdated on ใƒป2 min read

I like hosting my projects on subdomains and keep my main site focused on being the portal to my portfolio. Here's how I do it using Netlify and Porkbun.

What is a subdomain?

A subdomain is a domain that is part of a larger domain; the only domain that is not also a subdomain is the root domain.

๐Ÿ“Example:

root domain: www.mainSite.com

subdomain: someUrl.mainSite.com

Why host projects on subdomains?

  1. Doesn't bloat the main site's repo.
  2. It's more flexible so that my projects can be different technology stacks.

The steps

Main site

Setup

  1. Create a personal site.
  2. Create a repo on GitHub for it.
  3. Push it to the repo.

Deployment

  1. On Netlify, I select the repo and master branch for my main site.
  2. After it is successfully built and deployed, I have a someWeirdString.netlify.com that points to my deployed project.
  3. I'll rename it to something more easy such as myPortfolio.netlify.com
  4. I setup the custom URL if I don't already have one at Porkbun.
  5. Specify my custom URL such as www.myPortfolio.com.

DNS Settings

  1. Login to Porkbun and select my custom URL details.
  2. In the records, I update the ALIAS record that answers to my Netlify subdomain, which is myPortfolio.netlify.com.

It should look something like this:

TYPE HOST ANSWER
ALIAS myPortfolio.com www CNAME myPorfolio.netlify.com
  1. After it propagates I move on to the next step and provision a SSL certificate.

Add a subdomain

Once my main site is up and running with www.myPortfolio.com working, I'll setup another project from another repo to be found at project.myPortfolio.com.

  1. Just like in the first previous steps, I add the project to Netlify and have it build and deploy.
  2. I'll update the Netlify subdomain to project.netlify.com.
  3. Then I go back to Porkbun and add another CNAME record to www.myPortfolio.com, it will look like this:
TYPE HOST ANSWER
ALIAS myPortfolio.com www CNAME myPorfolio.netlify.com
CNAME project.myPortfolio.com project.netlify.com

That's it! Now whenever I navigate to project.myPortfolio.com I'll go to my project which is auto deployed every time that project master branch is updated.

โ— Don't forget to add an escape hatch like a navigation icon that takes the user back to the main site and/or go another project...that's just good UX.

If you find this valuable, please leave a comment and follow me on Dev.to @chiangs and Twitter @chiangse, ๐Ÿป cheers!

Discussion

pic
Editor guide
Collapse
supunkavinda profile image
01010011 01110101 01110000

Nice article! Is there any reason for choosing Porkbun over cloudflare?

Collapse
chiangs profile image
Stephen E. Chiang Author

I don't have any experience with cloudflare. But I can say I really enjoy how easy everything is at porkbun.

Collapse
supunkavinda profile image
01010011 01110101 01110000

I first heard about Porkbun in this article, and WHOIS privacy and Free SSL are the features that took my mind. And, domains are very cheap.

Thread Thread
chiangs profile image
Collapse
markel profile image
Markel F.

Incredible

Collapse
darkes profile image
Victor Darkes

This is exactly what I've been looking to do recently as I just redid my personal site. Thanks!