[米随随] s5s5 ·

我的 Blog 改版了, 重回网页设计的黄金时代, 像素化!

💡 原文中文，约5500字，阅读约需13分钟。

📝

内容提要

本文讲述了作者将博客从WordPress迁移到Astro的过程，重现了2001-2004年的像素化设计风格。通过AI辅助完成数据迁移、评论系统和界面设计，提升了性能和用户体验。

🎯

关键要点

作者将博客从WordPress迁移到Astro，重现2001-2004年的像素化设计风格。
使用AI辅助完成数据迁移、评论系统和界面设计，提升性能和用户体验。
WordPress自带导出功能，方便将文章和评论导出为XML格式。
选择Astro的原因包括适合博客、支持Markdown、构建静态HTML和SSR。
使用wordpress-export-to-markdown工具将XML转换为Markdown，但转换后存在格式问题。
自建评论系统，使用SQLite数据库和Drizzle ORM，确保数据安全和管理方便。
评论数据迁移过程中遇到嵌套问题，通过分层导入解决。
实施多种安全措施以保护评论系统，包括蜜罐反垃圾和XSS防护。
后台管理系统支持评论管理和Markdown在线编辑器，提升写作效率。
系统架构采用Astro的混合渲染策略，静态和动态内容分开处理。
使用AI辅助设计UI，调整细节以达到复古风格。
实现天气、日历和播放器等小组件，增强用户互动体验。
AI在项目中提供架构设计、代码生成和文档编写等多方面支持。
迁移VPS环境至Debian 13，使用宝塔面板简化管理。
建立CI/CD流程，通过GitHub Actions自动化构建和部署。
用户访问架构通过CDN加速和安全防护，提升访问速度和安全性。
此次改版提升了性能，学习了新技术，并重温了经典设计。

🔎

延伸解读

技术选型的重要性

在博客迁移过程中，选择合适的技术栈至关重要。作者选择Astro作为新平台，因其支持Markdown和静态HTML构建，提升了网站性能。对于内容型网站，Astro的灵活性和高效性使其成为理想选择，尤其是在处理动态评论功能时。

数据迁移的挑战

数据迁移是一个复杂的过程，尤其是评论系统的嵌套结构。作者通过分层导入解决了parent_id的问题，确保评论的层级关系完整。这一过程提醒我们，在进行数据迁移时，必须仔细规划和测试，以避免数据丢失或格式混乱。

AI在设计中的应用

作者在UI设计中充分利用了AI的能力，通过与AI的互动调整细节，成功复刻了经典的像素化风格。这表明，AI不仅可以用于代码生成，还能在设计过程中提供创意支持，提升工作效率。

安全措施的必要性

在自建评论系统中，作者实施了多种安全措施，如蜜罐反垃圾和XSS防护。这强调了在开发任何在线平台时，安全性不可忽视，尤其是涉及用户交互的功能。确保系统安全可以有效防止垃圾评论和潜在的安全威胁。

❓

延伸问答

为什么作者选择将博客从WordPress迁移到Astro？

作者选择Astro是因为它适合博客，支持Markdown，构建静态HTML和SSR，且没有自带评论系统，给了作者搭建自定义评论系统的机会。

在数据迁移过程中遇到了哪些问题？

在数据迁移过程中，评论的嵌套关系导致层级混乱，作者通过分层导入解决了这个问题。

作者是如何提升评论系统的安全性的？

作者实施了蜜罐反垃圾、字段混淆、XSS防护、IP/UA记录和禁止链接等多种安全措施来保护评论系统。

AI在博客改版中起到了什么作用？

AI在项目中提供了架构设计、代码生成、文档编写等多方面支持，显著提高了效率。

作者如何实现复古风格的用户界面设计？

作者通过与AI的互动调整细节，使用Canvas设计页面，最终复刻了2002年的像素化设计风格。

此次博客改版的主要收获是什么？

此次改版让作者摆脱了WordPress，提升了性能，学习了新技术，并重温了经典的像素风设计。

🏷️