盖茨比乔布斯_盖茨比介绍

盖茨比乔布斯

Gatsby is a platform for building apps and websites using React.

Gatsby是一个使用React构建应用程序和网站的平台。

It is one of the tools that allow you to build on a set of technologies and practices collectively known as JAMstack.

它是一种工具，使您可以建立在一组统称为JAMstack的技术和实践的基础上 。

Gatsby is one of the cool kids in the Frontend Development space right now. Why? I think the reasons are:

盖茨比目前是Frontend Development领域中最酷的孩子之一。 为什么？ 我认为原因是：

• the explosion of the JAMstack approach to building Web Apps and Web Sites
  JAMstack方法用于构建Web应用程序和网站的爆炸式增长

• the rapid adoption of the Progressive Web Apps technology in the industry, which is one of the key features of Gatsby

  渐进式Web应用程序技术在行业中的Swift采用，这是盖茨比的主要特征之一

• it’s built in React and GraphQL, which are two very popular and rising technologies

  它内置于React和GraphQL中 ，这是两种非常流行且正在崛起的技术

• it’s really powerful
  它真的很强大
• it’s fast
  它很快
• the documentation is great
  文档很棒
• the network effect (people use it, create sites, make tutorials, people know more about it, creating a cycle)
  网络效应(人们使用它，创建站点，制作教程，人们对此有所了解，创建周期)
• everything is JavaScript (no need to learn a new templating language)
  一切都是JavaScript(无需学习新的模板语言)
• it hides the complexity, in the beginning, but allows us access into every step to customize
  一开始它掩盖了复杂性，但允许我们进入每个步骤以进行自定义

All those are great points, and Gatsby is definitely worth a look.

所有这些都是很重要的一点，盖茨比绝对值得一看。

它是如何工作的？ (How does it work?)

With Gatsby, your applications are built using React components.

使用Gatsby，您的应用程序是使用React组件构建的。

The content you’ll render in a site is generally written using Markdown, but you can use any kind of data source, like an headless CMS or a web service like Contentful.

您将在网站中呈现的内容通常使用Markdown编写，但是您可以使用任何类型的数据源，例如无头CMS或诸如Contentful之类的Web服务。

Gatsby builds the site, and it’s compiled to static HTML which can be deployed on any Web Server you want, like Netlify, AWS S3, GitHub Pages, regular hosting providers, PAAS and more. All you need is a place that serves plain HTTP pages and your assets to the client.

Gatsby构建了网站，并将其编译为静态HTML，可以将其部署在所需的任何Web服务器上，例如Netlify ，AWS S3，GitHub Pages，常规托管服务提供商，PAAS等。 您所需要的只是一个为纯HTTP页面和您的资产提供给客户端的地方。

I mentioned Progressive Web Apps in the list. Gatsby automatically generates your site as a PWA, with a service worker that speeds up page loading and resource caching.

我在列表中提到了渐进式Web应用程序。 Gatsby通过服务工作者自动将您的网站生成为PWA，以加快页面加载和资源缓存。

You can enhance the functionality of Gatsby via plugins.

您可以通过插件增强Gatsby的功能。

安装 (Installation)

You can install Gatsby by running this in your terminal:

您可以通过在终端中运行以下命令来安装Gatsby：

npm install -g gatsby-cli

This installs the gatsby CLI utility.

这将安装gatsby CLI实用程序。

(when a new version is out, update it by calling this command again)

(当有新版本发布时，请再次调用此命令来更新它)

You create a new “Hello World” site by running

您可以通过运行来创建一个新的“ Hello World”站点

gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world

This command creates a brand new Gatsby site in the mysite folder, using the starter available at https://github.com/gatsbyjs/gatsby-starter-hello-world.

此命令使用https://github.com/gatsbyjs/gatsby-starter-hello-world上可用的启动程序在mysite文件夹中创建一个全新的Gatsby网站。

A starter is a sample site that you can build upon. Another common starter is default, available at https://github.com/gatsbyjs/gatsby-starter-default.

入门程序是可以构建的示例站点。 另一个常见的启动器是default ，可从https://github.com/gatsbyjs/gatsby-starter-default获得 。

Here you can find a list of all the starters you can use

在这里您可以找到所有可以使用的启动器的列表

运行盖茨比网站 (Running the Gatsby site)

After the terminal has finished installing the starter, you can run the website by calling

在终端安装完启动器之后，您可以通过以下方式运行网站

cd mysite
gatsby develop

which will start up a new Web Server and serve the site on port 8000 on localhost.

它将启动一个新的Web服务器，并在localhost的8000端口上服务该站点。

And here is our Hello World starter in action:

这是我们的Hello World入门实例：

检查现场 (Inspecting the site)

If you open the site you created with your favorite code editor (I use VS Code), you’ll find there are 3 folders:

如果您打开使用自己喜欢的代码编辑器创建的网站(我使用VS Code )，则会发现有3个文件夹：

• .cache, an hidden folder that contains the Gatsby internals, nothing you should change right now

  .cache ，一个包含Gatsby内部.cache的隐藏文件夹，您现在无需更改任何内容

