Astro × Cloudflare Workershttps://www.itshumei.cn/zh_CNhttps://www.itshumei.cn/posts/hello-world/https://www.itshumei.cn/posts/hello-world/itshumei's blog 的第一篇文章，介绍这个博客的技术栈和部署方式。Tue, 13 Oct 2026 00:00:00 GMT<p>欢迎来到 <strong>itshumei's blog</strong>！这是第一篇文章。</p> <h2>这个博客是怎么搭的</h2> <ul> <li><strong>Astro + Fuwari 主题</strong>：页面在构建时预渲染成纯静态 HTML，速度极快。</li> <li><strong>Cloudflare Workers + Static Assets</strong>：静态文件直接从 Cloudflare 边缘节点分发；只有 <code>/api/*</code> 路由跑在 Worker 里。</li> <li><strong>GitHub OAuth</strong>：访客点「使用 GitHub 登录」，走标准授权码流程；登录后拿到一个 HMAC-SHA256 签名的 HttpOnly cookie 会话（7 天有效），服务端无状态，不需要 KV。</li> <li><strong>Cloudflare D1</strong>：评论和留言存在 Serverless SQLite 里，带简单限流。</li> <li><strong>明暗模式</strong>：右上角太阳/月亮按钮切换亮色、暗色、跟随系统三种模式，还支持自选主题色。</li> </ul> <h2>写新文章</h2> <p>往 <code>src/content/posts/</code> 里扔一个 <code>.md</code> 文件，frontmatter 写这几项即可：</p> <pre><code>--- title: 文章标题 published: 2026-10-13 description: 一句话简介 tags: [标签1, 标签2] category: 分类名 --- </code></pre> <p>然后 <code>pnpm run deploy</code>，完事。</p> <p>:::tip[提示] 这篇文章下面的评论区就是活的——登录 GitHub 后试试发一条。站长的留言板在导航栏「留言板」。 :::</p> <h2>数学公式也支持</h2> <p>行内公式 $e^{i\pi} + 1 = 0$，块级公式：</p> <p>$$ \int_{-\infty}^{\infty} e^{-x^2} , dx = \sqrt{\pi} $$</p> <h2>代码高亮</h2> <pre><code>// Cloudflare Worker 里的地理信息就一行 const city = request.cf?.city; // "Shenyang" </code></pre> https://www.itshumei.cn/posts/why-workers/https://www.itshumei.cn/posts/why-workers/Cloudflare 官方已推荐新项目直接用 Workers + Static Assets，本文简述原因。Mon, 12 Oct 2026 00:00:00 GMT<p>Cloudflare 官方文档现在明确写着：<strong>新网站和新应用一律推荐 Workers + Static Assets</strong>，Pages 只建议存量项目继续维护。</p> <h2>差异在哪</h2> <ol> <li><strong>能力更全</strong>：Worker 能访问全部 Cloudflare 平台能力（D1、KV、R2、Queues、AI……），静态资产只是它的一个 binding。</li> <li><strong>路由更灵活</strong>：assets binding 让你精确控制哪些路径跑 Worker、哪些直接走静态文件。本博客就是页面全静态、只有 <code>/api/*</code> 进 Worker，省钱又快。</li> <li><strong>一条部署链路</strong>：<code>wrangler deploy</code> 同时更新代码和资产，版本、回滚、渐进发布都在同一套体系里。</li> </ol> <h2>对 Astro 意味着什么</h2> <p><code>@astrojs/cloudflare</code> 的构建产物就是 <code>dist/_worker.js</code> + 静态文件，<code>wrangler.jsonc</code> 里 <code>main</code> 指向前者、<code>assets.directory</code> 指向 <code>./dist</code>，天然就是 Workers 形态。</p> <p>所以这个博客从一开始就按 Workers 部署，没有历史包袱。</p> <p>:::note[相关阅读] Cloudflare 的 Pages → Workers 迁移指南：developers.cloudflare.com/workers/static-assets/migration-guides/migrate-from-pages/ :::</p> https://www.itshumei.cn/posts/markdown-extended/https://www.itshumei.cn/posts/markdown-extended/Read more about Markdown features in FuwariWed, 01 May 2024 00:00:00 GMT<h2>GitHub Repository Cards</h2> <p>You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.</p> <p>::github{repo="Fabrizz/MMM-OnSpotify"}</p> <p>Create a GitHub repository card with the code <code>::github{repo="&lt;owner&gt;/&lt;repo&gt;"}</code>.</p> <pre><code>::github{repo="saicaca/fuwari"} </code></pre> <h2>Admonitions</h2> <p>Following types of admonitions are supported: <code>note</code> <code>tip</code> <code>important</code> <code>warning</code> <code>caution</code></p> <p>:::note Highlights information that users should take into account, even when skimming. :::</p> <p>:::tip Optional information to help a user be more successful. :::</p> <p>:::important Crucial information necessary for users to succeed. :::</p> <p>:::warning Critical content demanding immediate user attention due to potential risks. :::</p> <p>:::caution Negative potential consequences of an action. :::</p> <h3>Basic Syntax</h3> <pre><code>:::note Highlights information that users should take into account, even when skimming. ::: :::tip Optional information to help a user be more successful. ::: </code></pre> <h3>Custom Titles</h3> <p>The title of the admonition can be customized.</p> <p>:::note[MY CUSTOM TITLE] This is a note with a custom title. :::</p> <pre><code>:::note[MY CUSTOM TITLE] This is a note with a custom title. ::: </code></pre> <h3>GitHub Syntax</h3> <blockquote> <p>[!TIP] <a href="https://github.com/orgs/community/discussions/16925">The GitHub syntax</a> is also supported.</p> </blockquote> <pre><code>&gt; [!NOTE] &gt; The GitHub syntax is also supported. &gt; [!TIP] &gt; The GitHub syntax is also supported. </code></pre> <h3>Spoiler</h3> <p>You can add spoilers to your text. The text also supports <strong>Markdown</strong> syntax.</p> <p>The content :spoiler[is hidden <strong>ayyy</strong>]!</p> <pre><code>The content :spoiler[is hidden **ayyy**]! </code></pre>