管理杂谈OA答疑ERP答疑教程搜索

保姆级教程:如何使用 Cloudflare Pages 免费部署高性能静态网站


Cloudflare Pages 是目前市面上最慷慨的静态托管服务之一。它不仅支持 React、Vue、Next.js 等现代前端框架,也支持 Hugo、Hexo 等静态博客生成器。

一、 准备工作

在开始之前,你需要准备好:

  1. 一个 Cloudflare 账号(直接注册,无需绑定信用卡)。

  2. 静态网站源码/代码仓库:你的网站源代码/如果你想直接从github拉取,需要将网站源码托管在 GitHub 或 GitLab 上(推荐 GitHub)。


二、 部署流程(只需 3 步)

第 1 步:静态文件部署

  1. 登录 Cloudflare Dashboard。

在左侧菜单栏点击 "Workers & Pages"(有些版本直接显示为 "Pages")。

点击蓝色的 "Create application" (创建应用) 按钮。

根据实际情况选择 部署方式,这里我们假设我们的代码就在本地,点击"upload your static files" 标签页。

将你的静态网站源码文件拖拽上去即可。注意:如果你的静态网页是个单页应用为了访问报错404,应该配置单页应用选项

6. 点击部署后,就可以访问你的网站了,会自动给你分配一个域名
此时你的网站就上线了,页面上的worker地址就是网站的地址


二、 进阶配置(让你的网站更好用)

1. 绑定自定义域名 (Custom Domain)

虽然 Cloudflare 送了一个 *.dev 的域名,但你肯定想要 www.yourname.com

  1. 找到你部署好的项目,进入设置页面,选择添加-添加自定义域。

  2. 输入你的自己的域名【已经绑定到cloudflare的域名】点击添加后,就可以通过自己的域名访问了,而且https证书也会自动给你安排好

    3. 更新网站,后续你的网站有更新只需要点击部署版本上传新的源代码即可

    三、 为什么推荐 Cloudflare Pages?(对比 Netlify)

    特性Cloudflare PagesNetlify
    带宽无限 (Unlimited)100GB / 月 (超额很贵)
    构建时间每月 500 分钟每月 300 分钟
    节点速度国内访问速度较快 (全球任播)国内访问有时不稳定
    团队协作免费版限制较少免费版限制成员数

    阅读原文:原文链接


    更多精彩文章浏览...
    点击右上角图标分享到朋友圈
    官方网站:http://www.clicksun.cn
    咨询热线:400-186-1886
    服务邮箱:service@clicksun.cn