如何在 Cloudflare Workers Sites 上創建靜態站點

你好！我叫 Dima，是 Wrike SysOps 團隊的技術主管。在本文中，我將告訴您如何製作一個盡可能貼近用戶的網站，並在 10 分鐘內以每月 5 美元的價格實現其自動化部署。這篇文章與我們團隊內部解決的問題幾乎沒有任何關係。這是我了解新技術的個人經驗和印象。我嘗試盡可能詳細地描述這些步驟，以便這些說明對於具有不同經驗水平的人都有用。我希望你喜歡它。我們走吧！

因此，也許您已經找到了一種簡單且便宜的網站託管方式。甚至可能是免費的，正如本文所述 精彩文章.

但是，如果您仍然感到無聊並且想要接觸美麗新科技世界，該怎麼辦？假設您正在考慮自動化部署並希望盡可能加快網站速度？在本文中我們將使用 雨果，但這不是必要的。

我們使用 Gitlab CI/CD 進行自動化，但加速呢？讓我們使用以下方式將網站直接部署到 Cloudflare 工人站點.

需要什麼才能開始:

• Gitlab（您自己的或 多雲的)

• 帳戶 在 Cloudflare 上

• 已安裝 nodejs/npm

第 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. 在創建的文件中增加內容： 內容/貼文/我的精彩貼文.md.
   完成所有操作後，將草稿值變更為 假

8. 產生靜態檔案： hugo -D

現在我們的靜態網站位於目錄內 。 /民眾 並準備好進行第一次手動部署。

第 2 部分：設定 Cloudflare

現在讓我們來看看 Cloudflare 的初始設定。假設我們已經有該網站的網域名稱。讓我們以此為例 blog.example.com。

步驟 1：建立 DNS 記錄

首先我們選擇我們的網域，然後選擇選單項 DNS。我們創建一個 A 記錄博客，並為其指定一些虛擬 IP（這是官方 推薦，但他們本可以讓它看起來更漂亮）。

步驟 2：Cloudflare 令牌

1. 個人資料 -> API 令牌 標籤-> 創建令牌 -> 建立自訂令牌

在這裡，您需要將令牌限製到帳戶和區域，但保留圖像中列出的權限的編輯選項。

保存令牌以供將來參考，我們將在第三部分中需要它。

步驟3：取得accountid和zoneid

域 → 概覽 → [右側邊欄]

這些是我的，請不要使用它們:)

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

步驟 4：啟動 Workers

域 → 工人 → 管理工人

我們選擇一個唯一的名稱和 Workers → Unlimited 資費（截至今天每月 5 美元）。如果您願意，您可以稍後升級到免費版本。

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

我進行了第一次手動部署，以了解那裡到底發生了什麼事。儘管這一切都可以更簡單地完成：

1. 安裝牧馬人： npm i @cloudflare/wrangler -g

2. 讓我們進入我們的部落格目錄： cd blog.example.com

3. 啟動牧馬人： wrangler init — site hugo-worker

4. 為 wrangler 建立一個配置（詢問時輸入令牌）： wrangler config

現在讓我們嘗試更改剛剛建立的文件。 wrangler.toml (這裡 可能設定的完整清單）：

1. 我們表明 accountid 和 zoneid

2. 我們正在改變 路線 類似 *blog.example.com/*

3. 我們表明 假 為 workersdev

4. 將儲存桶更改為 ./public （或你的靜態網站所在的位置）

5. 如果路徑中有多個網域，則應在工作腳本中修正路徑： 工人站點/index.js （見函數 處理事件)

太好了，是時候使用指令部署網站了 wrangler publish.

第 4 部分：自動化部署

本教學是為 Gitlab 編寫的，但它概括了自動化部署的要點和簡單性。

步驟 1：建立並配置我們的項目

1. 新建GitLab專案並上傳site:目錄 blog.example.com 所有內容應位於專案的根目錄中

2. 我們問 多變的 CFAPITOKEN 在這裡： 設定 → 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 #

讓我們手動執行第一個部署（持續整合/持續交付 → 管道 → 運行管道） 或透過向主分支發送提交。瞧！

結論

好吧，我可能有點低估了，整個過程只花了十多分鐘。但是現在您有了一個可以自動部署的快速站點，並且對如何使用 Workers 有了一些新的想法。

 Cloudflare工人    雨果    GitLab C

來源： www.habr.com