今天一整天都花在了折腾博客上。起因只是我想给我的博客加一个个人作品页面。实现的时候想到可能不止一个作品，应该是一个列表，所以最好是动态创建页面，创建页面的动态数据用 JSON 保存，后来看到了 Gatsby 可以直接导入 JSON 和 Yaml 文件，发现 yaml 语法更简洁，于是选择用 Yaml 作为数据源。然后又发现刚好有一个叫 gatsby-transformer-yaml 的 gatsby 插件可以将 Yaml 文件转化成可以用 graphQL 查询的对象，但是当我在安装这个插件的时候 npm 每次都报错 unable to resolve dependency tree.，重试了好几次，每次都安装失败。我去网上搜索安装失败的报错信息，看到一个删除 node_modules，清除 npm 缓存的方法，想试一下，结果 node_modules 因为 windows 的权限问题一直删不掉，错误提示是需要另一个用户的权限。就这样从一个错误到了另外一个错误。我干脆把博客的代码库重新克隆下来，重新安装一次依赖。结果这个新克隆的仓库还是有同样的问题，这让我很烦躁。

我再仔细看了报错的信息，发现有可能是 nodejs 版本的问题，我又把 node 更新到了最新版，期间又出了错，但试了两次还是更新好了。随后又发觉有可能是 Gatsby 版本的问题，于是一狠心又把 Gatsby 从 3.x 的版本更新到了最新的 4.x 版本，看文档上说 4.x 相比 3.x 版本构建速度提升了 40%。我满心期待地升级完 Gatsby 之后，再把和新版不兼容的插件也更新到新版。发现好像是用一个 npm install 的选项参数 --legacy-peer-deps 可以正常安装。经过一番漫长的挣扎终于把 gatsby-transformer-yaml 这个插件安装上了。然后看教程学怎么用 graphQL 查询的数据动态创建页面。然后 createPage 怎么传递参数到模板，模板怎么用页面的参数查询数据。好不容易折腾出来了两个页面。

已经可以通过文件系统中指定路径的 Yaml 文件动态创建页面了，接下来就是给页面添加上样式。添加样式的过程中发现给元素起一个合适的类名实在是太难了，于是又想起了老朋友 tailwindcss。索性又安装了 tailwindcss，安装的过程也不是很顺畅。然后既然要换用 tailwindcss 了，那么之前的很多样式就可以删除了，于是替换样式又花了我好几个小时。tailwindcss 会重设浏览器的默认样式，而我博文章的页面本来需要浏览器的默认样式，这样一来我还得一个个地给把那些样式给加回来，这太麻烦了，我去官方文档找有没有简便一点的方法，然后就发现了 @tailwindcss/typography 这个插件，它只用给一个标签加上一个特定的类名，就可以恢复该标签内所有被 tailwindcss 重设的默认样式，或者是添加另一套排版的样式。为了方便统一样式，我还把一些元素拆分成了组件，有的组件可能仅是封装了特定的样式的 HTML 标签，也许不是很有提炼成组件的必要。但是这样组件化之后，写起来还挺方便的，也不用一串类名重复复制好多遍。

折腾到晚上，接下来要在产品页面做一个可以横向滚动的屏幕截图列表的两个导航按钮，分别负责将列表滚动到前一个屏幕截图的位置和后一个屏幕截图的位置。到了晚上脑子已经一团浆糊了，但是最终还是被我做出来了一个能用的。思路大概是点击向前/向后按钮的时候根据当前滚动的位置和滚动条的总长度的比例来计算当前是第几个元素，然后获取到当前元素的前/后一个元素，调用该元素的 scrollIntoView 方法。虽然说起来很简单，但是我想到这个方法可是不容易，从开始写到可以用的过程还出了好几次错误。

最后新页面也完成了，升级的依赖看上去也没什么问题了，准备推代码部署了。结果不知道是什么原因只要一同步远端的代码就会报错，试了好几次，好不容易有一次成功了，把新的代码推到了 GitHub。结果在部署的时候又出问题了：cloundflare page 构建的时候出错。重试了几次还是一样。看到错误信息好像是 node 版本不兼容的问题。但是我也不知道怎么改变部署时用的 node 版本。经过多次搜索得知，cloundflare page 在部署时会有一些环境变量，可以通过 NODE VERSION 这些个环境变量来指定部署时使用特定的 node 版本。经过我一番努力终于部署成功了。

今天一天不知道遇到了多少 bug，关于写代码的问题很少，大都是环境依赖的问题。环境问题真是让人头大。唯一值得欣慰的是新增的两个页面都还挺好看的，而且最终也都把问题解决了。