id: e4b81a4b655442adbf74628de2d52626
parent_id: 
item_type: 1
item_id: 95205ea07d6c429eb4ec57174b354f4e
item_updated_time: 1764345633691
title_diff: "[{\"diffs\":[[1,\"如何在 Cloudflare 上部署网页\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":20}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>如何在 Cloudflare 上部署网页</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <meta name=\\\"content-class\\\" content=\\\"yinxiang.peso.superNote\\\"/>\\\r\\\n  <meta name=\\\"application-data:yinxiang.noteLayout\\\" content=\\\"{\\\"lineSpace\\\":\\\"recommend\\\",\\\"paragraphSpace\\\":\\\"recommend\\\"}\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"42882\\\"></a>\\\r\\\n<h1>如何在 Cloudflare 上部署网页</h1>\\\r\\\n\\\r\\\n<div><span style=\\\"\\\"><div style=\\\"max-width: 700px;\\\"><p></p><div style=\\\"--en-blockquote: true; box-sizing: border-box; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial;\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=MzU3NzA5MDUwOA==&amp;mid=2247484444&amp;idx=1&amp;sn=719ad9655175ec9ac5c02658db954c3c&amp;chksm=fc7d6edc26fc19378e3fc5e46815743beb70dcc1ccc8931245fc532efb4e88180eb1f3c107ae&amp;mpshare=1&amp;scene=1&amp;srcid=0525ncofyfJCOnhuYsacAWrq&amp;sharer_shareinfo=0070ba2b64ba25be3453a245a5ad4968&amp;sharer_shareinfo_first=0070ba2b64ba25be3453a245a5ad4968#rd\\\"><span>http://mp.weixin.qq.com/s?__biz=MzU3NzA5MDUwOA==&amp;mid=2247484...</span></a></div></div><p></p><div style=\\\"\\\"><div><div><div><span style=\\\"\\\">原创</span><span> 某鸟 </span><span><a style=\\\"\\\"> 某鸟碎碎 </a></span><span><em></em></span></div><div style=\\\"\\\"><div style=\\\"text-indent: 2em;\\\"><span>大模型流行的当下，简单描述一下自己的需求，就可以制作一个简单的静态网页了。</span></div><div style=\\\"text-indent: 2em;\\\"><span>独乐乐不如众乐乐，那么生成的网页，如果要分享出来给大家看，要怎么做呢？</span></div><div style=\\\"text-indent: 2em;\\\"><span>我们用 <a style=\\\"color: #576B95;\\\">#Cloudflare</a> 试一下！</span></div><div style=\\\"text-indent: 2em;\\\"><span><span style=\\\"font-weight: bold;\\\">Cloudflare是个聚合了众多工具的平台，俗称赛博活佛，浑身是宝</span>。<span style=\\\"font-weight: bold;\\\">不过这里我们只关注它提供的静态网站服务，免费并且没有请求数量限制！</span>之后会再发文来讲其他非常有用的功能！</span><span style=\\\"letter-spacing: 0.034em; background-color: transparent;\\\"><span><br/></span></span></div><hr style=\\\"border-style: solid; border-width: 1px 0 0; border-color: rgba(0,0,0,0.1); -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 0.5); transform-origin: 0 0; transform: scale(1, 0.5);\\\"/><div style=\\\"text-indent: 2em;\\\"><span style=\\\"letter-spacing: 0.034em; background-color: transparent;\\\"><span><br/></span></span></div><div style=\\\"text-indent: 0px; font-size: 20px;\\\"><span style=\\\"letter-spacing: 0.034em; background-color: transparent;\\\"><span><span style=\\\"font-weight: bold;\\\">注册</span></span></span></div><div style=\\\"text-indent: 2em;\\\"><span style=\\\"letter-spacing: 0.034em; background-color: transparent;\\\"><span>可以用国内的电子邮箱注册，默认进入的页面是英文，在右上角可以切换成中文：</span></span></div><div style=\\\"text-align: center;\\\"><span style=\\\"letter-spacing: 0.034em; background-color: transparent;\\\"><span><span style=\\\"color: rgb(255, 165, 0); font-weight: bold; text-decoration: underline;\\\">https://dash.cloudflare.com/sign-up</span></span></span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/8ec49af2042449e6846827a3b7e91a8f\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-align: center;\\\"><img src=\\\":/077c17a914c34ee986a93a203b0dd701\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>记得勾一下真人检测，才能点击注册按钮继续。然后你就会收到一封验证的邮件，英文的： Please verify your email address。</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/6e01a2369d934245a61db2186d789815\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>点击链接验证后，就可以用刚刚注册的账号登录了。登录后记得在右上角切换一下中文显示。</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/09147f25682e4b7aa31688429fb83918\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 0px; font-size: 20px;\\\"><span><br/></span></div><hr style=\\\"border-style: solid; border-width: 1px 0 0; border-color: rgba(0,0,0,0.1); -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 0.5); transform-origin: 0 0; transform: scale(1, 0.5);\\\"/><div style=\\\"text-indent: 0px; font-size: 20px;\\\"><span><span style=\\\"font-weight: bold;\\\">建站</span></span></div><div style=\\\"text-indent: 2em;\\\"><span>要建立一个可以访问的网站，我们需要创建一个项目.</span></div><div style=\\\"text-indent: 2em;\\\"><span>在刚刚打开的clouflare的页面左边的菜单栏中，找到 <span style=\\\"font-weight: normal;\\\">计算（Workers）</span>，点开来，可以看到 <span style=\\\"font-weight: bold;\\\">Workers 和 Pages</span> 的选项，点击它打开新页面。</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/4787100a4a024282bcc1a62b9ba9174c\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto; height: 338px;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>然后点击 <span style=\\\"background-color: rgb(0, 82, 255); color: #000;\\\">创建</span> 按钮创建一个新的 Pages 项目。</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/7ec61cee7ec7498b827dfe10466ec1d4\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>Cloudflare可以直接从github上同步文件过来，但是对我们来说github 的访问有点不稳定，所以我选择了 <span style=\\\"font-weight: bold;\\\">使用直接上传</span>，点击 <span style=\\\"background-color: rgb(255, 255, 255); color: rgb(0, 82, 255);\\\">开始使用</span>，就来到填写网站名字的界面。</span></div><div style=\\\"text-indent: 2em;\\\"><span>这里只能用英文、数字和 -（破折号），因为这个会是你接下来网页的访问子域名。</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/22fdcf6a51514dc882faedb7b16a831b\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>确定名字后点击 <span style=\\\"background-color: rgb(0, 82, 255); color: #000;\\\">创建项目</span>，就可以开始上传网页了。</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/c40929fc4a1a4b4a93c70f1a83bbf54f\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>我先 找DeepSeek 帮我构思一个网页先：</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/2b12ecdb270144d082f5751df2aa882a\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>只是一个很简单的网页，一次生成就可以了，将html下载下来保存为index.html。</span></div><div style=\\\"text-indent: 2em;\\\"><span>在本地创建一个文件夹 ihavealotofideas 将 index.html 放进去。</span></div><div style=\\\"text-indent: 2em;\\\"><span>回到 Cloudflare 刚刚我们创建项目的页面，点击 <span style=\\\"background-color: rgb(255, 255, 255); color: rgb(0, 82, 255);\\\">从计算机中选择</span> &gt; 将刚刚下载的网页上传上去：<span style=\\\"font-weight: bold;\\\">用上传文件夹的方式</span>。 </span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/8eb797c954bd438a8fecb19f810dc09a\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>当提示所有文件均已经成功上传后，就可以点击 <span style=\\\"background-color: rgb(0, 82, 255); color: #000;\\\">部署站点</span> 了。很快就就可以看到下面这个页面，我们就可以点击链接查看刚刚部署的网页了！</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/15c93818e7f6414a9c19f6a2b687366a\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div><span><br/></span></div><div style=\\\"text-align: center;\\\"><span><span style=\\\"color: rgb(255, 165, 0); font-weight: bold; text-decoration: underline;\\\">https://i-have-a-lot-of-ideas.pages.dev/index_1</span></span></div><div style=\\\"text-indent: 2em;\\\"><span>点开看看：黑乎乎的主页面、一个诡异的人头在浮动、不断飘落的头发、点击小球发出屁屁的声……</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/9213f6cccb944c7982bf21972e23e67e\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"font-size: 20px;\\\"><span><br/></span></div><hr style=\\\"border-style: solid; border-width: 1px 0 0; border-color: rgba(0,0,0,0.1); -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 0.5); transform-origin: 0 0; transform: scale(1, 0.5);\\\"/><div style=\\\"font-size: 20px;\\\"><span><span style=\\\"font-weight: bold;\\\">部署网页</span></span></div><div style=\\\"text-indent: 2em;\\\"><span>那我们后续要修改或者添加新的网页上去要怎么做呢？比如我又让Deepseek 帮我设计多一个明亮一点的个人主页：</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/18d875b13c4a47ec8902104db5f1b22c\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>下载下来后放到刚刚创建的 ihavealotofideas 文件夹里面，命名为index_1.html，现在这个文件夹里面有两个文件了。</span></div><div style=\\\"text-indent: 2em;\\\"><span>再回到 Cloudflare，点击 计算（workers）下面的 Workes和Pages，然后点击刚刚创建的项目 i-have-a-lot-of-ideas：</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/77f71c62cfd14719bef7e7271289808b\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>在新的页面中点击右上角的 <span style=\\\"background-color: rgb(255, 255, 255); color: rgb(0, 82, 255);\\\">创建部署</span>：</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/9e05f78ad1844d64ba2d5973e7297727\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>然后选择我们放了网页的<span style=\\\"font-weight: bold;\\\">本地文件夹</span>后再点击 <span style=\\\"background-color: rgb(0, 82, 255); color: #000;\\\">保存并部署</span>。记得要在提示 <span style=\\\"font-weight: bold;\\\">所有文件均已成功上传</span> 出现后再点。每次上传我们都要全部网页一起上传，因为它这个部署是覆盖式的。</span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/18394f7e29f54b92aceabf4b4395ea65\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>之后我们就可以访问网页了，在域名后面加上新建的网页名字，比如：</span></div><div style=\\\"text-align: center;\\\"><span><span style=\\\"color: rgb(255, 165, 0); font-weight: bold; text-decoration: underline;\\\">https://i-have-a-lot-of-ideas.pages.dev/index_1</span></span></div><div style=\\\"text-align: center;\\\"><img src=\\\":/772a2c302aff47f593667ceaf47b985a\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks: %7B%22align%22%3A%22center%22%7D; width: auto;\\\" width=\\\"auto\\\"/></div><div style=\\\"text-indent: 2em;\\\"><span>托管静态网站只是Cloudflare众多免费功能中的一个，后续会继续研究和大家分享更多的用处！</span></div></div></div></div></div></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":10641}]"
metadata_diff: {"new":{"id":"95205ea07d6c429eb4ec57174b354f4e","parent_id":"f67288c3a0be4374b5d532b5dcc3aabc","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764348846399,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T21:04:14.257Z
created_time: 2025-11-28T21:04:14.257Z
type_: 13