发布于 2026-01-06 0 阅读
0

每次启动新的 Gatsby 网站时我都会做的几件事 DEV 的全球展示与讲述挑战赛,由 Mux 呈现:推介你的项目!

每次启动一个新的 Gatsby 网站时,我都会做的几件事

由 Mux 赞助的 DEV 全球展示挑战赛:展示你的项目!

我非常喜欢 Gatsby.js。我的博客其他一些网站都用它搭建。最近我一直在尝试一些入门方案——比如尝试TinaCMS,以及将我在 dev.to 上发布的文章展示到我自己的域名上

我开始记录每次启动 Gatsby 网站时所做的操作,这样下次就能记住了,也想和大家分享一下。

升级所有依赖项

市面上有很多很棒的 Gatsby 初始模板。这让搭建网站变得相当轻松,节省了大量时间。在使用初始模板之前,我喜欢将所有依赖项都更新到最新版本。我使用我最喜欢的 yarn 命令来完成这项工作:

yarn upgrade-interactive --latest
Enter fullscreen mode Exit fullscreen mode

这可能会搞砸一切。我想尽早知道,使用入门模板是否会迫使我继续使用过时的 Gatsby、React 等版本,或者需要花费大量精力进行更新。

使用毛线

我更喜欢使用 yarn 而不是 npm。我在 package.json 文件中查找并替换“npm run”,将其替换为“yarn”。我还删除了 package.lock 文件。

添加语言属性

当我查看 Gatsby starter 的演示时,我总是使用aXe 无障碍测试 Chrome 扩展程序,以确保生成的 HTML 中不会出现大量需要修复的错误。几乎每次我都会发现以下违规情况:

<html> element must have a lang attribute
Enter fullscreen mode Exit fullscreen mode

这个问题比较严重,详情请参见此处。大多数 Gatsby 起始模板和主题都有简单的解决方法。

假设使用了Helmet 元素htmlAttributes,您可以使用prop 来设置元素的属性<html>

<Helmet title={config.siteMetadata.title} htmlAttributes={{ lang: 'en' }} />
Enter fullscreen mode Exit fullscreen mode

添加一些插件

Gatsby 插件非常有用。我一直想尝试利用 PWA 的离线缓存优势和实现 CSP 标头的安全性,所以我添加了这两个插件:

这里有一篇关于 PWA 和 Gatsby 的好文章

你还做些什么?

这就是我目前的清单。

我错过了什么?请在推特上@Josh412 告诉我,或者在下方留言👇

文章来源:https://dev.to/shelob9/a-few-things-i-do-every-time-i-start-a-new-gatsby-site-5gd