R Rebeauty Atlas +8,015 today
← Back to list

From Zero to bishalbudhathoki.is-a.dev:

Introduction: Why Every Developer Needs Their Own Corner of the Internet

Bishal Budhathoki · 2025-12-20 12:01 · 0 claps · 6.5 min read
#subdomain #custom-domain #always-free #firebase
Open on Medium ↗

From Zero to bishalbudhathoki.is-a.dev: Building and Deploying a Portfolio with Firebase and is-a.dev

Introduction: Why Every Developer Needs Their Own Corner of the Internet

In today’s digital landscape, your online presence is often the first impression you make on potential employers, collaborators, or clients. While LinkedIn profiles and GitHub repositories are essential, there’s something uniquely powerful about having your own domain — a personal space on the internet that’s entirely yours.

When I decided to create my portfolio website, I had three non-negotiable requirements:

  1. Professional domain name — Not just another generic hosting subdomain
  2. Zero hosting costs — I’m a developer, not a bank
  3. Complete creative control — My design, my content, my rules

This is the story of how I built [*bishalbudhathoki.is-a.dev](https://bishalbudhathoki.is-a.dev)*— a professional portfolio website deployed on Firebase Hosting with a custom subdomain, all without spending a single dollar.

The Tech Stack: Choosing the Right Tools

Before diving into code, I carefully selected my technology stack:

Image sourced from https://is-a.dev/

Image sourced from https://is-a.dev/

Core Technologies

  • Firebase Hosting: Google’s powerful, free hosting solution with global CDN, automatic SSL, and instant deploys
  • is-a.dev: A community-driven free DNS service specifically for developers
  • Vanilla HTML/CSS/JavaScript: No frameworks, no dependencies, just pure web fundamentals
  • Iconify: Beautiful, customizable SVG icons for a polished look
  • Firebase CLI: Command-line tools for seamless deployment

Why These Choices?

Firebase Hosting was a no-brainer. It offers:

  • Generous free tier (10GB storage, 360MB/day data transfer)
  • Automatic SSL certificates
  • Global CDN for lightning-fast load times
  • One-command deployments
  • Custom domain support

is-a.dev solved the domain problem elegantly. Instead of paying $10–15 annually for a .dev domain, I could get a professional-looking subdomain completely free. The trade-off? It's community-managed through GitHub pull requests, which actually became a feature rather than a bug—it encouraged me to build something worthy of approval.

Phase 1: Setting Up the Foundation

Project Structure

I started with a clean, organized project structure:

portfolio-project/
├── public/              # Website files
│   ├── index.html
│   ├── profile.png
├── domains/             # DNS configuration
│   └── bishalbudhathoki.json
├── firebase.json        # Firebase configuration
└── .firebaserc         # Firebase project settings

Firebase Project Initialization

The setup process began with installing Firebase tools:

npm install -g firebase-tools
firebase login

The login process opened my browser and connected the CLI to my Google account. Simple and secure.

Next came project initialization:

firebase init hosting

This interactive wizard asked me several questions:

  • Select a Firebase project: I created a new one named bishalbudhathokiisadev
  • Public directory: Set to public
  • Single-page app: No (I wanted proper routing)
  • Automatic builds: No (manual control for now)

The First Pitfall: Directory Structure Matters

Here’s where I made my first mistake. I accidentally ran firebase init from inside the public directory instead of the project root. This placed firebase.json and .firebaserc in the wrong location, causing Firebase to deploy its default landing page instead of my beautiful portfolio.

The fix was straightforward but taught me an important lesson: Always double-check your working directory before running initialization commands. I moved the configuration files to the project root and updated the paths:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

After correcting this, firebase deploy worked perfectly.

Phase 2: Building the Portfolio (Three Iterations)

Iteration 1: Hello World (The Reality Check)

My first deployment was embarrassingly simple:

<!DOCTYPE html>
<html>
<head>
    <title>Bishal Budhathoki</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

I deployed this with confidence, ready to submit my is-a.dev pull request. Then I actually read their requirements: "Your website must be a completed website, not just a placeholder."

Reality check received.

Iteration 2: The Professional Pivot

I realized I needed to build something substantial. I pulled my professional information from LinkedIn and created a proper portfolio structure:

Key Sections:

  • Professional headline and summary
  • Technical expertise showcase
  • Work experience timeline
  • Education background
  • Contact information

Design Philosophy:

  • Clean, minimal aesthetic
  • Mobile-responsive layout
  • Fast load times (no heavy frameworks)
  • Accessibility-first approach

The CSS became more sophisticated:

:root {
    --primary-color: #2c3e50;
    --accent-color: #3498db;
    --text-color: #333;
    --bg-color: #f8f9fa;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

Iteration 3: The Final Design

The breakthrough came when I decided to add custom SVG icons for each technology in my skill set. Instead of generic placeholder icons, I sourced high-quality SVGs that accurately represented each tool:

  • Languages: JavaScript, HTML, CSS
  • Cloud: Firebase
  • Tools: VS Code

These SVGs were embedded directly in the HTML to eliminate external dependencies and improve load times. The result was a portfolio that felt polished and professional.

Phase 3: DNS Configuration with is-a.dev

Understanding the Process

The is-a.dev service uses GitHub for DNS management. Every subdomain is represented by a JSON file in their repository. To get your subdomain, you:

  1. Fork their register repository
  2. Add your DNS configuration file
  3. Submit a pull request
  4. Wait for community review and approval

Creating the DNS Configuration

I created domains/bishalbudhathoki.json:

{
  "owner": {
    "username": "your_name",
    "email": "your_subdomain_name@example.com"
  },
  "record": {
    "CNAME": "your_project_name.web.app"
  }
}

The CNAME record pointed to my Firebase hosting URL, which I obtained from my first deployment.

The Pull Request

I submitted my pull request with:

  • Clear title: “Add bishalbudhathoki.is-a.dev”
  • Description: Brief explanation of my portfolio
  • Validation: Confirmed my site was live and complete

The waiting game began. The is-a.dev maintainers review submissions to ensure quality and prevent abuse. This typically takes 1-3 days.

Phase 4: The Challenges I Faced

Challenge 1: Firebase Configuration Confusion

Problem: My site wouldn’t deploy correctly because Firebase was looking in the wrong directory.

Solution: I learned to always verify the firebase.json configuration and test deployments with the --debug flag:

firebase deploy --debug

This revealed exactly what Firebase was trying to deploy and where it was looking for files.

Challenge 2: Content Quality Standards

Problem: My initial “Hello World” page was rejected conceptually before I even submitted it (I caught this by reading the requirements carefully).

Solution: I embraced the constraint. Building a complete portfolio forced me to think about personal branding and professional presentation. The result was far better than what I initially planned.

Challenge 3: Icon Quality and Consistency

Problem: Generic icons didn’t accurately represent the technologies I use, and inconsistent sizing made the page look unprofessional.

Solution: I curated specific SVG icons for each technology, normalized their viewBox dimensions, and embedded them directly:

<div class="tech-item">
    <svg viewBox="0 0 128 128" class="tech-icon">
        <!-- Custom SVG path data -->
    </svg>
    <span>JavaScript</span>
</div>

Challenge 4: Mobile Responsiveness

Problem: My desktop-first design broke on mobile devices.

Solution: Implemented proper responsive design with media queries:

@media (max-width: 768px) {
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-timeline {
        padding-left: 20px;
    }
}

Phase 5: Deployment and Going Live

The Deployment Command

Once everything was ready, deployment was refreshingly simple:

firebase deploy

This command:

  1. Built and optimized my site
  2. Uploaded it to Firebase’s global CDN
  3. Provided deployment URLs
  4. Configured SSL certificates automatically

The entire process took less than 30 seconds.

Adding the Custom Domain

After my pull request was merged (it took 2 days), I added the custom domain in Firebase:

  1. Navigate to Firebase Console → Hosting → Add custom domain
  2. Enter bishalbudhathoki.is-a.dev
  3. Firebase automatically verified the DNS configuration
  4. SSL certificate provisioned within minutes

And just like that, my portfolio was live at a professional domain.

The Results: Performance Metrics

Load Time Performance

  • First Contentful Paint: 0.8s
  • Time to Interactive: 1.2s
  • Total Page Size: 45KB (including SVGs)
  • Lighthouse Score: 98/100

Why It’s So Fast

  • No external dependencies or frameworks
  • Inline SVGs eliminate HTTP requests
  • Firebase CDN serves content from edge locations
  • Aggressive browser caching
  • Minified HTML/CSS

Lessons Learned

1. Simplicity Scales

I initially considered using React or Vue for this project. I’m glad I didn’t. The entire site is under 500 lines of code, loads instantly, and requires zero build tools. Sometimes the simplest solution is the best solution.

2. Free ≠ Low Quality

Between Firebase’s generous free tier and is-a.dev’s community service, I built a professional portfolio with enterprise-grade infrastructure without spending a cent. The constraint of “free” forced me to be creative and efficient.

3. Community Matters

The is-a.dev approval process isn't just gatekeeping—it's quality control. Knowing someone would review my work motivated me to build something I'm proud of. Community accountability breeds excellence.

4. Documentation Is Your Friend

Keeping detailed notes throughout the process made troubleshooting easier and enabled me to write this blog post. Document your journey; your future self will thank you.

5. Constraints Spark Creativity

Having to meet is-a.dev's standards transformed a lazy "Hello World" page into a portfolio I'm genuinely proud of. Embrace constraints—they often lead to better outcomes than unlimited freedom.

Conclusion: Your Turn

Building [*bishalbudhathoki.is-a.dev](https://bishalbudhathoki.is-a.dev)* taught me that you don't need expensive tools or complex infrastructure to establish a professional online presence. You need:

  1. Clear vision of what you want to communicate
  2. Commitment to quality over shortcuts
  3. Willingness to iterate and improve
  4. Patience with the approval process

The tools are all free. The knowledge is freely available. The only investment required is your time and effort.

If you’re a developer without a personal portfolio, I challenge you to build one this weekend. Fork this process, make it your own, and claim your piece of the internet.

Your domain is waiting. What are you building?

Resources

About the Author: Bishal Budhathoki is a software developer passionate about AI agents, cloud infrastructure, and building tools that make developers’ lives easier. Recently completed the 5-Day AI Agents Intensive Course with Google from Kaggle. Connect with me on LinkedIn or check out my work on GitHub.

Have questions about the process? Want to share your own portfolio journey? Drop a comment below — I’d love to hear from you!

메타데이터
post_id
9537647c8ea6
slug
from-zero-to-bishalbudhathoki-is-a-dev-9537647c8ea6
url
https://medium.com/@bishalkc331/from-zero-to-bishalbudhathoki-is-a-dev-9537647c8ea6
canonical_url
https://medium.com/@bishalkc331/from-zero-to-bishalbudhathoki-is-a-dev-9537647c8ea6
author_url
https://medium.com/@bishalkc331
status
ok
fetched_at
2026-07-11 06:17:06