{"id":387,"date":"2022-01-20T14:03:38","date_gmt":"2022-01-20T06:03:38","guid":{"rendered":"https:\/\/blog.orangii.cn\/?p=387"},"modified":"2022-01-20T14:03:43","modified_gmt":"2022-01-20T06:03:43","slug":"cloudflare-pages","status":"publish","type":"post","link":"https:\/\/blog.orangii.cn\/2022\/cloudflare-pages\/","title":{"rendered":"\u4eceGithub Pages\u8fc1\u79fb\u81f3CloudFlare Pages\uff0c\u63d0\u5347\u4e00\u70b9\u70b9\u7684\u901f\u5ea6"},"content":{"rendered":"\n

CloudFlare Pages \u597d\u50cf\u57282021\u5e74\u67d0\u6708\u6b63\u5f0f\u4e0a\u7ebf\u4e86\uff0c\u5176\u901f\u5ea6\u6bd4Github Pages\uff08\u4ee5\u53caGithub Pages + CloudFlare CDN\uff09\u5feb\u4e86\u4e0d\u5c11\uff0c\u81f3\u5c11\u5728\u6211\u628a huli.li<\/a> \u8fc1\u79fb\u8fc7\u53bb\u540e\u611f\u89c9\u662f\u8fd9\u6837\u7684\u3002\u5e76\u4e14 CF \u7684 Pages \u76f8\u6bd4 Github \u7684 action \u914d\u7f6e\u8d77\u6765\u66f4\u52a0\u65b9\u4fbf\uff0c\u8fd8\u652f\u6301 React, Next.js, Nuxt.js, Vue, Hugo, JekyII \u7684\u90e8\u7f72\u9884\u8bbe\u3002\u800c\u4e14 DF Pages \u53ef\u4ee5\u90e8\u7f72\u79c1\u6709\u4ed3\u5e93\uff0c\u8fd9\u5728 Github \u8fd8\u8981Pro\u4ee5\u4e0a\u5957\u9910\u3002<\/p>\n\n\n\n

\"\"<\/div><\/figure><\/div>\n\n\n\n

\u914d\u7f6eCloudFlare Pages<\/h2>\n\n\n\n

\u70b9\u51fb\u94fe\u63a5\u5feb\u6377\u8df3\u8f6c\u81f3 CF Pages<\/a> \u6216\u5728\u63a7\u5236\u9762\u677f\u5de6\u4fa7\u70b9\u51fb Pages\uff08\u6ce8\u610f\u4e0d\u662f\u70b9\u8fdb\u57df\u540d\u540e\uff0c\u662f\u5728\u57df\u540d\u5217\u8868\u7684\u5de6\u4fa7\u8fb9\u680f\uff09\u3002\u7136\u540e\u6839\u636e\u63d0\u793a\u914d\u7f6e\u4e0e Github \u6216 Gitlab \u7684\u8fde\u63a5\uff0c\u767b\u5f55\u540e\u53ef\u4ee5\u9009\u62e9\u8ba9 CF Pages \u8bfb\u53d6\u5168\u90e8\u4ed3\u5e93\uff08\u5305\u62ec\u79c1\u6709\uff09\uff0c\u6216\u8005\u624b\u52a8\u9009\u4e2d\u60f3\u8981\u8ba9 CF Pages \u8bfb\u53d6\u7684\u4ed3\u5e93\u3002\u56de\u5230 Pages \u9996\u9875\u70b9\u51fb\u84dd\u8272\u7684 Create a project \u6309\u94ae\u6765\u5230\u65b0\u5efa\u4e00\u4e2a\u9879\u76ee\uff0c\u6765\u5230\u65b0\u5efa\u6d41\u7a0b\u3002<\/p>\n\n\n\n

\u5728\u65b0\u9875\u9762\u9009\u4e2d Github\/Gitlab \u8d26\u53f7\u5e76\u9009\u62e9\u9700\u8981\u6784\u5efa\u7684\u4ed3\u5e93\uff0c\u7136\u540e\u70b9\u51fb\u4e0b\u4e00\u6b65 Begin Setup\u3002\uff08\u6ca1\u770b\u5230\u4f60\u8981\u7684\u4ed3\u5e93\uff0c\u8bf4\u660e\u4e0a\u4e00\u6b65\u53ef\u80fd\u4f60\u6ca1\u6709\u6388\u6743 CF Pages \u53ef\u4ee5\u8bfb\u53d6\u7684\u4ed3\u5e93\uff09\u3002<\/p>\n\n\n\n

\"\"<\/div><\/figure>\n\n\n\n

\u5728\u65b0\u9875\u9762\u4e0a\u65b9\u586b\u597d Project name \u548c\u9700\u8981\u8fdb\u884c\u6784\u5efa\u7684\u5206\u652f\uff0cpage\u9875\u9762\u9ed8\u8ba4\u7684\u57df\u540d\u4f1a\u88ab\u914d\u7f6e\u5230<ProjectName>.pages.dev<\/code>\uff0c\u4e0d\u8fc7\u540e\u9762\u53ef\u4ee5\u914d\u7f6e\u81ea\u5b9a\u4e49\u81ea\u5df1\u7684\u57df\u540d\u3002<\/p>\n\n\n\n

\u5728\u4e0b\u65b9\u7684\u6784\u5efa\u8bbe\u7f6e\u4e2d\u53ef\u4ee5\u9009\u62e9\u9884\u8bbe\u65b9\u6848\uff0c\u4e5f\u53ef\u4ee5\u81ea\u5b9a\u4e49\u6784\u5efa\u914d\u7f6e\uff0c\u4f8b\u5982Vite.js\uff0c Build command \u662f npm run build<\/code>\uff0c\u8f93\u51fa\u76ee\u5f55\u5c31\u662f dist\u3002Frame preset \u9884\u8bbe\u53ef\u4ee5\u7a7a\u7740\uff0c\u5b83\u53ea\u4e0d\u8fc7\u662f\u53ef\u4ee5\u5e2e\u52a9\u4f60\u81ea\u52a8\u586b\u5199\u6784\u5efa\u914d\u7f6e\u3002<\/p>\n\n\n\n

\u8fd9\u91cc\u7684\u6784\u5efa\u5e76\u4e0d\u9700\u8981npm i<\/code>\uff0c\u56e0\u4e3a CF Pages \u4f1a\u81ea\u52a8\u8fd0\u884c\u5b89\u88c5\u4f9d\u8d56\u7684\u547d\u4ee4\u3002\u5e76\u4e14 CF Pages \u7684\u6784\u5efa\u73af\u5883\u9884\u5b89\u88c5\u4e86 Java 8\uff0cPython 2.7\uff0cNode.js 12.18.0 \u7b49\u73af\u5883\uff0c\u53ef\u4ee5\u5728Language support and tools<\/a>\u9875\u9762\u770b\u5230\uff0c\u5e76\u4e14 pip\u3001npm \u4e5f\u9884\u88c5\u5728\u73af\u5883\u91cc\uff0c\u5728\u521a\u624d\u7684\u94fe\u63a5\u9875\u9762\u4e0b\u65b9\u4e5f\u6709\u5199\u9053\u3002<\/p>\n\n\n\n

<\/i><\/span>\u5982\u679c\u662f\u7eaf\u9759\u6001\u5185\u5bb9\uff0c\u53ef\u4ee5\u5728command\u91cc\u9762\u586b\u5199 exit 0 \u6765\u8df3\u8fc7\u6267\u884c\u6784\u5efa\u9636\u6bb5\u3002<\/span><\/div>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n

\u7ee7\u7eed\u70b9\u51fb\u4e0b\u4e00\u6b65\u5c31\u53ef\u4ee5\u4fdd\u5b58\u5e76\u6784\u5efa\u4e86\u3002\u6709\u4e00\u8bf4\u4e00\u8fd9\u4e2a\u6784\u5efa\u8fc7\u7a0b\u76f8\u6bd4 Github Actions \u6765\u8bf4\u771f\u7684\u662f\u592a\u6162\u4e86\uff0c\u4e3b\u8981\u5c31\u662f\u5728\u521d\u59cb\u5316\u73af\u5883\u90a3\u91cc\uff0c\u5355\u4e00\u4e2a\u73af\u5883\u914d\u7f6e\u5c31\u57fa\u672c\u8981\u82b1\u4e2a\u4e24\u4e09\u5206\u949f\uff0c\u5bf9\u6bd4\u56fe\u5728\u4e0b\u9762\u3002\u867d\u7136\u6bd4\u8f83\u6ee1\uff0c\u4f46\u662f\u8bbf\u95ee\u901f\u5ea6\u5feb\u5c31\u884c\u4e86\uff0c\u4e5f\u4e0d\u662f\u4e0d\u80fd\u63a5\u53d7\u3002<\/p>\n\n\n\n

\"\"<\/div>
Github Action \u6784\u5efa\u65e5\u5fd7<\/figcaption><\/figure>\n\n\n\n
\"\"<\/div>
CloudFlare Pages \u6784\u5efa\u65e5\u5fd7<\/figcaption><\/figure>\n\n\n\n

\u6784\u5efa\u5b8c\u6210\u5c31\u53ef\u4ee5\u6253\u5f00\u751f\u6210\u7684\u57df\u540d\u6765\u8bbf\u95ee\u4e86\uff0c\u7136\u540e\u5c31\u53ef\u4ee5\u5728 Custom domains \u9875\u9762\u914d\u7f6e\u81ea\u5b9a\u4e49\u57df\u540d\u4e86\uff0c\u5982\u679c\u57df\u540dDNS\u4e5f\u662f\u5728 CloudFlare \u6258\u7ba1\u90a3\u4e48 CF \u8fd8\u53ef\u4ee5\u76f4\u63a5\u81ea\u52a8\u914d\u7f6e\uff08\u5982\u679c\u4e4b\u524d\u5bf9\u5e94\u57df\u540d\u6709 DNS \u8bb0\u5f55\u8bb0\u5f97\u5148\u5220\u6389\u7136\u540e\u518d\u81ea\u52a8\u914d\u7f6e\uff0c\u5426\u5219\u53ef\u80fd\u4f1a\u51fa\u73b0\u95ee\u9898\uff0c\u5982\u679c\u51fa\u73b0\u95ee\u9898\u4e86\u5220\u9664\u81ea\u5b9a\u4e49\u57df\u540d\u91cd\u65b0\u6dfb\u52a0\u5c31\u597d\u4e86\uff09\u3002<\/p>\n\n\n\n

\"\"<\/div>
CloudFlare Pages Custom domains<\/figcaption><\/figure>\n\n\n\n

\u6b64\u65f6 Github \u4ed3\u5e93\u5bf9\u5e94\u7684\u63d0\u4ea4\u53f7\u65c1\u8fb9\u4e5f\u4f1a\u663e\u793a\u6784\u5efa\u6210\u529f\uff08\u4e0b\u9762\u56fe\u7247\u91cc\u7b2c\u4e00\u4e2a\u662f Github Action \u81ea\u52a8\u6784\u5efa\uff0c\u7b2c\u4e8c\u3001\u4e09\u4e2a\u662f\u4ee3\u7801\u68c0\u67e5\uff0c\u6700\u540e\u4e00\u4e2a\u662f CF Pages \u7684\u6784\u5efa\uff09<\/p>\n\n\n\n

\"\"<\/div><\/figure>\n\n\n\n

\u53ef\u80fd\u51fa\u73b0\u7684\u95ee\u9898<\/h2>\n\n\n\n

\u6211\u81ea\u5df1\u6700\u5f00\u59cb\u914d\u7f6e huli.li \u65f6\u4e00\u76f4\u51fa\u73b0\u8fd9\u4e2a\u95ee\u9898\uff1a<\/p>\n\n\n\n

\"\"<\/div>
\u6784\u5efa\u5931\u8d25\u65e5\u5fd7<\/figcaption><\/figure><\/div>\n\n\n\n

\u731c\u5230\u53ef\u80fd\u662f Node.js \u7248\u672c\u592a\u4f4e\u5bfc\u81f4\u7684\uff08\u6784\u5efa\u73af\u5883\u7684\u624d 12.18.0\uff0c\u6211\u672c\u5730\u90fd16.13.1\u4e86\uff09\uff0c\u4e8e\u662f\u5c1d\u8bd5\u5728\u6784\u5efa\u547d\u4ee4\u52a0\u4e0a npm i -g npm && npm i -g n && n stable && npm run build<\/code> \u5347\u7ea7 npm \u548c Node.js\uff0c\u53c8\u63d0\u793a\u6743\u9650\u4e0d\u8db3\u6ca1\u6cd5\u5b89\u88c5\uff0c\u7136\u540e\u624d\u627e\u5230\u521a\u624d\u7684 Language support and tools<\/a> \u6587\u6863\uff0c\u53d1\u73b0\u53ea\u8981\u6307\u5b9a\u7279\u5b9a\u7684\u73af\u5883\u53d8\u91cf Environment variables \u5c31\u53ef\u4ee5\u9884\u88c5\u6307\u5b9a\u7248\u672c\u7684\u73af\u5883\uff0c\u6309\u7167\u6587\u6863\u914d\u7f6e\u597d\u540e\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n\n\n\n

\"\"<\/div>
CloudFlare Pages \u73af\u5883\u53d8\u91cf<\/figcaption><\/figure>\n\n\n\n

\u5176\u4ed6\u5c0f\u7b14\u8bb0<\/h2>\n\n\n\n

CF Pages \u4f1a\u5728\u6bcf\u6b21<\/strong> Github \u4ed3\u5e93\u6709\u65b0\u63d0\u4ea4\u65f6\u6784\u5efa\uff08\u4e0d\u8bba\u4efb\u4f55\u5206\u652f\uff09\uff0c\u56e0\u6b64\u4e3a\u4e86\u4e0d\u9891\u7e41\u6784\u5efa\u8fd8\u662f\u5c3d\u53ef\u80fd\u5c06\u591a\u4e2a commits \u4e00\u8d77 push \u4ee5\u907f\u514d\u9891\u7e41\u6784\u5efa\u3002\uff08\u9664\u975e\u4f60\u6682\u505c\u6389\uff09\u3002<\/p>\n\n\n\n

CF Pages \u4e5f\u4f1a\u4fdd\u7559\u6240\u6709\u6210\u529f\u6784\u5efa\u7684\u8bb0\u5f55\uff0c\u6210\u4e3a\u9884\u89c8 preview\uff0curl\u4e3a <\u6784\u5efaUUID\u524d8\u4f4d>.<ProjectName>.pages.dev<\/code> \u5e76\u4e14\u4e5f\u53ef\u4ee5\u968f\u65f6\u8bbf\u95ee\uff0cGithub \u4ed3\u5e93\u6784\u5efa\u8bb0\u5f55\u4e5f\u4f1a\u5c55\u793a\u51fa\u6765\uff0c\u5982\u679c\u4e0d\u5e0c\u671b\u8fd9\u4e9b preview \u88ab\u5c55\u793a\u51fa\u6765\uff0c\u9700\u8981\u5728 \u8bbe\u7f6e->\u901a\u7528\u8bbe\u7f6e->\u8bbf\u95ee\u7b56\u7565\uff08Settings -> General -> Access policy\uff09\u914d\u7f6e\u8c01\u53ef\u4ee5\u8bbf\u95ee\uff0c\u4e0d\u8fc7\u5982\u679c\u60f3\u4f7f\u7528\u8fd9\u4e2a\u9700\u8981\u5efa\u7acb CloudFlare Team\uff0c\u5176\u9700\u8981\u9a8c\u8bc1\u4fe1\u7528\u5361\u6216 Paypal\uff0c\u5373\u4f7f\u514d\u8d39\u7248\u4e5f\u9700\u8981\u9a8c\u8bc1\uff0c\u4f46\u662f\u56fd\u533a\u7684 Paypal \u4e5f\u53ef\u4ee5\u4f7f\u7528\u3002<\/p>\n\n\n\n

\"\"<\/div>
CloudFlare Pages Access policy<\/figcaption><\/figure>\n\n\n\n

\u6700\u540e\uff0c\u6b22\u8fce\u5404\u4f4d Fork \u72d0\u72f8\u72f8\u4ed3\u5e93\u7528\u6765\u6d4b\u8bd5\uff0c\u5982\u679c\u9700\u8981\u6b63\u5e38\u663e\u793a\u72d0\u72f8\u72f8\u9875\u9762\u7684\u5929\u6c14\u548c\u4f4d\u7f6e\u9700\u8981\u5b89\u88c5\u6587\u6863\u81ea\u884c\u7533\u8bf7\u5e76\u66ff\u6362 API Key\u3002\uff08\u8bb0\u5f97\u7ed9\u4e2aStar~\uff09<\/p>\n\n\n\n

<\/i>\u00a0GitHub<\/span><\/a><\/div>
Jiaocz\/huli.li<\/span><\/a><\/div>
<\/div><\/div>
<\/i>\u00a0<\/span><\/span><\/i>\u00a0<\/span><\/span><\/div><\/div>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

CloudFlare Pages \u597d\u50cf\u57282021\u5e74\u67d0\u6708\u6b63\u5f0f\u4e0a\u7ebf\u4e86\uff0c\u5176\u901f\u5ea6\u6bd4Github Pages\uff08\u4ee5\u53caGit […]<\/p>\n","protected":false},"author":1,"featured_media":397,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[38,36,37],"_links":{"self":[{"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/posts\/387"}],"collection":[{"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/comments?post=387"}],"version-history":[{"count":3,"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/posts\/387\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/posts\/387\/revisions\/401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/media\/397"}],"wp:attachment":[{"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/media?parent=387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/categories?post=387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.orangii.cn\/wp-json\/wp\/v2\/tags?post=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}