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?
- Doesn't bloat the main site's repo.
- It's more flexible so that my projects can be different technology stacks.
The steps
Main site
Setup
- Create a personal site.
- Create a repo on GitHub for it.
- Push it to the repo.
Deployment
- On Netlify, I select the repo and master branch for my main site.
- After it is successfully built and deployed, I have a someWeirdString.netlify.com that points to my deployed project.
- I'll rename it to something more easy such as
myPortfolio.netlify.com
- I setup the custom URL if I don't already have one at Porkbun.
- Specify my custom URL such as www.myPortfolio.com.
DNS Settings
- Login to Porkbun and select my custom URL details.
- 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 |
- 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
.
- Just like in the first previous steps, I add the project to Netlify and have it build and deploy.
- I'll update the Netlify subdomain to
project.netlify.com
. - 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!
Oldest comments (7)
This is exactly what I've been looking to do recently as I just redid my personal site. Thanks!
Incredible
Nice article! Is there any reason for choosing Porkbun over cloudflare?
I don't have any experience with cloudflare. But I can say I really enjoy how easy everything is at porkbun.
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.
agreed!
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.