主持人 > 博客 > 管理 > 如何在 Cloudflare Workers Sites 上创建静态站点

如何在 Cloudflare Workers Sites 上创建静态站点

你好！ 我叫 Dima，是 Wrike 系统运营团队的技术主管。 在这篇文章中我将告诉你如何在 10 分钟和每月 5 美元的时间内让一个网站尽可能贴近用户，并自动化其部署。 这篇文章与我们团队内解决的问题几乎无关。 这是我个人在了解一项新技术时的经历和印象。 我尝试尽可能详细地描述这些步骤，以便这些说明对具有不同经验的人有用。 我希望你会喜欢。 去！

如何在 Cloudflare Workers Sites 上创建静态站点

因此，也许您已经找到了一种简单且廉价的方式来托管网站。 甚至可能是免费的，如此处所述 很棒的文章.

但突然你还是觉得无聊，想接触一下美丽的科技新世界？ 假设您正在考虑自动化部署并希望尽可能加快您的站点速度？ 在本文中我们将使用 雨果，但这是可选的。

我们使用 Gitlab CI/CD 进行自动化，但是加速呢？ 让我们使用以下命令将站点直接部署到 Cloudflare 工人站点.

开始需要什么:

第 1 部分：安装 Hugo

如果您已经安装了 Hugo，或者您更喜欢不同的静态站点生成器（或者根本不使用），那么您可以跳过这一部分。

  1. 下载 Hugo 从 https://github.com/gohugoio/hugo/releases

  2. 我们根据其中定义的文件之一放置 Hugo 可执行文件 PATH 方法

  3. 创建一个新站点： hugo new site blog.example.com

  4. 将当前目录更改为新创建的目录： cd blog.example.com

  5. 选择设计主题（https://github.com/budparr/gohugo-theme-ananke/releases 管他呢）

  6. 让我们创建第一篇文章： hugo new posts/my-amazing-post.md

  7. 将内容添加到创建的文件中： 内容/帖子/my-amazing-post.md.
    一切完成后，将草稿值更改为 false

  8. 生成静态文件： hugo -D

现在我们的静态站点位于一个目录内 。/民众 并为您的第一次手动部署做好准备。

第 2 部分：设置 Cloudflare

现在让我们看看 Cloudflare 的初始设置。 假设我们已经拥有该网站的域。 我们举个例子 blog.example.com。

步骤 1：创建 DNS 条目

首先，选择我们的域名，然后选择菜单项 DNS。 我们创建一个博客A记录并为其指定一些虚构的IP（这是官方的 建议，但他们本可以让它变得更漂亮一点）。

如何在 Cloudflare Workers Sites 上创建静态站点

第 2 步：Cloudflare 令牌

  1. 我的账户 -> API 令牌 标签-> 创建令牌 -> 创建自定义令牌

如何在 Cloudflare Workers Sites 上创建静态站点

在这里，您需要将令牌限制为帐户和区域，但保留图片中列出的权限的“编辑”选项。

保存该令牌以供将来使用，我们将在第三部分中需要它。

步骤3：获取accountid和zoneid

域名 → 概述 → [右侧边栏]

如何在 Cloudflare Workers Sites 上创建静态站点这些是我的，请不要使用它们:)

将它们保存在令牌旁边，我们在第三部分中也将需要它们。

第四步：激活工人

域名 → 工人 → 管理工人

我们选择一个独特的名称和资费 Workers → Unlimited（今天每月 5 美元）。 如果您愿意，您可以稍后升级到免费版本。

第 3 部分：首次部署（手动部署）

我进行了第一次手动部署，以了解那里到底发生了什么。 尽管这一切都可以更简单地完成：

  1. 安装牧马人： npm i @cloudflare/wrangler -g

  2. 让我们进入我们博客的目录： cd blog.example.com

  3. 启动牧马人： wrangler init — site hugo-worker

  4. 为牧马人创建配置（在询问时输入令牌）： wrangler config

现在让我们尝试对新创建的文件进行更改 牧马人.toml (这里 可能设置的完整列表）：

  1. 指定 accountid 和 zoneid

  2. 变化 路线 像*这样的东西blog.example.com/*

  3. 指定 false 为 工人开发者

  4. 将存储桶更改为 ./public （或者您的静态站点所在的位置）

  5. 如果路径中有多个域，则应更正工作脚本中的路径： 工人站点/index.js （参见函数 处理事件)

太棒了，是时候使用团队来部署站点了 wrangler publish.

第 4 部分：部署自动化

本指南是为 Gitlab 编写的，但它概括了自动化部署的本质和易用性。

第 1 步：创建并配置我们的项目

  1. 新建一个GitLab项目并上传site:目录 博客.example.com 所有内容必须位于项目根目录中

  2. 我们设置 变量 CF API代币 位置： 个人设置 → CI / CD → 变量

步骤 2：创建 .gitlab-ci.yml 文件并运行第一个部署

创建一个文件 .gitlab-ci.yml 在根目录中包含以下内容：

stages:
  - build
  - deploy

build:
  image: monachus/hugo
  stage: build
  variables:
    GIT_SUBMODULE_STRATEGY: recursive
  script:
    - cd blog.example.com/
    - hugo
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #


deploy:
  image: timbru31/ruby-node:2.3
  stage: deploy
  script:
    - wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - cd blog.example.com/
    - ../dist/wrangler publish
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #

我们手动启动第一个部署（持续集成/持续交付 → 管道 → 运行管道） 或者通过提交到 master 分支。 瞧！

结论

嗯，可能我说得有点轻描淡写了，整个过程也就十几分钟而已。 但现在您拥有了一个具有自动部署功能的快速站点，以及一些关于您还可以使用 Workers 做什么的新想法。

 Cloudflare工人    雨果    亚搏体育appGitLab CI

来源： habr.com

添加评论