DEV Community

Cover image for 🏡 How I Turned My Old Laptop into a Web Server to Host My Portfolio Website
Mai Chi Bao
Mai Chi Bao

Posted on

🏡 How I Turned My Old Laptop into a Web Server to Host My Portfolio Website

Ever thought of hosting your own website from the comfort of your own home—on a machine you already own? In this post, I’ll walk you through how I transformed my old laptop into a fully functional web server and used it to host my personal portfolio: mrzaizai2k.xyz.

This is my website:

Website Preview

This isn’t just a guide—it’s also a story. Whether you're trying to save money, repurpose old gear, or just learn something cool, you’ll find something valuable here.


📚 Table of Contents


Why I Chose to Self Host

A while ago, I found myself with an old laptop that nobody wanted to buy at a fair price. The resale value? A joke. But giving it away felt wasteful. So instead, I decided to turn it into something useful.

This is my laptop:

My Old Laptop

That little spark of curiosity turned into a full-blown DIY web hosting setup. And now, that same machine proudly serves my personal site: mrzaizai2k.xyz.


What You'll Learn

By the end of this post, you’ll know how to:

✅ Build and run a portfolio website with React & Node

✅ Use Docker to containerize and simplify deployments

✅ Host it on your own machine securely using Cloudflare Tunnel

✅ Track visitors with Google Analytics

✅ Save money and learn valuable devops skills


Tech Stack

  • React.js – Frontend framework
  • Node.js – Backend JS runtime
  • CSS3 – Styling
  • Docker – Containers for easy deployment
  • Nginx – Reverse proxy & lightweight protection
  • Cloudflare Tunnel – Secure external access

Initial Setup

Start by cloning the repo and installing dependencies:

 git clone https://github.com/mrzaizai2k/Portfolio.git cd Portfolio cd frontend npm install cd .. 
Enter fullscreen mode Exit fullscreen mode

Then, set up your .env file with your Google Analytics Measurement ID:

 REACT_APP_GA4_MEASUREMENT_ID=G-XXXXXX 
Enter fullscreen mode Exit fullscreen mode

Containerize It with Docker

Docker makes things fast, repeatable, and clean.

Start your app:

 docker-compose up -d 
Enter fullscreen mode Exit fullscreen mode

Visit: http://localhost:80

Stop the server:

 docker-compose down 
Enter fullscreen mode Exit fullscreen mode

✨ Bonus: Live updates are supported thanks to volume mounts!


Open to the World: Cloudflare Tunnel vs. Port Forwarding

At this point, your site works locally—but how do you show it to the world?

You might think of opening a port on your router (port forwarding), but that’s not always practical.

My Thought Process

I first considered the usual router method. But here’s the thing:

  • 🏠 Not all ISPs allow port forwarding (especially CG-NAT networks).
  • 🧳 What if I move or switch networks? I’d have to reconfigure everything.
  • 🛑 Security concerns—open ports are always a risk.

So instead, I used Cloudflare Tunnel. It creates an encrypted tunnel from your machine to the internet—no port configuration required.

🔍 Comparison Table

Feature Port Forwarding Cloudflare Tunnel
🔐 Security Exposes open ports (less secure) Encrypted, Cloudflare-protected
🌐 ISP Compatibility Not always allowed (CG-NAT issues) Works with any ISP
🛠 Router Access Requires router login No router access needed
🚚 Flexibility (Change WiFi) Needs reconfiguration Works anywhere, instantly
🌍 DNS Routing Manual setup Auto-managed with cloudflared

Winner: Cloudflare Tunnel—secure, flexible, and dead-simple to set up.

Setup Instructions

Install & auth:

 chmod +x cloudflare/install_cloudflared.sh ./cloudflare/install_cloudflared.sh cloudflared tunnel login 
Enter fullscreen mode Exit fullscreen mode

Create a tunnel:

 cloudflared tunnel create <Tunnel-NAME> 
Enter fullscreen mode Exit fullscreen mode

Configure it:

 # config.yml tunnel: <Tunnel-UUID> credentials-file: /root/.cloudflared/<Tunnel-UUID>.json ingress: - hostname: mrzaizai2k.xyz service: http://localhost:80 originRequest: noTLSVerify: true - service: http_status:404 
Enter fullscreen mode Exit fullscreen mode

Start and bind DNS:

To run the tunnel in the background, I installed Cloudflared service and started using following command.

 cloudflared tunnel route dns <Tunnel-NAME> mrzaizai2k.xyz cloudflared service install systemctl start cloudflared 
Enter fullscreen mode Exit fullscreen mode

And that’s it—your local machine is now live to the world! 💥


Analytics Integration

Want to know who’s visiting your site?

  1. Create a Google Analytics account
  2. Set up a new property and web stream
  3. Grab your Measurement ID
  4. Paste it into your .env:
 REACT_APP_GA4_MEASUREMENT_ID=G-XXXXXX 
Enter fullscreen mode Exit fullscreen mode

Here’s what mine looks like:

Google Analytics

And don’t forget—Cloudflare gives you real-time traffic insights too:

Cloudflare Analytics

What’s Next: SEO Optimization

You’ve built and launched your site, but can people find it?

I’ll be diving deep into SEO optimization in my next post—where I’ll show you how I achieved loading scores like this:

