DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Stephen Chiang
Stephen Chiang

Posted on • Updated on

๐ŸŒ 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!

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 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
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 Author

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!

๐ŸŒš Turn on dark mode

๐Ÿ”  Change your default font

๐Ÿ“š Adjust your experience level to see more relevant content

Head to your account's Settings to do all this and more.