我的博客终于上线了！

折腾了两个周末，我的个人博客终于上线了！说实话，这比我预想的要复杂一些，但也学到了不少东西。想在这里记录一下整个过程，也算是个小小的里程碑。

为什么要做这个博客？

其实我一直想有个自己的博客，但总觉得太麻烦。之前试过几个平台，要么限制太多，要么广告太多。最后还是决定自己动手，丰衣足食。

主要想通过这个博客：

• 记录技术学习笔记，免得到处找
• 分享一些项目经验，帮到有需要的人
• 练习写作，毕竟程序员也得会表达
• 顺便展示一下自己的技术能力

技术选型的纠结

一开始我在技术选型上纠结了很久：

方案一：静态站点生成器

• 优点：简单快速，免费托管
• 缺点：定制性差，功能有限

方案二：从头开始写

• 优点：完全可控
• 缺点：工作量太大，可能做不完

方案三：用现成框架（最终选择）

最后选了 Next.js，原因很简单：

• 我平时工作就在用，比较熟悉
• 性能好，SEO 友好
• 生态丰富，遇到问题容易解决
• 部署简单

开发过程中踩的坑

设计问题：完美主义害死人

一开始我想做个特别炫酷的设计，结果花了一个周末还在调 CSS。后来醒悟过来，先做个能用的再说。

现在的设计很简单，但我觉得够用了：

• 干净的排版，阅读体验好
• 响应式设计，手机也能看
• 暗黑模式，晚上看文章不刺眼

功能取舍：MVP 思维

我一开始想加很多功能：

• 评论系统
• 用户登录
• 文章点赞
• 搜索功能

后来意识到这些都不是核心功能，先砍掉，专注把基础功能做好。现在的博客只有：

• 文章列表和详情
• 标签分类
• 简单的搜索
• RSS 订阅

性能优化：意外的收获

本来以为性能优化很简单，结果发现坑不少：

// 图片懒加载，这个真的很有用
const LazyImage = ({ src, alt }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isInView, setIsInView] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsInView(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (imgRef.current) {
      observer.observe(imgRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={imgRef} className="lazy-image-container">
      {isInView && (
        <img
          src={src}
          alt={alt}
          onLoad={() => setIsLoaded(true)}
          style={{ opacity: isLoaded ? 1 : 0 }}
        />
      )}
    </div>
  );
};

这个简单的懒加载组件让页面加载速度提升了 40%，真是意外的收获。

部署的波折

Vercel 还是自建？

我一开始想自己租服务器部署，觉得这样更自由。但后来算了一下成本：

• 服务器费用：每月至少 50 元
• 维护时间：每周至少 2 小时
• 可靠性：自己处理各种问题

最后还是选择了 Vercel，虽然有一些限制，但省心太多了：

• 免费额度够用
• 自动部署
• CDN 加速
• SSL 证书自动处理

域名和 HTTPS

域名倒是简单，在阿里云买了个 .com 域名，一年 60 元。HTTPS 也不用自己配置，Vercel 自动处理了。

现在的技术栈

简单总结一下现在的技术栈：

• 前端：Next.js 15 + React 19 + TypeScript
• 样式：Tailwind CSS（写起来真的很爽）
• 部署：Vercel（免费版本）
• 域名：阿里云
• 图片存储：Vercel（暂时够用）

接下来的计划

博客只是个开始，我还有一些想法：

短期计划

• 多写几篇技术文章
• 优化搜索功能
• 添加文章统计
• 做个友链页面

长期想法

• 添加评论系统（可能用 GitHub Issues）
• 做个邮件订阅功能
• 开放 API 给其他开发者
• 也许做个移动端 App？

写在最后

做这个博客的过程比我想象的要长，但也学到了很多。不仅是技术上的，还有产品思维、用户体验等方面的思考。

如果你也在考虑做个个人博客，我的建议是：先做个能用的，再慢慢优化。完美主义是项目的大敌。

希望这个博客能坚持下去，也希望我的文章能帮到一些人。如果你有什么建议或者想交流，欢迎随时联系我！

最后，感谢你读到这里，这对我来说意义重大！