{"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 \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 \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 \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 \u8fd9\u91cc\u7684\u6784\u5efa\u5e76\u4e0d\u9700\u8981<\/div><\/figure><\/div>\n\n\n\n
\u914d\u7f6eCloudFlare Pages<\/h2>\n\n\n\n
<\/div><\/figure>\n\n\n\n
<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
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
npm 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