gatsbyjs_建立gatsbyjs网站的6个技巧

gatsbyjs

I’ve built 2 personal websites up to this date. The first one was how I taught myself the basics of web development 4 years ago. It was a simple Bootstrap website and far from being presentable. I had a separated Ghost blog website as well but it was a mess when I tried to customize it. After years of solidifying my skills, I went to search for a better alternative which is fast, customizable and easy to maintain. Thereon, I found Gatsby and built my second personal website. The entire experience is truly remarkable.

到目前为止，我已经建立了2个个人网站。 第一个是4年前我如何自学Web开发的基础知识。 这是一个简单的Bootstrap网站，远非可呈现。 我也有一个单独的Ghost博客网站，但是当我尝试对其进行自定义时，情况一团糟。 在多年巩固自己的技能之后，我去寻找更好的替代方法，该替代方法是快速，可定制和易于维护的。 在那里，我找到了盖茨比，并建立了我的第二个个人网站。 整个体验确实非凡。

In the process of learning how to use Gatsby, I took reference from Wes Bos and Kent C. Dodds’ Gatsby sites. It’s amazing to see how they utilize Gatsby to its core.

在学习如何使用Gatsby的过程中，我从Wes Bos和Kent C. Dodds的Gatsby网站获得了参考。 看到他们如何将盖茨比用作核心，真是太神奇了。

Here are some of the tips that I’ve find useful if you wish to start or improve your Gatsby project.

如果您希望启动或改善Gatsby项目，以下是一些有用的技巧。

1.带有React头盔的SEO (1. SEO with React Helmet)

You can build a reusable SEO component and override the default metadata with props in different pages. I have a default SEO component which has the basic HTML header, Facebook OpenGraph and Twitter metadata that represent the general pages. I would then override them with Markdown frontmatter data in my blog post pages so that they can be indexed and shared individually.

您可以构建可重用的SEO组件，并在不同页面中使用prop覆盖默认元数据。 我有一个默认的SEO组件，它具有基本HTML标头，代表常规页面的Facebook OpenGraph和Twitter元数据。 然后，我将在博客文章页面中使用Markdown前置数据覆盖它们，以便可以对它们进行索引和单独共享。

2.将布局包装在gatsby浏览器和gatsby-ssr中 (2. Wrap your Layout in gatsby-browser and gatsby-ssr)

If you have a general page design that you wish to apply to all of your pages, you can create a Layout component and add it to gatsby-browser and gatsby-ssr files like this:

如果您希望将通用页面设计应用于所有页面，则可以创建一个布局组件并将其添加到gatsby-browser和gatsby-ssr文件中，如下所示：

exports.wrapPageElement = ({ element, props }) => (
   <Layout {...props}>{element}</Layout>
);

Using the wrapPageElement API, Gatsby would automatically apply the Layout when it’s building your pages. It’s also worth mentioning that Layout will stay mounted. I had ran into issues with unmounting states when I was playing with animations and this can be solved by using this method. It’s still completely fine to apply Layout to each page yourself if your content are static.

通过使用wrapPageElement API，Gatsby将在构建页面时自动应用布局。 还值得一提的是，Layout将保持安装状态。 在播放动画时，我遇到了卸载状态问题，可以使用此方法解决。 如果您的内容是静态的，那么自己将Layout应用于每个页面还是完全可以的。

3.发挥Gatsby API的超能力 (3. Tap into the superpowers of Gatsby APIs)

It took me quite some time to understand the power of Gatsby APIs. The most common use cases would be for automating some building process. For example, I can query all the markdown files in createPages API and call the createPage action to build the pages with the path, template and add any context data that I want. This is how I generated all my blog posts. Essentially, you can have different page templates to build your Podcasts, Workshops, Book Reviews or whatever pages you want.

