每次启动一个新的 Gatsby 网站时,我都会做的几件事
由 Mux 赞助的 DEV 全球展示挑战赛:展示你的项目!
我非常喜欢 Gatsby.js。我的博客和其他一些网站都用它搭建。最近我一直在尝试一些入门方案——比如尝试TinaCMS,以及将我在 dev.to 上发布的文章展示到我自己的域名上。
我开始记录每次启动 Gatsby 网站时所做的操作,这样下次就能记住了,也想和大家分享一下。
升级所有依赖项
市面上有很多很棒的 Gatsby 初始模板。这让搭建网站变得相当轻松,节省了大量时间。在使用初始模板之前,我喜欢将所有依赖项都更新到最新版本。我使用我最喜欢的 yarn 命令来完成这项工作:
yarn upgrade-interactive --latest
这可能会搞砸一切。我想尽早知道,使用入门模板是否会迫使我继续使用过时的 Gatsby、React 等版本,或者需要花费大量精力进行更新。
使用毛线
我更喜欢使用 yarn 而不是 npm。我在 package.json 文件中查找并替换“npm run”,将其替换为“yarn”。我还删除了 package.lock 文件。
添加语言属性
当我查看 Gatsby starter 的演示时,我总是使用aXe 无障碍测试 Chrome 扩展程序,以确保生成的 HTML 中不会出现大量需要修复的错误。几乎每次我都会发现以下违规情况:
<html> element must have a lang attribute
这个问题比较严重,详情请参见此处。大多数 Gatsby 起始模板和主题都有简单的解决方法。
假设使用了Helmet 元素htmlAttributes,您可以使用prop 来设置元素的属性<html>:
<Helmet title={config.siteMetadata.title} htmlAttributes={{ lang: 'en' }} />
添加一些插件
Gatsby 插件非常有用。我一直想尝试利用 PWA 的离线缓存优势和实现 CSP 标头的安全性,所以我添加了这两个插件:
你还做些什么?
这就是我目前的清单。
文章来源:https://dev.to/shelob9/a-few-things-i-do-every-time-i-start-a-new-gatsby-site-5gd我错过了什么?请在推特上@Josh412 告诉我,或者在下方留言👇