使用 Cloudflare pages 免費托管你的靜態頁面
May 24, 2023

使用 Cloudflare pages 免費托管你的靜態頁面

Cloudflare Pages 是 Cloudflare 提供的 JAMStack 託管服務，專注於 Web 基礎設施和安全。Cloudflare Pages 也稱為“Pages”，是 JAMStack 託管中的新成員，但他們的基礎設施幾乎與競爭對手相當。在本教程中，我們將教您如何在 Cloudflare 頁面上託管 JAMstack 網站。他們還有一個包含 500 個構建的免費層、無限帶寬（根據他們的 AUP 使用時）、自定義域名、免費 SSL、分析和訪問策略。

先決條件：

準備 GitHub 存儲庫：

類似於 Netlify 的 Cloudflare 頁面從 Github 存儲庫中提取內容，然後構建站點並將其發佈到他們的 CDN。您可以使用純 HTML（或）任何靜態站點生成器（如 Hugo、Next.js、Jekyll）來創建靜態站點。您的存儲庫必須至少有 1 個文件，並且必須存在一個 index.html 文件。下面是我帶有 index.html 文件的簡單 GitHub 存儲庫

  • HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Cloudflare Pages Demo</title>

</head>

<body>

    <h1>This is demo site for geeksforgeeks article on cloudflare pages</h1>

</body>

</html>

以及我們的 GitHub 存儲庫

Github 回購示例

部署到 Cloudflare 頁面：

第 1 步：登錄到您的 Cloudflare 帳戶並單擊右側菜單中的 Pages 圖標，這將帶您進入 Cloudflare Pages 儀表板。然後點擊創建項目。

單擊此圖標

點擊創建項目

第 2 步：這將為您帶來一個網頁，要求您連接到您的 GitHub 帳戶。

連接到 Github 帳戶

現在授權您希望安裝 Cloudflare 頁面的存儲庫，您可以選擇所有存儲庫（或）選定的存儲庫

授權 Cloudflare 頁面

第 3 步：選擇要部署的存儲庫並配置部署設置

選擇你的存儲庫

現在選擇部署配置

  • 項目名稱：為您的項目命名
  • 生產分支：要部署的倉庫分支
  • 框架：選擇您在項目中使用的框架，對於靜態 HTML、React、Hugo 等選擇 None
  • 構建命令：構建網站的命令，如果你在框架中選擇無則留空，否則會根據你的框架自動應用。如果您使用了自定義框架，請提供您的自定義構建命令。
  • Build Output folder： build命令的輸出目錄，如果你在framework中選擇none留空，否則會根據你的framework自動應用。如果您使用了自定義框架，請提供您的自定義構建輸出目錄。

選擇配置後，單擊保存並部署。

構建配置

現在 Cloudflare 將構建和部署您的站點，如果您已正確完成所有操作，您將看到如下所示的內容：

成功

您可以從項目儀表板連接到自定義域，您還可以從項目設置中啟用分析和訪問策略。

添加自定義域（如果有）

添加分析和訪問策略

You may also like