熟悉我的朋友都知道，我有点完美主义，尤其网站运行状态，总希望它能长期稳定运行。这种习惯让我不太愿意买服务器（穷），但也限制了我部署网站的数量。为了解决这个问题，我开始用 Vercel 和 Cloudflare 这类平台来部署一些不需要传统服务器的项目——也就是大家常说的“白嫖”。

这篇文章先介绍一个站点监控的项目，后续会随机更新。今天就把它分享给大家，希望能对你们有帮助！

什么是无服务器部署？

像 Vercel 这样的平台，属于「静态站点托管」或「无服务器计算平台」。它们让部署网站和应用变得更简单，你完全不用操心服务器配置和维护的问题。具体来说，它们有这些好处：

  • 静态站点托管：适合部署由 HTML、CSS、JavaScript 构成的网站，无需后端数据库或运行环境。
  • 无服务器架构：你不用管服务器，平台会自动准备运行环境、分配资源，你只需上传代码。
  • 自动扩缩容：根据访问流量自动调整资源，访问量多时也不会挂掉。
  • 持续集成/部署（CI/CD）：连接 GitHub 或 GitLab 后，每次推送代码就能自动构建和发布。
  • 自动 HTTPS：平台会自动配置 SSL 证书，保证传输安全。
  • 绑定自定义域名：可以轻松将自己的域名指向部署的服务。
  • 丰富的模板：提供多种项目模板，支持博客、电商、作品集等类型。
  • Serverless 函数：可以部署轻量级后端代码，响应特定事件或请求。
  • 操作友好：有清晰易懂的操作界面，部署和管理都很方便。
  • 按量付费：大多提供免费额度，超出部分才按实际使用收费。

除了 Vercel，市面上还有不少类似平台，例如：

  1. Netlify：持续部署做得很好，用户体验优秀。
  2. GitHub Pages：与 GitHub 集成，免费、简单，适合静态页。
  3. Azure Static Web Apps：微软出品，支持 JAMstack 架构。
  4. Google Firebase Hosting：自带全球 CDN，访问速度快。
  5. Amazon Amplify：AWS 提供的全栈部署平台。
  6. Zeabur：在国内访问性能很好，越来越受开发者欢迎。
  7. Cloudflare Pages：基于 Cloudflare 全球网络，部署速度快，特别适合静态网站和 JAMstack 项目。
  8. Cloudflare Workers：无服务器函数平台，在全球边缘节点运行代码，延迟极低，适合 API 代理、轻量级后端等场景。

在本文中，我亲自测试了 Vercel 和 Cloudflare，确认它们都能顺利部署这些项目。至于其他平台，部署流程大同小异，你也可以参照本文尝试。如果过程中遇到问题，欢迎在评论区留言问我！

🪧引用站外地址，不保证站点的可用性和安全性
vercel
Build and deploy on the AI Cloud.
🪧引用站外地址，不保证站点的可用性和安全性
Cloudflare
随时随地连⁠接、保⁠护、构建

项目介绍

🪧引用站外地址，不保证站点的可用性和安全性
Uptime-Status
JLinMr

站点监测是一个基于 UptimeRobot API 开发的站点状态监控面板，支持多站点状态监控、实时通知、故障统计等功能。界面简洁美观，响应式设计，支持亮暗主题切换。

这个项目本身是一个设计出色的前端界面，但它并非一个独立的全栈应用。它的正常运行完全依赖于 UptimeRobot 服务来提供监控数据。如果您正好是 UptimeRobot 的用户，并且希望拥有一个比原生界面更漂亮的公开状态页，那么这个项目将是您的绝佳选择。

预览

部署教程

可以 根据本文部署 或 查看官方文档部署

🪧引用站外地址，不保证站点的可用性和安全性
Uptime-Status 部署文档
JLinMr

为便于根据自身需求，选择最合适的部署方式，本文将分别介绍在 Cloudflare Pages 和 Vercel 上的部署流程。这两种方式效果相当，只需选择其中一种即可

Cloudflare Pages

首先，fork以下项目到自己仓库：

🪧引用站外地址，不保证站点的可用性和安全性
Uptime-Status
JLinMr

打开并登录 Cloudflare 并且找到 Workers 和 Pages

workers-pages

点击右上角「创建应用程序」，选择「Pages」服务。在新建页面上，点击「导入现有 Git 存储库」（首次使用需按指引授权连接您的GitHub账户），然后选中您刚刚Fork的 Uptime-Status 项目即可。

pages-git

setting

点击「开始设置」后，在配置页面中，需将 框架预设 修改为 Vue，并为项目起一个名称，其余所有设置保持默认即可。

deploy

等待部署完成，继续下文的「获取API Key」以完成最后一步。建议绑定自定义域提升访问速度，这里就不想细说啦！

Vercel

  1. 登录 Vercel 后，点击链接即可进入项目导入页面：一键部署至 Vercel
  2. 填写项目名称，点击Create
  3. 绑定自定义域提升访问速度（可选，强烈建议）
  4. 获取 API Key 并且 前往 GitHub 修改 .env

获取 UptimeRobot API Key

注册/登录 UptimeRobot

🪧引用站外地址，不保证站点的可用性和安全性
UptimeRobot
The worlds leading uptime monitoring service

进入 Integrations & API -> API

🪧引用站外地址，不保证站点的可用性和安全性
UptimeRobot
Integrations & API

创建 Read-Only API Key

read-only-api

然后生成的 API Key，再自行修改 .env的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 填写刚刚复制的 API
VITE_UPTIMEROBOT_API_KEY = "urxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx"

# UptimeRobot API URL 
# 除腾讯云 EdgeOne Pages 、vercel 、cloudflare pages 外 
## 其它部署方式需要自行搭建 API 代理 
## 代理地址 https://api.uptimerobot.com/v2/getMonitors
## 这里一般不用更改
VITE_UPTIMEROBOT_API_URL = "/api/status"

# 站点名称
VITE_APP_TITLE = "name"

# 监控面板排序方式
# 支持 friendly_name 和 create_datetime 两种方式
VITE_UPTIMEROBOT_STATUS_SORT = "friendly_name"

添加监控网站

  1. 访问 UptimeRobot 并登录

  2. 点击左侧菜单栏中的「Monitors」，然后选择页面右上角的「+ New」

  3. 在创建页面中填写以下信息：

    • URL: 输入你想要监控的网站地址（例如 https://example.com）
    • Friendly Name（可选）: 可为该监控任务设置一个易于识别的名称
    • 其余设置（如检查间隔、告警规则等）可根据需要调整，或保持默认

  4. 完成设置后，滚动至页面底部，点击「Create Monitor」保存

  5. 稍等片刻，即可在你部署的状态页面中看到该监控点的运行状态

create

总结

折腾站点的乐趣，有时不在于拥有多强大的硬件，而在于用最“轻”的方式，实现最“稳”的服务。通过 Vercel 或 Cloudflare Pages 这样的无服务器平台，我们几乎零成本地部署了一个美观实用的站点状态监控页——这不仅是一次技术实践，也是一种建站思路的体现。

未来我还会继续分享更多轻量、实用、有意思的 Cloudflare / Vercel 项目，欢迎保持关注。