我花了很多时间来了解Gatsby API的功能。 最常见的用例是使某些构建过程自动化。 例如，我可以查询createPages API中的所有markdown文件，并调用createPage操作以使用路径，模板构建页面并添加所需的任何上下文数据。 这就是我生成所有博客帖子的方式。 本质上，您可以具有不同的页面模板来构建播客，研讨会，书评或所需的任何页面。

onCreateNode is also another helpful API that adds extra GraphQL node fields. For example, I’ve added a editLink field which is the post edit link in GitHub and I can query it inside my blog post template page.

onCreateNode也是另一个有用的API，它添加了额外的GraphQL节点字段。 例如，我添加了editLink字段，它是GitHub中的帖子编辑链接，我可以在我的博客帖子模板页面中查询它。

You can explore all the APIs here and find a use case for yourself.

您可以在此处浏览所有API ，并自己找到用例。

4.使用Gatsby Image插件 (4. Use Gatsby Image plugin)

At the very beginning, I was simply using img tags to for all my images. It’s not a good solution in terms of responsiveness. It would also be time-consuming for me to create images with different sizes and use them with picture tags.

在开始的时候，我只是对所有图像使用img标签。 就响应能力而言，这不是一个好的解决方案。 对我来说，创建不同大小的图像并将其与picture标签一起使用也将非常耗时。

This is where gatsby-image comes in place. It does all of the aforementioned process and even provides lazy loading. You can also choose between blurring and SVG tracing effect to add a touch of progressive loading user experience. It works with different CMS plugins that provides images as well.

这就是gatsby-image的位置。 它完成了所有上述过程，甚至提供了延迟加载。 您还可以在模糊效果和SVG跟踪效果之间进行选择，以增加渐进式加载的用户体验。 它可与提供图像的其他CMS插件配合使用。

5.您可能不需要集成CMS (5. You might not need to integrate a CMS)

This depends on the nature of your website obviously. If someone else is managing the content, integrating with a CMS like Contentful, Wordpress or Drupal would be the best.

这显然取决于您网站的性质。 如果其他人正在管理内容，则最好与Contentful，Wordpress或Drupal等CMS集成。

If you are simply building and managing your own website, you don’t necessary need a CMS. Sourcing from your local files is simpler than you think with community plugins like gatsby-source-filesystem. For example, I’m writing my blog posts in MDX locally. Publishing and editing are all done by pushing commits to my repository. This way you’ll have full control without relying on other services to serve the content.

如果您只是在构建和管理自己的网站，则不需要CMS。 与使用gatsby-source-filesystem类的社区插件相比，从本地文件中进行采购要简单得多。 例如，我在本地的MDX中撰写博客文章。 通过将提交推送到我的存储库即可完成发布和编辑。 这样，您将完全控制而不依赖其他服务来提供内容。

6.如果您托管在Netlify上，请激活增量构建 (6. Activate incremental build if you’re hosting on Netlify)

Deploying a Gatsby website to Netlify could take up a lot of time since it needs to generate all of pages one by one. The build time goes even higher if you have a lot of images.

将盖茨比网站部署到Netlify可能会花费大量时间，因为它需要一张一张地生成所有页面。 如果您有很多图像，则构建时间会更长。

I recommend following this guide to setup incremental build in Netlify. It uses the Gatsby cache plugin to help persist cache between builds and only rebuild files that have been changed. This significantly improves the build time of your website.

我建议按照本指南在Netlify中设置增量构建。 它使用Gatsby缓存插件来帮助在构建之间持久缓存，并且仅重建已更改的文件。 这大大缩短了网站的构建时间。

Thanks for reading!

谢谢阅读！

Feel free to checkout my website’s repo to see these tips in action and hopefully you’ll find them useful. I’ll happy to help if you have any questions.

随时查看我的网站的回购，以查看实际使用中的提示，希望您会发现它们有用。 如有任何疑问，我们将竭诚为您服务。

翻译自: https://medium.com/javascript-in-plain-english/6-tips-on-building-your-gatsbyjs-website-64203212aa4

gatsbyjs