如果你想创建独属于你自己的博客，你可能会因为运用哪些技术和使用哪些工具而发愁。我们正处于一个信息大爆炸的的时代，选择实在太多太多了。

在此篇文章中，将详细介绍我的是怎么构建我的博客的。方便您在构建博客时，能给您提供些许思路。这不是一篇完整的搭建教程，或许能够提供一个大致的思考方向。

• Next.js 16.4.3
• React 19.2.7
• MDX 3.1.1
• Linaria 8.2.0
• algoliasearch 5.60.0

这份清单看起来有点冗余，也没有选择轻量级的解决方案，最重要的的几个原因：

1. 设计自主性：不依赖于某个博客主题，可以自由构建复杂交互的组件，不依赖于现成的主题。
2. 技术栈统一：采用React组件化开发，统一前端技术栈，降低多框架并行带来的学习和维护成本。
3. 内容扩展性：我的博客全部使用MDX构建内容体系，使用一流的MDX支持与扩展。
4. 性能与SEO：利用Next.js APP Router、Server Components、静态生成与服务端渲染能力，兼顾页面性能加载和动态功能扩展。
5. 架构灵活性：将内容存储、内容处理、页面进行展示解耦，
6. 长期可维护性：预留技术支持库、专题内容等功能扩展空间。

如果不是因为第二点和第四，我认为Astro是一个不错的候选项。

webpack 对比 turbopack 随着next.js 13 的正式发布，同时推出了下一代的打包工具 turbopack。性能上 turbopack 比其他的同类工具逊色不少。而我的博客也是用适配了turbopack。

内容组织

MDX结合了Markdown（轻量级标记语言）和JSX（在React中的JavaScript的语法扩展），能够在内容中嵌入自定义的React元素。使用它，可以更好的实现交互和动态的效果，也是我选择它的因素之一。

样式

纯css有很多的痛点，基于此，我调研了css-in-js方案，我认为linaria是一款非常优秀的工具。

通过WyW将Linaria和Next.js的Turbopack进行集成，以解决linaria与next.js遇到的各种奇奇怪怪的问题。

搜索

我选择使用algolia来暂时做本地的模糊搜索，可能后期根据需要，将接入人工智能；但当前阶段这个功能已经完全够用了。