DEV Community

Stephen Chiang
Stephen Chiang

Posted on โ€ข Edited on

45 10

๐ŸŒ How I host my projects on subdomains

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
Enter fullscreen mode Exit fullscreen mode

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!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Googleโ€™s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (7)

Collapse
 
supunkavinda profile image
Supun Kavinda โ€ข

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

Collapse
 
chiangs profile image
Stephen Chiang โ€ข

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
Supun Kavinda โ€ข

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
Stephen Chiang โ€ข

agreed!

Collapse
 
09wattry profile image
Ryan โ€ข

I used another free service called opeNode they offer a really easy cli and ui. Deploying with Docker and what looks to be kubernetes under the hood then hosted at github and the domain through porkbun.

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!

๐Ÿ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay