Update avaliable. Click RELOAD to update.
目录

如何使用 Cloudflare Pages 托管静态站点

自主搭建一个站点托管环境,需要具备以下条件:

  1. 服务器:你需要拥有一台或多台服务器来托管你的网站。可以是物理服务器或云服务器,如 Amazon EC2、DigitalOcean、Google Cloud 等。你需要选择一个适合你需求的服务器提供商,并设置和配置服务器环境。
  2. 域名:你需要注册一个域名,这将是你网站的唯一标识符。你可以通过域名注册商购买域名,并将其指向你的服务器 IP 地址。
  3. Web 服务器软件:你需要选择并安装适当的 Web 服务器软件,如 Apache、Nginx 或 Microsoft IIS。这些软件将负责接收来自用户的请求,并将网页内容发送回给用户。
  4. 网站部署:你需要将你的网站文件上传到服务器,并配置 Web 服务器软件以正确地提供这些文件。这可能涉及到设置虚拟主机、配置文件路径、处理静态文件和设置缓存等。
  5. 安全性:你需要考虑网站的安全性,包括设置防火墙、处理恶意请求、使用 SSL/TLS 加密等。
  6. 监控和维护:你需要监控你的服务器和网站的运行状态,并进行必要的维护工作,如备份数据、更新软件、处理错误等。
  7. 网络连接:你需要一个稳定的互联网连接,以确保你的服务器能够始终在线并提供服务。这可以是家庭网络、办公网络或专业的托管网络服务。

00-static-site-hosted-with-cloudflare-pages

1. 前提

2. 步骤

进入 Cloudflare Dashboard,点击左侧菜单”Workers 和 Pages“,点击”创建应用程序

01-static-site-hosted-with-cloudflare-pages

选择 “Pages” 标签,选择 “连接Git” 或者 本地上传,这里的代码使用 Git 托管,所以选择 “连接Git

02-static-site-hosted-with-cloudflare-pages

授权 Cloudflare 访问你的 Github 权限,授权完成即可在 Cloudflare Pages 上看到所有仓库,下面的截图中可发现有两个仓库的代码使用 Pages 进行托管使用

03-static-site-hosted-with-cloudflare-pages

选择希望托管的仓库,点击下面”开始设置

04-static-site-hosted-with-cloudflare-pages

进入设置构建和部署的配置页面,这里大部分可以保持默认,根据自身应用配置,唯一关注点在框架预设的选择上,选择代码正确的框架,Cloudflare Pages 会根据框架规则自动配置,如构建命令输出目录等等配置,当然也可结合应用自身情况进行配置

05-static-site-hosted-with-cloudflare-pages

点击”保存并部署“,就会开始自动进行拉取代码、编译部署的 Piple Line 操作,完成后就可以通过 Cloudflare Pages 分配的域名打开部署的站点。

3. 自定义

3.1. 自定义域名

进入 Cloudflare Dashboard,点击左侧菜单”Workers 和 Pages“,可以看到已部署的 Pages 应用,点击进入详情配置页面,选择 “自定义域” 标签页,点击 “设置自定义域“,输入域名后,在域名服务商那按照给出的 CNAME 做解析即可

06-static-site-hosted-with-cloudflare-pages

3.2. 自定义命令

某些情况在构建部署阶段,不想使用 Cloudflare Pages 根据框架生成的默认命令,希望更改,比如 jekyll,启动前,需要使用 Gem install xxx 安装依赖后在启动,此时可以使用自定义实现

应用根路径创建一个 run.sh 的启动文件,一个示范内容如下:

#!/bin/bash
# 为Cloudflare Page 中运行的脚本

# 1. 替换 serviceWorker 版本号
current_cache_version=$(grep -o 'var CACHE_VERSION = "V[0-9]*"' sw.js | grep -o '".*"' | sed 's/"//g')
new_cache_version=V$(date +%s)
awk -v old="$current_cache_version" -v new="$new_cache_version" '{ sub(old, new) } 1' sw.js > sw.js.tmp && mv sw.js.tmp sw.js
echo "New version $new_cache_version"

# 2. 安装依赖并启动
gem install jekyll-sitemap && gem install jekyll-paginate && jekyll build

上面的启动脚本,有两个作用,在构建部署时,使用当前时间戳替换代码某个文件的内容,安装依赖后再启动,如果使用 jekyll 框架缺省的命令,则可能只有 jekyll build

在 Cloudflare Pages 应用构建和部署配置页面将构建命令替换为执行 bash run.sh 即可

07-static-site-hosted-with-cloudflare-pages

4. 总结

Cloudflare可以说算比较良心的云服务提供商,很多强大的功能都是免费的,如 Pages 托管应用,我们不需要关心服务器、SSL证书、CDN、安全、监控等,默认都是自带的,结合 Github 或者 GitLab,你只需要编写代码提交,后续的操作都不需要关心,Pages 会自动更新最新代码进行部署构建,配置上通知,你可以得到完美的开发体验,值得推荐。

引用

版权所有,本作品采用知识共享署名-非商业性使用 3.0 未本地化版本许可协议进行许可。转载请注明出处:https://www.wangjun.dev//2023/10/static-site-hosted-with-cloudflare-pages/