Niraj Maharjan

Posted on Apr 12

How to Get a Free .np Domain and Host Your Developer Portfolio

#npdomain #portfolio #dnssetup

So I finally did it. My portfolio is live, not on some generic .github.io subdomain, but on my own .np domain. Sounds cool, right? It was. But getting there? That was a whole journey. Let me walk you through exactly what I did, where I got stuck, and how you can do it without repeating my mistakes.

Why I Wanted This in the First Place

Every developer eventually wants their own corner of the internet. A portfolio that screams you. I wanted mine to have a personal domain .np because I'm from Nepal and its free of cost. But I also wanted it interactive, modern, with 3D elements. So the stack I chose was Vite + Spline for the frontend.

Simple goal. Not-so-simple execution.

Step 1: Registering My .np Domain

Before writing a single line of code, I went ahead and locked in my domain.

In Nepal, .np domains are managed by Mercantile Communications. Here's the quick rundown:

Go to register.com.np
Check if your desired domain is available
Submit the required documents (citizenship, organization letter if needed)
Wait for approval — this isn't instant like .com

⚠️ Heads up: .np registration is free but it involves a manual review process. It took me a couple of days. Plan accordingly.

Once approved, I had my domain. Now came the real work.

Step 2: Building the Portfolio Site

I built my site using Vite (for fast dev experience) and Spline (for 3D interactive objects).

npm create vite@latest portfolio -- --template react
cd portfolio
npm install

For Spline, I used their React runtime:

npm install @splinetool/react-spline @splinetool/runtime

The Spline objects are embedded directly as components. Super clean.

Step 3: Deploying to GitHub Pages

Since Vite doesn't produce a traditional static site out of the box for GitHub Pages, I needed the gh-pages package.

npm install gh-pages --save-dev

Then I added two scripts in my package.json:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

predeploy runs the build automatically before deploy kicks in. Clean.

Then I pushed my code to GitHub, went to my repo → Settings → Pages, and set the source to the gh-pages branch.

Ran npm run deploy and... it was live on https://yourusername.github.io/portfolio.

The Problem I Hit (And How I Fixed It)

Here's where things got frustrating.

My site was loading but all the assets — images, JS, CSS — were broken. Blank screen, console full of 404s.

The issue? Vite's base path.

When your site is hosted at yourusername.github.io/portfolio, Vite needs to know the base path is /portfolio/. But when it's on your custom domain (root of the domain), the base needs to be /.

I couldn't just hardcode one or the other. So I wrote a condition in vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

onst isGithubPages = process.env.GITHUB === "true";

export default defineConfig(({ mode }) => ({
  plugins: [react()],
  base: isGithubPages ? "/portfolio/" : "/",
})

Then in my deploy script (or CI), I just set GITHUB=true when building for the github domain. Problem solved. No more broken paths.

💡 This is one of those things nobody tells you upfront. If your GitHub Pages site looks broken, check your base in vite.config.js first.

Step 4: Setting Up DNS with Cloudflare

With the site working on GitHub Pages, it was time to point my .np domain to it.

I chose Cloudflare for DNS management — it's free, fast, and has a clean interface.

Here's what I did:

1. Create a Cloudflare account and add your domain.

2. Add DNS records pointing to GitHub Pages. GitHub requires 4 A records and 1 CNAME:

Type	Name	Value
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153
CNAME	www	yourusername.github.io

3. Cloudflare gives you two nameservers — something like:

aria.ns.cloudflare.com
bob.ns.cloudflare.com

4. Go back to your .np domain registration panel → find the Edit DNS / Nameserver option → replace the existing nameservers with the two Cloudflare ones.

Then… you wait.

In my case it took about 2 hours for the domain to go active. Some people say it can take up to 48 hours — mine was luckily on the faster end.

Step 5: Connecting the Custom Domain to GitHub

Once DNS was propagating, I went back to my GitHub repo:

Settings → Pages → Custom Domain

I entered my .np domain, saved it, and GitHub automatically verified it and enabled HTTPS via Let's Encrypt.

After the DNS fully kicked in — boom. My portfolio was live on my own .np domain.

The Full Flow at a Glance

Register .np domain
      ↓
Build site with Vite + Spline
      ↓
Add gh-pages, write predeploy + deploy scripts
      ↓
Fix vite.config.js base path logic
      ↓
Deploy to GitHub Pages
      ↓
Set up Cloudflare DNS (4 A records + 1 CNAME)
      ↓
Update nameservers on .np registrar
      ↓
Add custom domain in GitHub repo settings
      ↓
Wait ~2 hours → Live

What I'd Tell My Past Self

Register the domain first. .np takes time to approve. Don't build everything and then wait.
The base path issue in Vite will catch you off guard. Handle it early.
Cloudflare is your friend. Free, reliable, and the dashboard is easy to navigate.
DNS propagation is not instant. Grab a coffee. Don't keep refreshing dig every 30 seconds (I definitely didn't do this).

Final Thoughts

Hosting my own portfolio on a .np domain felt unnecessarily complicated at first. But once you understand each piece — domain registration, GitHub Pages, Vite's config, Cloudflare DNS — it actually makes a lot of sense.

If you're a developer from Nepal and you've been putting this off, this is your sign. The .np domain is free, GitHub Pages is free, Cloudflare is free. The only cost is a couple of hours of your time.

Go build something worth linking to.

DEV Community