记录技术与生活https://blog.xzggai.com/Firefly6.11.0https://github.com/CuteLeaf/Firefly2026年6月9日 21:18:16https://blog.xzggai.com/posts/astro-guide/https://blog.xzggai.com/posts/astro-guide/Astro 是一个现代化的静态站点生成器，专注于内容驱动的网站。Tue, 10 Jun 2025 00:00:00 GMT<section><h2>什么是 Astro？<a href="#什么是-astro"><span>#</span></a></h2><p>Astro 是一个<strong>内容驱动的</strong>静态站点生成器，它的核心理念是：</p><blockquote><p>发送更少的 JavaScript 到浏览器。</p></blockquote></section> <section><h2>核心特性<a href="#核心特性"><span>#</span></a></h2><section><h3>群岛架构（Islands Architecture）<a href="#群岛架构islands-architecture"><span>#</span></a></h3><p>Astro 允许你在静态页面中插入交互式组件，这些组件被称为”群岛”。</p><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>---</span></div></div><div><div><div>2</div></div><div><span>import</span><span> </span><span>InteractiveCounter</span><span> </span><span>from</span><span> </span><span>'../components/Counter.jsx'</span><span>;</span></div></div><div><div><div>3</div></div><div><span>---</span></div></div><div><div><div>4</div></div><div> </div></div><div><div><div>5</div></div><div><span>&lt;!-- 静态内容 --&gt;</span></div></div><div><div><div>6</div></div><div><span>&lt;</span><span>h1</span><span>&gt;我的页面&lt;/</span><span>h1</span><span>&gt;</span></div></div><div><div><div>7</div></div><div> </div></div><div><div><div>8</div></div><div><span>&lt;!-- 交互式群岛 --&gt;</span></div></div><div><div><div>9</div></div><div><span>&lt;</span><span>InteractiveCounter</span><span> </span><span>client:load</span><span> /&gt;</span></div></div></code></pre><div><div></div><div></div></div></figure></div></section><section><h3>零 JavaScript 默认<a href="#零-javascript-默认"><span>#</span></a></h3><p>Astro 组件默认不发送任何 JavaScript 到客户端，这意味着页面加载速度极快。</p></section></section> <section><h2>为什么选择 Astro？<a href="#为什么选择-astro"><span>#</span></a></h2> <table><thead><tr><th>特性</th><th>Astro</th><th>其他框架</th></tr></thead><tbody><tr><td>性能</td><td>⭐⭐⭐⭐⭐</td><td>⭐⭐⭐</td></tr><tr><td>SEO</td><td>⭐⭐⭐⭐⭐</td><td>⭐⭐⭐⭐</td></tr><tr><td>学习曲线</td><td>⭐⭐⭐⭐</td><td>⭐⭐⭐</td></tr><tr><td>灵活性</td><td>⭐⭐⭐⭐⭐</td><td>⭐⭐⭐⭐</td></tr></tbody></table></section> <section><h2>总结<a href="#总结"><span>#</span></a></h2><p>如果你正在构建一个以内容为主的网站，Astro 是一个绝佳的选择。</p></section>https://blog.xzggai.com/posts/first-post/https://blog.xzggai.com/posts/first-post/这是我的第一篇博客文章，使用 Firefly 主题搭建。Mon, 09 Jun 2025 00:00:00 GMT<section><h2>为什么写博客？<a href="#为什么写博客"><span>#</span></a></h2><p>写博客是一个非常好的习惯。它不仅能帮助你整理思路，还能让你与他人分享知识和经验。</p></section> <section><h2>技术栈<a href="#技术栈"><span>#</span></a></h2><p>这个博客使用以下技术构建：</p><ul> <li><strong><a href="https://astro.build" target="_blank">Astro</a></strong> - 超快的静态站点生成器</li> <li><strong><a href="https://github.com/CuteLeaf/Firefly" target="_blank">Firefly</a></strong> - 清新美观的现代化个人博客主题</li> <li><strong>Markdown</strong> - 简洁的内容编写方式</li> <li><strong>Vercel</strong> - 快速可靠的部署平台</li> </ul></section> <section><h2>代码示例<a href="#代码示例"><span>#</span></a></h2><div><figure><figcaption></figcaption><pre><code><div><div><div>1</div></div><div><span>const</span><span> </span><span>greeting</span><span> </span><span>=</span><span> </span><span>'Hello, World!'</span><span>;</span></div></div><div><div><div>2</div></div><div><span><span>console</span><span>.</span></span><span>log</span><span><span>(</span><span>greeting</span><span>);</span></span></div></div></code></pre><div><div></div><div></div></div></figure></div></section> <section><h2>下一步计划<a href="#下一步计划"><span>#</span></a></h2><ol> <li>写更多技术文章</li> <li>添加评论功能</li> <li>优化 SEO</li> </ol><blockquote><p>千里之行，始于足下。</p></blockquote><p>感谢你的阅读！</p></section>