一个多月前，我启动了一个大胆的计划：在人工智能的协助下，彻底重塑我的博客站点。如今，在 2024 年的钟声即将敲响之际，这个全新的博客版本终于面世。这篇文章将简要回顾这次博客更新的旅程，记录下其中的关键步骤和个人感悟。
AI 的作用
在文章“与 AI 结对编程”中，我曾详细介绍了这次博客重建的核心目标：在掌握一门全新的编程语言和新框架的同时，完成博客的彻底重构。回顾整个项目，我可以自信地说，这些目标都已经成功实现。
在这个过程中，AI 扮演了多重角色，包括合作伙伴、导师、助理和设计师。可以肯定地说，若无 AI 的协助，我不可能在短短一个多月内完成这样一个全新的博客平台。此次重构不仅让我了解了当今的前端技术，还让我掌握了更多知识与经验。
AI 展现了其在帮助我们轻松进入之前未知领域的强大能力，加速了我们的学习和开发过程。尽管 AI 的功能非常强大，但它尚未达到可以完全取代开发者的程度。当前，开发者与 AI 之间更多的是一种合作而非竞争的关系。
Astro
为了更好地体验和了解新的前端开发技术，我故意没有选择目前主流博客平台所采用的静态网站生成框架，而是转向了 Astro。
Astro 是一个现代化的前端框架，其设计初衷便是为了打造更加快速且高效的网站。我选择 Astro 的理由主要包括：
-
Astro 是一个具有丰富文档和活跃社区的现代前端框架。
-
它对静态站点有良好的支持，这意味着我无需对我的服务器配置进行升级。
-
它对 Markdown 文件有较好的集成。
-
Astro 能与其他任何前端框架结合使用，为未来的开发提供了广阔的可能性。
-
相较于其他框架，Astro 在数据流管理和交互性方面的简化使其更易于上手。
-
提供了先进的开发工具和构建优化，满足我体验当前前端开发技术的需求。
总结来说，Astro 提供了一个高效、灵活且性能卓越的解决方案，非常适合用于创建静态博客。它巧妙地融合了静态网站生成器的优势和现代前端框架的灵活性，我对这次的选择感到非常满意。
从零开始
尽管社区中有众多基于 Astro 的出色模板，但出于对框架深入学习和体验的考虑，我依然决定从零开始构建博客。
在这一重构过程中，AI 的辅助、Astro 的官方文档，以及 AstroWind 模板代码，对我帮助极大。Astro 提供了非常全面的官方文档（包括中文在内的多种语言版本），这不仅便于开发者学习，同时也为 AI 提供了丰富的语料资源。因此，在学习和开发阶段，AI 在解答与 Astro 相关的问题上表现出较高的成功率。这也表明了在与 AI 合作时，选择它熟悉的框架的重要性。
AstroWind 是一个基于 Astro 框架的全功能网站模板，通过研究其代码，让我能迅速理解一个完整且成熟的 Astro 项目的结构和功能实现。
当然，从零开始构建项目无疑是一个富有挑战性的过程，尤其是在采用全新的语言和框架的情况下。经过20多天构建足够的基础代码之后，博客的开发工作才真正进入了快速发展阶段。
实现博客的国际化（i18n）
鉴于我的博客需要同时支持中文和英文两种语言，我初步希望选用的框架能提供原生的国际化（i18n）支持。然而，当我开始着手于本次博客重构项目时，我发现 Astro 3.5 版本中只提供了一个功能有限的 i18n 支持的实验性版本。更重要的是，它对于不同语言路径的处理方式并不符合我的预期。因此，我最终决定在 Astro 框架中自行实现这一功能。
幸运的是，这部分工作的实现难度并不大。它主要涉及到路由配置、日期格式化、本地化字符串获取等几个关键方面。目前的实现已经能够满足我的需求。
TailwindCSS
在前端开发领域，TailwindCSS 似乎引起了不同的声音。一些开发者赞扬其提高了开发效率，而另一些人则认为它过于非传统。作为一个主要使用 SwiftUI 的开发者，我发现自己对 TailwindCSS 所采用的结构与风格统一的方法相当习惯和喜欢。
特别是在进行页面细节构建的过程中，我发现可以非常方便地从其他 TailwindCSS 模板库中直接提取代码，而无需单独处理风格文件。这使我能够迅速看到页面的初步雏形，随后进行必要的修改或重构。
我的新博客中的许多组件的原型都是从 Flowbite 和 Mamba UI 中获得的，并且我还使用了一部分 Flowbite 提供的交互性 JS 代码。
此外，@tailwindcss/typography 插件为 Markdown 内容提供了优雅的基本样式。我只需进行简单的调整，就能满足我的设计需求。对于以 Markdown 内容为主的博客网站来说，这极大地提升了设计效率。
MDX
在本次博客重构之后，我决定不再在其他平台同步发布文章。这一决策的一部分原因是为了更方便地维护现有文章，另一方面，我也希望在未来的文章创作中利用一些超出常规 Markdown 功能的能力。为此，我将之前的文章格式全部转换为以 .mdx 为后缀的文件。
在这一转换过程中，我发现 Astro 对于构建时的 .mdx 文件内容有较高的要求。许多之前未引起注意的细节（主要是某些可能被 MDX 视为指令的字符）会导致构建失败。这个过程确实让我花费了不少努力，尤其是因为编译器提示的位置和实际错误位置往往有一定的差异。
转换为 MDX 格式之后，一些在上一个使用 Publish 创建的博客中难以实现的问题现在变得简单许多。例如，在文章中自动添加特定内容。在之前的版本中，我需要创建一个 Ink 插件来实现一个自定义的 Markdown 指令。而现在，改用 MDX 后，我通过在文件中添加一个 JSX 指令并编写一个 remark 插件，就能实现更高的自由度和功能性。
TypeScript
基于我对强类型语言的偏好，在构建 Astro 项目时，我选择了 TypeScript 的最严格检查模式。虽然这在很多情况下确实为我提供了更清晰的错误提示，但它也相应地增加了从零开始创建项目的难度。
在编写服务端代码方面，TypeScript 为我提供了与 Swift 相似的编程体验，这是我非常欣赏的。然而，在与前端代码，特别是某些 JavaScript 代码协作时，强类型的要求和 Astro 对 .astro 文件中代码的特殊处理，确实在项目初期带来了一些挑战。
虽然在开发过程中也遇到了一些异常（主要通过清除项目缓存来解决），但总体来说，在 VSCode 中使用 TypeScript 进行开发和调试的过程还是相当顺畅且高效的。
站内搜索
为静态博客站点提供有效的静态搜索功能一直是一个挑战。在我之前的版本中，我通过在构建静态页面时创建一个检索字典来解决这个问题。当用户进行搜索时，实际上是通过下载该字典到本地，并利用 JavaScript 完成搜索的。然而，随着博客内容的增多，字典文件逐渐变大，导致用户初次搜索体验不佳。
在本次更新中，我决定尝试基于网络的检索服务。Algolia 是一个面向企业的搜索解决方案提供商，它为技术分享类网站提供免费的文件检索服务。我的博客符合他们的要求，因此申请过程相当顺利。
虽然在博客中集成 Algolia 的 DocSearch 服务相对简单，但要达到理想的搜索效果却不是一件轻松的事。目前的搜索结果显示过于碎片化，我还需要进一步调整服务器端爬虫的设置，以提供更有效的搜索结果。
部署、CDN 与 SEO
为了简化每次发布新文章时的工作流程，我决定实现自动化部署。由于 Astro 在构建过程中会生成全新且完整的输出版本（不进行差异比较），我利用 AI 开发了一系列小型工具代码。这些工具帮助我自动完成了一系列任务，从自动化部署到生成用于 CDN 更新的差异化文件列表，再到向搜索引擎提交新 URL。
由于新版本中目录结构和文件名（Astro 自动生成全部小写文件名）的变更，我还利用 AI 生成了一个用于 Nginx 的路径 Map 转换列表。这个列表通过 301 重定向确保了 SEO 的稳定性。
总的来说，AI 在这一部分发挥了巨大作用，显著提高了工作效率。值得一提的是，将任务细分并让 AI 为每个具体操作生成相应的工具代码，这样做可以提高 AI 代码生成的成功率。
2024 年见
随着 2024 年的脚步越来越近，我在这篇文章的尾声想向每位读者致以最诚挚的祝福。愿您在新的一年中身体健康，万事如意。让我们携手迎接充满希望和机遇的 2024 年。
如果您对博客的新版本有任何建议或想法，请在下方留言分享您的看法。