Lighthouse SEO Score

Want your portfolio to rank higher on Google? Curious how to speed up your site and get that sweet, sweet organic traffic?

🔮 I’ll be revealing all the secrets soon—meta tags, schema markup, speed hacks, and more.
👉 Make sure to follow me so you don’t miss that post!

If you found this story helpful or inspiring:

💬 Like, Comment, and Share this post
🌟 Star the GitHub repo: mrzaizai2k/Portfolio
🌐 Visit my live site: mrzaizai2k.xyz


References

Top comments (18)

Collapse
 
k_mast_b46d91c978da7 profile image
Ken Mast • Edited

I'm new here. As a blue-collar worker considering a transition into the networking and security field, I enjoy the thought experiments and real-world experiments surrounding self-hosted vs. cloud-based solutions. I looked into Helm a few years ago, after hearing it advertised on the Security Now podcast, thinking it might be the right solution. I gave that idea up for two reasons. First of all, it relies on AWS for all the Domain Name magic. Secondly, every time my rural ISP hiccups, my email server would be offline. So, for me, rather than increasing my reliability, I would be introducing two more points of failure. I assume that, on top of that, I'd have to keep a current account with Helm. I just learned as I was typing this that Helm is no longer in business, which reminds me that, while I'm relying on AWS, my ISP, and my own hardware and the power to run it, I would also have had to figure something else out when Helm closed its doors. What would be some options for more critical, but relatively small-scale systems? What methods are there for having a local server that fails over to the cloud when local goes down, or fails to local when the connection goes down? I know this becomes less and less of a concern as internet connections become more and more reliable, but for someone who works with small businesses with multiple rural locations, there is still a use case for systems like this. Maybe this is too general of a question...

Collapse
 
mrzaizai2k profile image
Mai Chi Bao

For smart routing, check out Cloudflare Load Balancing. It lets you route traffic between your local and cloud servers based on real-time health checks. If the cloud goes down, it can automatically fail over to your local server (via Cloudflare Tunnel), and vice versa.
Links: youtube.com/watch?v=yjD136piimk
oxabox.co.uk/how-to-configure-clou...

Collapse
 
mrzaizai2k profile image
Mai Chi Bao

Hmm, great question. I will check if there is some solution for you later. Thanks a lot

Collapse
 
nevodavid profile image
Nevo David

Pretty cool seeing someone actually flip their old laptop into something real. Always gets me thinking how much stuff you can do if you just mess around a bit.

Collapse
 
mrzaizai2k profile image
Mai Chi Bao

Totallu get you! That feeling of "wait, I can actually do this from home?" hit me hard too 😄🧠
If there's a topic you'd love to dive deeper into — maybe AI models, home drive, or backups — just say the word! I’d be happy to cover it.

Collapse
 
meenakshi052003 profile image
Meenakshi Agarwal

The idea itself is interesting and can make anyone curious. But its sustainability and long-term maintenance are questionable. Otherwise, each one of us would be running a dev.to of our own. :)

Collapse
 
mrzaizai2k profile image
Mai Chi Bao

Totally get your point — keeping a machine on 24/7, managing uptime, updates, power bills… it’s definitely not as smooth as using a third-party service ☁️⚙️

But that’s what makes it fun, right? 🤓 Don’t you ever wonder how those big platforms keep things running so reliably? That curiosity might just be the spark to reverse-engineer some of it 🔍💡

Oh wow — you just gave me an idea for the next post: “How do you actually maintain a self-hosted app long-term?” Stay tuned! 😄

Collapse
 
meenakshi052003 profile image
Meenakshi Agarwal

Absolutely agree with your point in the second paragraph — a good developer who's naturally curious will always want to know what's happening behind the scenes.

Looking forward to seeing what your next post uncovers. I'm sure it'll be something even more interesting. All the best!

Thread Thread
 
mrzaizai2k profile image
Mai Chi Bao

Thanks a lot

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

pretty cool using old gear like that honestly makes me wonder what’s the main reason most people never try self-hosting at home

Collapse
 
mrzaizai2k profile image
Mai Chi Bao

Yah. I think its because hosting on cloud might be more convenience. However, self host is cool. We can learn alot form it. Way different that hosting on cloud

Collapse
 
javascriptwizzard profile image
Pradeep

Great post! Would love to know more on SEO. Thanks for sharing!

Collapse
 
mrzaizai2k profile image
Mai Chi Bao

Thank you, I will write another post about SEO improvement, stay tuned!

Collapse
 
auyeungdavid_2847435260 profile image
David Au Yeung

And I wonder what new laptop you bought?😆

Collapse
 
mrzaizai2k profile image
Mai Chi Bao

Actually I'm using samsung tab s8 instead of a laptop. I decided not using laptop anymore since using that tablet. When I need, I can remote to use my PC at home

Collapse
 
dev_nazwashabrina profile image
Nazwa Shabrina Zain

Thank you very much I now know that there is home hosting with this guide will help me learn.

Collapse
 
mrzaizai2k profile image
Mai Chi Bao

So glad to hear that! 🙌 Let me know if there's anything you'd like to dive deeper into! 🧠💬

Collapse
 
mrzaizai2k profile image
Mai Chi Bao

If I wanted to host multiple projects on the same machine, would I need a different tunnel for each domain? 🤔