技术 | 把旧电脑变成免费网站:本地服务器 + Cloudflare 隧道 + GitHub 备份


技术 | 把旧电脑变成免费网站:本地服务器 + Cloudflare 隧道 + GitHub 备份

一台 i5-8250U 、 8G 内存的旧笔记本,卖二手大概值 500 块。盯着它看了三十秒,脑子里冒出一个念头:这玩意儿能不能跑个网站?

能。不仅跑起来了,还是免费的——有 HTTPS ,有自定义域名,代码自动备份到 GitHub ,不怕崩。全程零成本

这篇文章就是整个搭建过程。每一步都可复制粘贴。

▲ 一台旧笔记本 + Cloudflare Tunnel + GitHub = 零成本个人网站

一、需要准备什么

三样东西,全免费:

工具
作用
费用
一台旧电脑 / 树莓派
当服务器用
0 (旧设备利用)
Cloudflare 账号 + 域名
把本地服务暴露到公网
0 (免费套餐)
GitHub 仓库
代码备份 + 版本管理
0 (公开仓库免费)

域名需要花几十块买一个。不想花钱?可以用 Cloudflare Tunnel 自带的 trycloudflare.com 临时地址测试——后面会讲。

二、把本地网站跑起来

先在旧电脑上装个 Web 服务器。推荐 Ubuntu Server 22.04 或 24.04 (装老电脑上比 Windows 轻快多了),树莓派、 macOS 甚至 Windows 也都可以。

2.1 安装 Nginx

💻 终端📋 复制

sudo apt update && sudo apt install nginx -y sudo systemctl status nginx

打开浏览器访问 http://localhost,看到「 Welcome to nginx!」就说明 OK 。

2.2 写一个自己的网页

💻 终端📋 复制

sudo mv /var/www/html/index.nginx-debian.html /var/www/html/index.nginx-debian.html.bak sudo nano /var/www/html/index.html

贴进去一个最简单的 HTML :

📄 /var/www/html/index.html📋 复制

<!DOCTYPE html> <html lang="zh-CN"> <head>   <meta charset="UTF-8">   <title>我的网站</title>   <style>     body { font-family: sans-serif; max-width: 600px; margin: 80px auto; padding: 20px; }     h1 { color: #333; }   </style> </head> <body>   <h1>🚀 跑起来了!</h1>   <p>这台机器正通过 Cloudflare Tunnel 连接世界。</p> </body> </html>

保存,刷新 http://localhost,页面出来了。这只是起点——后面想跑博客、相册、个人主页、 Dashboard ,往 /var/www/html/ 里塞就行。

▲ Nginx 跑起来之后,浏览器访问 localhost 看到的欢迎页

三、用 Cloudflare Tunnel 把网站暴露到公网

现在网站只能在局域网里看。要让它上公网,传统办法是搞公网 IP + 端口转发 + DDNS——一套下来能把人搞疯。运营商还经常不给个人用户开公网 IP 。

Cloudflare Tunnel 完全不用这些。它在服务器和 Cloudflare 之间打一条加密隧道,外网流量通过这条隧道进来。没有公网 IP ?无所谓。运营商封了 80/443 端口?也不影响

3.1 准备工作

1.注册 Cloudflare[1] 账号(免费)
2.买一个域名(.com 几十块一年,.xyz 更便宜),把 DNS 服务器改成 Cloudflare 给的地址(比如 alice.ns.cloudflare.com 和 bob.ns.cloudflare.com

3.2 安装 cloudflared

💻 终端📋 复制

sudo mkdir -p --mode=0755 /usr/share/keyrings curl -fsSL https://pkg.cloudflare.com/cloudflare-main.gpg | \   sudo tee /usr/share/keyrings/cloudflare-main.gpg >/dev/null  echo 'deb [signed-by=/usr/share/keyrings/cloudflare-main.gpg] https://pkg.cloudflare.com/cloudflared any main' | \   sudo tee /etc/apt/sources.list.d/cloudflared.list  sudo apt update && sudo apt install cloudflared -y cloudflared --version

macOS 用户:brew install cloudflared Windows 用户:winget install Cloudflare.cloudflared

3.3 登录 + 创建隧道

💻 终端📋 复制

cloudflared tunnel login cloudflared tunnel create my-site

终端会打印一个隧道 UUID (像 a1b2c3d4-...),记下来。凭证文件自动保存在 ~/.cloudflared/ 里。

3.4 配置隧道规则

📄 ~/.cloudflared/config.yml📋 复制

tunnel: <你的隧道 UUID> credentials-file: /home/你的用户名/.cloudflared/<你的隧道 UUID>.json  ingress:   - hostname: www.你的域名.com     service: http://localhost:80   - service: http_status:404

末尾那行 http_status:404 是默认规则——所有不匹配的请求返回 404 ,防止被人滥用。

3.5 绑定域名 + 启动

💻 终端📋 复制

cloudflared tunnel route dns my-site www.你的域名.com cloudflared tunnel run my-site

试试 https://www.你的域名.com——HTTPS 自动签发,证书自动续期, CDN 自动开启。不用任何额外配置。

▲ Cloudflare Tunnel 架构:旧电脑主动出站 → Cloudflare 边缘节点 → 全球用户

3.6 设为开机自启

💻 终端📋 复制

sudo cloudflared service install sudo systemctl enable cloudflared sudo systemctl start cloudflared

旧电脑插电、联网、合盖、扔墙角。以后就算停电重启,网站也会自动恢复。

四、用 GitHub 备份代码

代码存在旧电脑上不安全——硬盘坏了就没了。用 Git 推到 GitHub ,免费备份 + 版本管理。

4.1 初始化 Git 仓库

💻 终端📋 复制

cd /var/www/html git init git add . git commit -m "初始化网站"

4.2 推送到 GitHub

在 GitHub 上新建一个仓库(可以设为 Private ),然后:

💻 终端📋 复制

git remote add origin https://github.com/你的用户名/你的仓库名.git git branch -M main git push -u origin main

4.3 自动备份脚本

每次改完网站内容,跑这个脚本一键备份:

📄 ~/backup.sh📋 复制

#!/bin/bash cd /var/www/html git add . git commit -m "备份 $(date '+%Y-%m-%d %H:%M')" git push

💻 终端📋 复制

chmod +x ~/backup.sh ~/backup.sh

甚至可以加一条 cron 定时任务,每天凌晨自动备份:

💻 终端📋 复制

crontab -e 0 3 * * * /home/你的用户名/backup.sh
▲ 网站代码推送到 GitHub 仓库,每次修改都有记录,随时可以回滚

五、扩展方向

网站搭好了,但这才是个空壳。下面是一些不花钱的扩展:

装个静态博客: Hugo 或 Hexo ,生成静态 HTML 扔进 /var/www/html/
跑个相册: Immich 或 PhotoPrism ,手机照片自动备份
加个仪表盘: Homepage 或 Dashy ,把所有自托管服务的入口集中展示
套上 Cloudflare CDN + 缓存规则:静态资源缓存到全球边缘节点,访问速度飞快
Cloudflare Access 加密码保护:在 Zero Trust 里设规则,只有你的邮箱能访问管理页面

一台旧笔记本,三个免费工具,你的个人网站就上线了。没有公网 IP ?无所谓。运营商封端口?不影响。


参考资料

Cloudflare Tunnel 官方文档 · developers.cloudflare.com/cloudflare-one/connections/connect-networks/

Nginx 官方文档 · nginx.org/en/docs/

GitHub 官方文档 · docs.github.com


参考链接

[1] Cloudflare: https://dash.cloudflare.com