零成本搭建：如何使用Cloudflare免费搭建个人网站和API服务！

回望

11月30日 09:29更新

150

为什么选择Cloudflare？

在分享具体步骤之前，让我们先聊聊为什么Cloudflare( https://www.cloudflare.com/ )是个人开发者的不二之选：

1. 完全免费：没错，你没看错！Cloudflare提供免费的页面托管和Workers服务。

2. 全球加速：得益于其遍布全球的CDN节点，你的网站访问速度飞快。

3. 安全可靠：企业级的安全防护，保护你的网站不受各种攻击。

4. 简单易用：即使是技术小白，也能快速上手。

准备工作

在开始之前，你需要准备：

– 一个GitHub账号

– 一个Cloudflare账号

– 基本的前端开发知识（HTML/CSS/JavaScript）

第一步：创建GitHub仓库

1. 登录GitHub，创建一个新的仓库

2. 选择 “Add a README file”

3. 将仓库设置为公开（Public）

第二步：开发你的静态网站

这里我们以一个简单的个人主页为例：

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>我的个人网站</title>    <style>        body {            font-family: Arial, sans-serif;            max-width: 800px;            margin: 0 auto;            padding: 20px;            text-align: center;        }        h1 {            color: #333;        }</style></head><body>    <h1>欢迎来到我的个人网站</h1>    <p>这是一个使用Cloudflare Pages免费部署的网站！</p></body></html>

将这个文件保存为 `index.html`，并提交到你的GitHub仓库。

第三步：使用Cloudflare Pages部署网站1. 登录Cloudflare控制台2. 点击 “Pages”3. 选择 “Connect to Git”4. 授权并选择你的GitHub仓库5. 保持默认配置，点击 “Deploy”

大功告成！Cloudflare会自动为你分配一个免费的域名。

第四步：创建Cloudflare Workers API想要搭建一个简单的API服务？我们来写一个 “Hello, World” API：

addEventListener('fetch', event => {  event.respondWith(handleRequest(event.request))})

async function handleRequest(request) {  // 设置CORS头，允许跨域访问  const corsHeaders = {    "Access-Control-Allow-Origin": "*",    "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",    "Access-Control-Max-Age": "86400",  }

  // 处理OPTIONS预检请求  if (request.method === 'OPTIONS') {    return new Response(null, {      headers: corsHeaders    })  }

  // 处理GET请求  if (request.method === 'GET') {    return new Response(JSON.stringify({      message: "欢迎访问我的个人API！",      greeting: "Hello, World!"    }), {      headers: {        ...corsHeaders,        "Content-Type": "application/json"      }    })  }

  // 处理其他请求  return new Response('Method Not Allowed', { status: 405 })}

第五步：部署Workers API1. 进入Cloudflare Workers控制台2. 点击 “Create a Service”3. 输入服务名称4. 将上面的代码粘贴到编辑器5. 点击 “Deploy”

至此，如果你只需要简单的网页和服务Cloudflare 的 pages和Workers就能满足你了。

Cloudflare + HuggingFace但如果你想运行稍微复杂的应用，比如复杂些的nodejs服务或python服务，就有些吃力了，因为Cloudflare并没有完整支持nodejs的标准库，以及python的支持至少目前也不完整。

这时候Hugging Face（https://huggingface.co）就该出场了！

评分

欢迎为Ta评分