• public, which contains the resulting website once you build it

  public ，其中包含构建后的结果网站

• src contains the React components, in this case just the index component

  src包含React组件，在这种情况下，仅包含index组件

• static which will contain the static resources like CSS and images

  static ，将包含静态资源，如CSS和图像

Now, making a simple change to the default page is easy, just open src/pages/index.js and change “Hello world!” to something else, and save. The browser should instantly hot reload the component (which means the page does not actually refresh, but the content changes - a trick made possible by the underlying technology).

现在，只需简单地更改默认页面即可，只需打开src/pages/index.js并更改“ Hello world！”即可。 去别的东西，然后保存。 浏览器应立即热重载该组件(这意味着该页面实际上并未刷新，但是内容发生了变化-底层技术可以实现这一技巧)。

To add a second page, just create another .js file in this folder, with the same content of index.js (tweak the content) and save it.

要添加第二页，只需在此文件夹中创建另一个.js文件，并使用相同的index.js内容(调整内容)并将其保存。

For example I created a second.js file with this content:

例如，我使用以下内容创建了second.js文件：

import React from 'react'

export default () => <div>Second page!</div>

and I opened the browser to http://localhost:8000/second:

然后打开浏览器到http：// localhost：8000 / second ：

链接页面 (Linking pages)

You can link those pages by importing a Gatsby-provided React component called Link:

您可以通过导入Gatsby提供的React组件Link来链接这些页面：

import { Link } from "gatsby"

and using it in your component JSX:

并在组件JSX中使用它：

<Link to="/second/">Second</Link>

添加CSS (Adding CSS)

You can import any CSS file using a JavaScript import:

您可以使用JavaScript导入来导入任何CSS文件：

import './index.css'

You can use React styling:

您可以使用React样式：

<p style={{
    margin: '0 auto',
    padding: '20px'
  }}>Hello world</p>

使用插件 (Using plugins)

Gatsby provides lots of things out of the box, but many other functionalities are provided by plugins.

Gatsby提供了许多开箱即用的功能，但是plugins提供了许多其他功能。

There are 3 kind of plugins:

共有3种插件：

• source plugins fetch data from a source. Create nodes that can be then filtered by transformer plugins

  源插件从源获取数据。 创建可以由变压器插件过滤的节点

• transformer plugins transform the data provided by source plugins into something Gatsby can use

  转换器插件将源插件提供的数据转换为盖茨比可以使用的数据

• functional plugins implement some kind of functionality, like adding sitemap support or more

  功能性插件可实现某种功能，例如添加站点地图支持或更多功能

Some commonly used plugins are:

一些常用的插件是：

• gatsby-plugin-react-helmet which allows to edit the head tag content

  gatsby-plugin-react-helmet ，允许编辑head标签内容

• gatsby-plugin-catch-links which uses the History API to prevent the browser reloading the page when a link is clicked, loading the new content using AJAX instead

  gatsby-plugin-catch-links ，它使用History API来防止浏览器在单击链接时重新加载页面，而是使用AJAX加载新内容

A Gatsby plugin is installed in 2 steps. First you install it using npm, then you add it to the Gatsby configuration in gatsby-config.js.

Gatsby插件的安装分为2个步骤。 首先，使用npm安装它，然后将其添加到gatsby-config.js的Gatsby配置中。

For example you can install the Catch Links plugin:

例如，您可以安装Catch Links插件：

npm install gatsby-plugin-catch-links

In gatsby-config.js (create it if you don’t have it, in the website root folder), add the plugin to the plugins exported array:

在gatsby-config.js (如果没有它，请在网站根目录中创建它)，将插件添加到plugins导出数组中：

module.exports = {
  plugins: ['gatsby-plugin-catch-links']
}

That’s it, the plugin will now do its job.

就是这样，插件现在可以完成其工作。

建立静态网站 (Building the static website)

Once you are done tweaking the site and you want to generate the production static site, you will call

调整完站点并要生成生产静态站点后，您将调用

gatsby build

At this point you can check that it all works as you expect by starting a local Web Server using

在这一点上，您可以通过使用以下命令启动本地Web服务器来检查它是否按预期工作

gatsby serve

which will render the site as close as possible to how you will see it in production.

这将使该网站尽可能接近您在生产中看到的方式。

部署方式 (Deployment)

Once you build the site using gatsby build, all you need to do is to deploy the result contained in the public folder.

使用gatsby build构建网站后，您需要做的就是部署public文件夹中包含的结果。

Depending on the solution you choose, you’ll need different steps here, but generally you’ll push to a Git repository and let the Git post-commit hooks do the job of deploying.

根据您选择的解决方案，这里将需要不同的步骤，但是通常您将推送到Git存储库，并让Git提交后挂钩完成部署工作。

Here are some great guides for some popular hosting platforms.

这是一些流行托管平台的重要指南 。

翻译自: https://flaviocopes.com/gatsby/

盖茨比乔布斯