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:
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
- 🎓 What You’ll Learn
- 🛠 Tech Stack
- 🚀 Initial Setup
- 🐳 Containerize It with Docker
- 🌍 Open to the World: Cloudflare Tunnel vs. Port Forwarding
- 📈 Analytics Integration
- 📈 What’s Next: SEO Optimization
- 🔗 References
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:
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 ..
Then, set up your .env
file with your Google Analytics Measurement ID:
REACT_APP_GA4_MEASUREMENT_ID=G-XXXXXX
Containerize It with Docker
Docker makes things fast, repeatable, and clean.
Start your app:
docker-compose up -d
Visit: http://localhost:80
Stop the server:
docker-compose down
✨ 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
Create a tunnel:
cloudflared tunnel create <Tunnel-NAME>
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
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
And that’s it—your local machine is now live to the world! 💥
Analytics Integration
Want to know who’s visiting your site?
- Create a Google Analytics account
- Set up a new property and web stream
- Grab your Measurement ID
- Paste it into your
.env
:
REACT_APP_GA4_MEASUREMENT_ID=G-XXXXXX
Here’s what mine looks like:
And don’t forget—Cloudflare gives you real-time traffic insights too:
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:
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
Top comments (18)
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...
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...
Hmm, great question. I will check if there is some solution for you later. Thanks a lot
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.
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.
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. :)
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! 😄
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!
Thanks a lot
pretty cool using old gear like that honestly makes me wonder what’s the main reason most people never try self-hosting at home
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
Great post! Would love to know more on SEO. Thanks for sharing!
Thank you, I will write another post about SEO improvement, stay tuned!
And I wonder what new laptop you bought?😆
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
Thank you very much I now know that there is home hosting with this guide will help me learn.
So glad to hear that! 🙌 Let me know if there's anything you'd like to dive deeper into! 🧠💬
If I wanted to host multiple projects on the same machine, would I need a different tunnel for each domain? 🤔