主持人 > 博客 > 管理 > 如何在 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 可執行文件 路徑 方法

  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.
    一切完成後，將草稿值改為 假

  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 上創建靜態站點這些是我的，請不要使用它們:)

將它們保存在令牌旁邊，我們在第三部分中也將需要它們。

第四步：激活工人

域 → 工人 → 管理工人

我們選擇一個獨特的名稱和關稅工人 → 無限制（今天每月 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. 我們表明 假 為 工人開發者

  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

來源： www.habr.com

添加評論