工科学生 · 学习笔记https://dreamer-home.pages.dev/zh_CNhttps://dreamer-home.pages.dev/posts/cloudflare-pages-homepage/https://dreamer-home.pages.dev/posts/cloudflare-pages-homepage/零基础也能看懂：Cloudflare Pages 是什么、我是怎么用“直接上传”发布第一个网站的，以及接下来可以做什么。Thu, 08 Oct 2026 00:00:00 GMT<p>这是我学习 Cloudflare 的第一篇笔记，记录一下怎么用 <strong>Cloudflare Pages</strong> 免费发布一个个人主页。整个过程不用买服务器、不用配 Nginx，十几分钟就能拿到一个可以分享给别人的网址。</p> <h2>Cloudflare Pages 是什么</h2> <p>Cloudflare 在全球有几百个机房（数据中心）。<strong>Pages</strong> 是它提供的静态网站托管服务：你把写好的 HTML、CSS、JavaScript 和图片交给它，它就会把这些文件复制到全球的机房里。访客打开网站时，会由离他最近的机房响应，所以速度很快。</p> <p>“静态网站”指的是页面内容在发布前就已经生成好的网站，比如个人主页、博客、作品集、项目文档。这个博客本身也是一个静态网站。</p> <h2>我是怎么发布的：直接上传</h2> <p>Pages 有两种发布方式：<strong>连接 Git 仓库</strong>（推代码自动部署）和 <strong>直接上传</strong>（Direct Upload）。第一次我选了最简单的直接上传，步骤如下：</p> <ol> <li>在本地写好网页，只有两个文件：<code>index.html</code> 和 <code>style.css</code></li> <li>把这两个文件打包成一个 zip 压缩包（注意 <code>index.html</code> 要放在压缩包的最外层）</li> <li>登录 Cloudflare 控制台，进入 <strong>Workers 和 Pages</strong>，点击 <strong>创建</strong> → <strong>Pages</strong> → <strong>上传资产</strong></li> <li>给项目起名 <code>dreamer-home</code>，这个名字会成为网址的前缀</li> <li>上传 zip，点击 <strong>部署站点</strong></li> </ol> <p>几秒钟后，网站就上线了，地址是：</p> <pre><code>https://dreamer-home.pages.dev </code></pre> <p>:::tip[小提示] 控制台网页一次只能选一个文件时，打包成 zip 再上传最省事。直接上传的限制是：单次最多 1000 个文件，单个文件不超过 25 MB。 :::</p> <h2>自动帮你做好的事情</h2> <p>发布之后，Cloudflare 默认就帮我做好了这些事，完全不用自己配置：</p> <ul> <li><strong>HTTPS 加密</strong>：自动签发证书，地址栏直接显示小锁</li> <li><strong>全球 CDN</strong>：文件缓存在全球各地的机房，国内外访问都比较快</li> <li><strong>抗攻击</strong>：网站躲在 Cloudflare 的网络后面，能挡住大部分恶意流量</li> <li><strong>版本记录</strong>：每次部署都会保留一个版本，出问题可以一键回滚</li> </ul> <h2>免费额度</h2> <p>对个人学习来说，免费版基本用不完：</p> <table> <thead> <tr> <th>项目</th> <th>免费额度</th> </tr> </thead> <tbody> <tr> <td>网站流量和请求</td> <td>不限</td> </tr> <tr> <td>每月构建次数</td> <td>500 次</td> </tr> <tr> <td>单个项目的自定义域名</td> <td>最多 100 个</td> </tr> <tr> <td>单个文件大小</td> <td>25 MB</td> </tr> </tbody> </table> <p>:::note[注意] Pages 的静态网站本身不收费；但如果以后用到 Workers、D1 数据库这类按量计费的功能，记得留意用量，Cloudflare 没有硬性的消费上限。 :::</p> <h2>下一步</h2> <p>直接上传适合第一次体验，但每次修改都要重新打包上传，有点麻烦。接下来我打算：</p> <ol> <li><strong>连接 GitHub 自动部署</strong>：把网站代码放到 GitHub 仓库，Pages 连接仓库后，每次 <code>git push</code> 就会自动构建并发布</li> <li><strong>绑定自己的域名</strong>：买一个便宜的域名，接入 Cloudflare 后绑定到这个项目</li> <li><strong>学习 Workers</strong>：给网站加一点后端功能，比如访问计数或者留言板</li> </ol> <p>学到哪里，就在这个博客里记录到哪里。</p> https://dreamer-home.pages.dev/posts/about-this-blog/https://dreamer-home.pages.dev/posts/about-this-blog/这个博客是怎么搭起来的，以及我打算在这里写些什么。Wed, 07 Oct 2026 00:00:00 GMT<p>你好，我是 Dreamer，一名工科学生。这里是我的个人博客，主要记录学习笔记和折腾过程。</p> <h2>用了什么技术</h2> <ul> <li><strong><a href="https://astro.build/">Astro</a></strong>：一个适合做内容网站的前端框架，把 Markdown 文章编译成静态网页</li> <li><strong><a href="https://github.com/saicaca/fuwari">Fuwari</a></strong>：基于 Astro 的开源博客模板（MIT 协议），自带深色模式、文章目录、全站搜索和归档</li> <li><strong><a href="https://pages.cloudflare.com/">Cloudflare Pages</a></strong>：负责托管网站，自动配好 HTTPS 和全球 CDN，而且免费</li> </ul> <p>写文章只需要在 <code>src/content/posts/</code> 下新建一个 Markdown 文件，构建之后就会变成一个网页。</p> <h2>打算写什么</h2> <ul> <li>Cloudflare 的学习笔记：Pages、Workers、D1、R2、Workers AI……</li> <li>做小项目的过程和踩过的坑</li> <li>专业课和其他感兴趣的东西（待补充）</li> </ul> <p>欢迎常来看看。</p>