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!
Top comments (7)
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.
Incredible
This is exactly what I've been looking to do recently as I just redid my personal site. Thanks!