Meteorite Craterhttps://blog.starpixel.club/Firefly6.16.5https://github.com/CuteLeaf/Firefly2026年9月1日 22:39:47https://blog.starpixel.club/posts/manual/deploy-astro/https://blog.starpixel.club/posts/manual/deploy-astro/从零教会你使用宝塔安装Astro博客框架Tue, 01 Sep 2026 00:00:00 GMT<p>WordPress 的过于臃肿使站长不得不另选一个优质的博客框架，之前还折腾过一段时间的 Halo，但由于生态问题导致结果也是不尽人意 qaq</p> <p>当我翻网上的博客站时发现了 Astro，那种丝滑的感觉所带给用户的舒畅感不亚于内急时找到了厕所。</p> <p>经过 3days 的学习，也是上线了第一个版本。我想将过程分享出来帮助大家解决自己在使用 Astro 时所遇到的问题。</p> <section><h2>选择 Astro 的理由是?<a href="#选择-astro-的理由是"><span>#</span></a></h2><p>Astro 静态博客和 WordPress 这类动态博客的本质区别，就是预制菜和现场炒菜区别。静态网站的访客来了直接看成品，速度飞快。WordPress这类动态博客呢，每次有人访问就现场从数据库拉数据、拼装页面。</p><p>说白了就是：快、便宜、不用操心服务器。动态博客需要服务器，一个月怎么也得几十块钱起步。相反，对于静态博客，GitHub Pages、Vercel、Cloudflare Pages全都免费托管，对于资金紧张的站长简直是天使来的。</p><section><h3>静态博客和动态博客的性能差距呢?<a href="#静态博客和动态博客的性能差距呢"><span>#</span></a></h3><p>根据不同条件下实际使用体验下来，Astro 真的令人眼前一亮。不仅首屏加载时间大幅下降，其整站体积也大幅缩小。</p></section><section><h3>和其他框架相比?<a href="#和其他框架相比"><span>#</span></a></h3><p>直接上表格说话</p> <table><thead><tr><th>框架</th><th>学习曲线</th><th>维护成本</th></tr></thead><tbody><tr><td>Astro</td><td>低</td><td>低</td></tr><tr><td>Next.js</td><td>中</td><td>中</td></tr><tr><td>Hexo</td><td>低</td><td>低</td></tr><tr><td>WordPress</td><td>中</td><td>高</td></tr></tbody></table><p>各个框架都有其所在的优势区，站长还是推荐根据自身需要来选择所需框架。</p></section></section> <section><h2>环境准备<a href="#环境准备"><span>#</span></a></h2><section><h3>安装 Node.js<a href="#安装-nodejs"><span>#</span></a></h3><p>推荐使用 Node.js v22.12.0 版本，根据官方文档，不支持奇数版本。</p></section><section><h3>创建 Astro 项目<a href="#创建-astro-项目"><span>#</span></a></h3><ol><li><span></span><div><div>安装 Astro</div><div><div><div>npmpnpmyarn</div> <div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>npm</span><span> </span><span>create</span><span> </span><span>astro@latest</span></div></div></code></pre><div><div></div><div></div></div></figure></div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>pnpm</span><span> </span><span>create</span><span> </span><span>astro@latest</span></div></div></code></pre><div><div></div><div></div></div></figure></div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>yarn</span><span> </span><span>create</span><span> </span><span>astro</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div></div></div></li><li><span></span><div><div>完成 Astro 安装向导</div><div><ol> <li>项目名称：自行填写</li> <li>选择模板：选 Blog 模板（用方向键+回车）</li> <li>安装依赖：选 Yes</li> <li>TypeScript配置：选 Strict 或 Strictest（相信我，类型检查能帮你省很多bug）</li> <li>初始化Git仓库：选 Yes</li> </ol><div><div><div></div><div>为什么推荐Blog模板？</div></div><div><p>因为它已经内置了文章列表、标签分类、RSS订阅的基础代码，比从空白模板开始省太多事了。我第一次用空白模板，光搞分页就折腾了两个小时。</p></div></div></div></div></li><li><span></span><div><div>启动你的 Astro 项目</div><div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>cd</span><span> </span><span>your-project-name</span></div></div><div><div><div>2</div></div><div><span>npm</span><span> </span><span>run</span><span> </span><span>dev</span></div></div></code></pre><div><div></div><div></div></div></figure></div><p>打开浏览器访问这个<code>localhost:4321</code>，你应该能看到一个已经搭好的博客框架了。<code>npm run build</code>可以打包你的项目。</p></div></div></li></ol></section></section> <section><h2>主题选择<a href="#主题选择"><span>#</span></a></h2><p>站长正在使用并且推荐大家使用 Firefly 主题。（无广，可以理会）</p><section><h3>Firefly 是什么?<a href="#firefly-是什么"><span>#</span></a></h3><p>Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。</p><p><a href="https://docs-firefly.cuteleaf.cn/zh/guide/getting-started.html" target="_blank">Firefly 主题使用文档</a></p></section><section><h3>安装<a href="#安装"><span>#</span></a></h3><ol><li><span></span><div><div>下载 Firefly 主题</div><div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>git</span><span> </span><span>clone</span><span> </span><span>https://github.com/CuteLeaf/Firefly.git</span></div></div><div><div><div>2</div></div><div><span>cd</span><span> </span><span>Firefly</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div></li><li><span></span><div><div>安装依赖</div><div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>pnpm</span><span> </span><span>install</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div></li><li><span></span><div><div>启动开发服务器</div><div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>pnpm</span><span> </span><span>dev</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div></li><li><span></span><div><div>构建生产版本</div><div><div><figure><figcaption><span></span><span>Terminal window</span></figcaption><pre><code><div><div><div>1</div></div><div><span>pnpm</span><span> </span><span>build</span></div></div></code></pre><div><div></div><div></div></div></figure></div></div></div></li></ol></section><section><h3>其余<a href="#其余"><span>#</span></a></h3><p>推荐前往 <a href="https://docs-firefly.cuteleaf.cn/zh/guide/getting-started.html" target="_blank">Firefly 主题使用文档</a> 查看更多关于 Firefly 主题的详细信息和使用指南。</p><p>考虑版本更新迭代以及实际需求，本站不过多赘述。</p></section></section>