https://blog.ohtly.com/tags/%E9%9D%99%E6%80%81%E7%AB%99%E7%82%B9/ Recent content in 静态站点 on OHTLY Blog Hugo zh-cn Sat, 25 Jul 2026 01:06:29 +0800 https://blog.ohtly.com/posts/2026-07-24-astro-tailwind-company-website/ Fri, 24 Jul 2026 17:50:00 +0800 https://blog.ohtly.com/posts/2026-07-24-astro-tailwind-company-website/ <h2 id="背景"> 背景 <a class="heading-link" href="#%e8%83%8c%e6%99%af"> <i class="fa-solid fa-link" aria-hidden="true" title="链接到标题"></i> <span class="sr-only">链接到标题</span> </a> </h2> <p>原有站点基于传统 CMS，内容管理成本高，改动一次需要走完整的发布流程。业务方希望站点更轻、更稳、更容易维护，最终决定重构为纯静态站点。</p> <h2 id="技术选型"> 技术选型 <a class="heading-link" href="#%e6%8a%80%e6%9c%af%e9%80%89%e5%9e%8b"> <i class="fa-solid fa-link" aria-hidden="true" title="链接到标题"></i> <span class="sr-only">链接到标题</span> </a> </h2> <p>最终选用 Astro 7 + Tailwind 3，<code>output: &quot;static&quot;</code>，输出纯静态文件，零客户端 JS，部署到对象存储 + CDN。</p> <p>选择理由：</p> <ul> <li>Astro 的 Islands 架构默认不输出 JS，适合以内容为主的官网</li> <li>Tailwind 3 的 JIT 模式可以快速迭代 UI，无需手写大量 CSS</li> <li>静态产物可直接托管到任何对象存储，成本低、访问快</li> </ul> <h2 id="目录结构与路由"> 目录结构与路由 <a class="heading-link" href="#%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84%e4%b8%8e%e8%b7%af%e7%94%b1"> <i class="fa-solid fa-link" aria-hidden="true" title="链接到标题"></i> <span class="sr-only">链接到标题</span> </a> </h2> <pre tabindex="0"><code>src/ pages/ index.astro # 首页 about.astro # 关于 contact.astro # 联系 services/ index.astro # 服务列表 [slug].astro # 服务详情（动态路由） 404.astro # 自定义 404 layouts/ BaseLayout.astro # 全局布局 components/ SiteNav.astro # 导航 Hero.astro # 首屏 ServiceCard.astro # 服务卡片 SiteFooter.astro # 页脚 data/ services.ts # 服务数据 styles/ global.css # 全局样式 + 自定义工具类 </code></pre><p>关键设计：服务数据集中存放在 <code>services.ts</code>，<code>[slug].astro</code> 通过 <code>getStaticPaths</code> 自动生成静态页面，新增服务只需改数据文件，无需新增路由。</p>