使用 Gatsby 改造我的个人网站

注：本文最初发表于我的个人博客。我将其重新发布于此，供 DEV 社区使用。

时间好久了。我上次重新设计网站是在三年前，这在一定程度上导致这个网站的风格和内容都有些过时了。

先前的设计

为了稍微满足一下我的自尊心，我仍然喜欢我在 2016 年制作的东西。它远非完美，但它确实很好地呈现了我的内容和项目。

你可能会注意到我的新旧设计之间有一些相似之处，这其实是故意的。我们稍后会谈到这一点。

全新设计

你首先可能注意到的是深色主题。我决定切换是因为：

😎 它创造了一种干净的美感。

📖 它适合白天和晚上阅读。

🤷‍♂️ 呃，我真的更喜欢黑暗主题。

第二件事是的，我终于有logo了🎉！其实我早在2018年1月就设计好了，花了整整一年才最终用上，真是太不可思议了。我缺乏专业的平面设计技能，所以最终的简洁巧妙的设计让我很满意。有了logo，我就能更好地打造一个更具辨识度的品牌了。

好吧，我之前设计的主要问题是，访问我主页的用户会因为信息和操作过多而不知所措。我的意思是：

• 主导航图标含义不明。那个电子邮件图标会带你去新闻通讯或联系页面吗？所有这些都只是为了给一个只与博客相关的搜索框腾出空间。
• 我的简介里只提到了我是一名 Web 开发人员，以及我的工作地点。任何想真正了解我的人都应该知道如何点击导航栏中的人形图标来进入“关于”页面。说实话，我估计大多数人到那时就已经离开网站了。
• 你可以查看我的文章和项目列表，但新访客为什么要关注呢？我希望他们先了解我，然后才能通过访问相应的页面来表达对我内容的兴趣。
• 社交图标很小，而且埋在页脚里。我猜当时我可能没有像现在这样重视社交媒体。我也讨厌自己有那么多链接，好像我在所有这些平台上都很活跃（其实并没有）。

新设计解决了所有这些问题；我删除了“关于”页面、单个项目页面、主页上的最新文章和项目、搜索等等。现在任何新用户都可以访问我的主页并快速了解我。导航栏只剩下另外三个页面，你可以在那里找到我的项目、播客和文章。最棒的是，我的主要社交媒体资料链接在首屏上方。

我之前提到过，这两种设计有相似的特质。这是因为我相信创造永恒的设计，而不是追逐潮流的设计，所以每次重新设计时都不断改进，有助于品牌随着时间的推移而发展。

我相信创造永恒的设计而不是时髦的设计，因此每次重新设计时做出的改进有助于品牌随着时间的推移而发展。

我喜欢在设计中添加其他一些方面，例如微妙的动画，希望您注意到了：

☀️ 当您加载页面时，我的徽标中的“太阳光线”会升起并淡入。

👋 挥手和笔记本电脑表情符号在我的首页上动画，但只出现一次。

🚀 我首页上的火箭表情有无限飞行的动画效果。

↩️ 我的项目、播客和文章页面上的卡片具有摇摆效果。

最后，我在文章设计上投入了大量精力。我只是想让内容尽可能易读，为此我参考了《重构 UI 手册》中的一些建议。我尽量将字符长度控制在 80 个字符左右，并在每个字符、行和节之间留出足够的空间。由于我完全掌控着自己的平台，而不是像 Medium 这样的第三方平台，因此创造愉悦的阅读体验以吸引读者再次访问博客至关重要。

技术栈

虽然我很喜欢谈论设计，但我本身就是一名开发者。所以，让我们先来了解一下技术栈，聊聊真正有趣的事情。值得一提的是，整个网站都已在 GitHub 上开源，如果你想查看代码的话。

⚛️ Gatsby 与 React

我已经在使用一个名为Metalsmith的用 Node.js 构建的静态站点生成器，但它缺少我最近在Gatsby中遇到的许多功能。

以下是我决定使用 Gatsby 进行改造的主要原因：

• 它基于我熟悉的技术栈中已有的Node.js和React构建。React 的可重用组件模型非常有利于维护。
• 我不用考虑太多性能问题。很多最佳实践都已经融入其中，所以我可以专注于网站建设。
• 代码和内容的热重载意味着我可以非常快速地更新网站，而不必等待完全重建。

💅 样式组件

由于我已经在使用 React，这意味着我也可以利用我最喜欢的样式库styled-components。Twitter上关于 CSS-in-JS 是否是一种好的样式方法仍然存在争议，但在几个项目中使用之后，我认定它是好的。

使用 styled-components，我只需创建已附加样式的组件即可。它是完整的 CSS，并作为普通样式表包含在内，因此媒体查询、关键帧等功能均可正常工作。对了，既然我们现在只使用 JavaScript，就可以将 Sass 和其他预处理器抛在一边。

📖 GraphQL 和 MDX

我所有的文章都是用MDX编写的，并使用GraphQL进行检索。与 React 一样，GraphQL 也已被 Gatsby 使用，这给了我一个很好的机会来熟悉它。目前它只能获取本地 Markdown 文件，但如果我愿意，可以轻松引入完整的 CMS。

MDX 非常酷，而且非常适合。它允许我在 Markdown 文件中嵌入 React 组件，目前我就是这样嵌入 YouTube 视频、CodePen 笔和推文的。目前还没有什么特别之处，但我距离在文章中添加可运行的代码演示（无需第三方嵌入）只差一个组件了。

📣 Socialshares、Feather 和 React Kawaii

我认为还有一些其他杂项库值得一提。

当然，如果我不使用我自己的社交分享按钮（您可以在我的文章底部看到），那将是一种犯罪。

对于主页社交图标和其他 UI 图标，我使用Feather。

最后，最可爱的是，React Kawaii提供了 SVG 插图，可用于不同的 UI 状态（例如错误、空内容）。目前，您可以在404 页面和订阅新闻简报后看到它们。

你怎么认为？

我很想听听你对新设计和技术栈的看法，请在社交媒体上或在下方留言。我个人对网站的外观非常满意，并且非常享受搭建它的过程。希望这也意味着我会更频繁地写作。