Gridsome入门

The era of Static Site Generators is changing over time, a lot of cool tools are being created to help foster the JAMStack evolution and developers are embracing these tools. One of the tools for creating blazing fast websites is Gridsome.

静态站点生成器的时代随着时间的推移而改变，正在创建许多很酷的工具来帮助促进JAMStack的发展，并且开发人员正在拥抱这些工具。 Gridsome是创建超快速网站的工具之一 。

In this article, we’ll be taking a look at how to use Gridsome to create a sample profile listing site, its major features and how it compares to other Static Sites Generators.

在本文中，我们将研究如何使用Gridsome创建示例配置文件列表网站，其主要功能以及与其他静态网站生成器的比较。

什么是静态网站生成器？ ( What is a Static Site Generator? )

Remember how we used to play around with plain HTML sites with a little drop of CSS here and there I used to do that a lot when I started learning. You will naturally call that site we end up building a static site right because there’s no form of dynamic action going on. This is a true fact but it spans over having a static HTML page rendered. Static Site Generators are a new, hybrid approach to web development that allows you to build a powerful, website locally on your computer but pre-builds the site into static files for deployment.

请记住，我们过去常常在这里放一些CSS，然后在纯HTML站点上玩耍，在开始学习时，我经常这样做。 您自然会称该站点为我们最终建立的静态站点，因为没有任何形式的动态动作在进行。 这是一个真实的事实，但是它涵盖了呈现静态HTML页面的整个过程。 静态站点生成器是一种用于Web开发的新的混合方法，允许您在计算机上本地构建功能强大的网站，但可以将站点预先构建为静态文件以进行部署。

什么是Gridsome？ ( What is Gridsome? )

Gridsome is a Vue-powered static site generator for building blazing fast static websites. It is data-driven meaning it uses a GraphQL layer to get data from different sources in order to dynamically generate pages from it. Gridsome is the Vue alternative to Gatsby for React.js.

Gridsome是Vue支持的静态网站生成器，用于构建快速的静态网站。 它是数据驱动的，意味着它使用GraphQL层从不同来源获取数据，以便从中动态生成页面。 Gridsome是Gatsby for React.js的Vue替代品。

网格物体的特征 ( Features of Gridsome )

Gridsome ships with a lot of great features that makes building a static site with Gridsome a great choice. Some of the features it offers includes:

Gridsome具有许多强大的功能，这些功能使使用Gridsome构建静态站点成为一个不错的选择。 它提供的一些功能包括：

• Hot-reloading development - See changes in real-time while developing.
  热加载开发-在开发过程中实时查看更改。
• Vue.js for front-end - Ultra lightweight and approachable front-end framework.
  面向前端的Vue.js-超轻巧且易于访问的前端框架。
• GraphQL data layer - Centralized data management for all your data.
  GraphQL数据层-集中管理所有数据。
• Automatic page routing - Quickly create and manage pages with files.
  自动页面路由-快速创建和管理包含文件的页面。
• Progressive image support - Auto resize, optimize & lazy load images.
  渐进式图像支持-自动调整大小，优化和延迟加载图像。
• Auto page prefetching - Pages are loaded in the background for fast browsing.
  自动页面预取-页面在后台加载以快速浏览。
• Auto optimized code - Get code-splitting and asset optimization out-of-the-box.
  自动优化的代码-开箱即用地进行代码拆分和资产优化。
• Fast static page generating - Deploy securely and fast to any Static Web Host.
  快速静态页面生成-安全快速地部署到任何静态Web主机。
• Data source plugins - Add data from popular Headless CMSs, APIs or Markdown-files.
  数据源插件-从流行的Headless CMS，API或Markdown文件添加数据。

Gridsome如何工作？ ( How Gridsome Works? )

Gridsome is a website framework that enables us to create fast blazing static sites and how it works is it fetches data from data sources like CMSs, local files or external APIs and store the data in a local database. GraphQL acts as a centralized data management system that manages the data and gives you the ability to extract and use data within your vue components. For development, Gridsome provides a command gridsome develop that starts the local server with hot-reloading and a GraphQL data layer. And for production, the gridsome build command prepares the site for production by bundling and generating HTML files that can be hosted and deployed to any global CDN or FTP.

Gridsome是一个网站框架，使我们能够创建快速增长的静态站点，并且它如何从CMS，本地文件或外部API等数据源中获取数据并将其存储在本地数据库中。 GraphQL充当集中式数据管理系统，用于管理数据，并使您能够提取和使用vue组件中的数据。 为了进行开发，Gridsome提供了命令gridsome develop ，该命令通过热重载和GraphQL数据层启动本地服务器。 对于生产而言， gridsome build命令通过捆绑并生成可以托管并部署到任何全局CDN或FTPHTML文件来为生产准备站点。

与其他静态站点生成器的比较 ( Comparison with Other Static Site Generators )

Along with Gridsome, there are other Static Site Generators available to create your website. I’ll compare Gridsome alongside some other Static Site Generator like Gatsby, Nuxt, Vuepress.

除了Gridsome之外，还有其他静态网站生成器可用于创建您的网站。 我将Gridsome与其他静态站点生成器（如Gatsby，Nuxt，Vuepress）进行比较。

建立一个网格站点 ( Building a Gridsome Site )

先决条件 ( Prerequisite )

In order to follow this tutorial, You’ll need to have the following setup:

为了遵循本教程，您需要进行以下设置：

• Node v8.0 or higher
  节点 v8.0或更高版本
• NPM (this comes packaged with Node) or Yarn.
  NPM（与Node一起打包）或Yarn。
• Basic knowledge of JavaScript and Vue
  JavaScript和Vue的基础知识

安装Gridsome ( Installing Gridsome )

The first thing we’ll do is to check that Node and npm is installed.

我们要做的第一件事是检查Node和npm是否已安装。

node --version && npm -v

Then, you can install Gridsome CLI by running the following command:

然后，您可以通过运行以下命令来安装Gridsome CLI ：

yarn global add @gridsome/cli
// or
npm install --global @gridsome/cli

Next step is to create a new project using the CLI we just installed:

下一步是使用我们刚刚安装的CLI创建一个新项目：

gridsome create gridsome-site

Once that is done installing we can run the Gridsome site with this command:

安装完成后，我们可以使用以下命令运行Gridsome站点：

cd gridsome-site && gridsome develop

Voila! There you have it, your gridsome site is up and running on port 8080. Gridsome also provides a GraphQL playground environment for testing out queries. And you’ll find it running at http://localhost:8080/___explore.

瞧！ 有了它，您的gridsome站点就已启动并在端口8080上运行。Gridsome还提供了GraphQL游乐场环境来测试查询。 您会发现它运行在http://localhost:8080/___explore 。

资料夹结构 ( Folder Structure )

We’ll be exploring the folder structure of a gridsome site. In order to fully grasp what Gridsome can do we need to fully understand what each file within the project is specifically used for.

我们将探索网格站点的文件夹结构。 为了完全掌握Gridsome的功能，我们需要充分了解项目中每个文件的特定用途。

.
├── package.json
├── gridsome.config.js
├── gridsome.server.js
├── static/
└── src/
    ├── main.js
    ├── layouts/
    │   └── Default.vue
    ├── pages/
    │   ├── Index.vue
    │   └── Blog.vue
    └── templates/
        └── BlogPost.vue

Gridsome starter comes fully baked with all the files we need for developing a site, we can see there are already a couple of files in the project directory.

Gridsome Starter完全包含了开发站点所需的所有文件，我们可以看到项目目录中已经有几个文件。

• package.json - This is where all the dependencies for the project will be stored.
  package.json-这是项目所有依赖项的存储位置。
• gridsome.config.js - This file serves as a configuration file for the gridsome site where you configure plugins.
  gridsome.config.js-该文件用作配置插件的网格站点的配置文件。
• gridsome.server.js: This file is optional and is used to hook into various parts of the Gridsome server.
  gridsome.server.js：此文件是可选的，用于挂接到Gridsome服务器的各个部分。
• /src directory: This folder is where most of the code lives, we have:
  • main.js - This file contains the application configuration such that it plugs in other parts of the app into the gridsome API.
  • Layouts/ - Layout components are used to wrap pages and templates. The layout component is located in the src/layouts folder and should be indicated as the global component. It also requires a slot component which inserts the content of pages and template components into the layout.
  • Pages/ - The pages are individual components, every component in the pages directory becomes a page on the website. Each page will get its path based on the .vue file location. i.e src/pages/Index.vue will become the homepage and src/pages/about will be rendered as the about page.
  • Templates/ - Templates are used for single post views to GraphQL collections. To add a template create .vue file with the same name as a GraphQL collection to src/templates.
  / src目录：大多数代码存放于此文件夹中，我们具有：
  • main.js-该文件包含应用程序配置，以便将应用程序的其他部分插入网格API。
  • 布局/-布局组件用于包装页面和模板。 布局组件位于src/layouts文件夹中，应指示为全局组件。 它还需要一个slot组件，该组件可将页面和模板组件的内容插入到布局中。
  • Pages /-页面是单独的组件，页面目录中的每个组件都将成为网站上的页面。 每个页面都将基于.vue文件位置获取其路径。 即src/pages/Index.vue将成为主页，而src/pages/about将被呈现为src/pages/Index.vue页面。
  • 模板/-模板用于GraphQL集合的单个帖子视图。 要添加模板，请在src/templates创建一个与GraphQL集合同名的.vue文件。
• /static directory: This directory can be used to store files that will be copied directly to the dist/ folder after the build for example /static/robot.txt.Plugins
  / static目录：此目录可用于存储将在构建后直接复制到dist /文件夹的文件，例如/static/robot.txt 。

With Plugins enabled you can have additional functionalities tied to your Gridsome App. Plugins options are added to gridsome.config.js. In this tutorial, we’ll be building a profile listing site and we will need the gridsome/source-faker plugin to help populate data to the site. Let’s go ahead and set that up.

启用插件后，您可以将其他功能绑定到Gridsome应用程序。 插件选项已添加到gridsome.config.js 。 在本教程中，我们将构建一个个人资料列表网站，我们将需要gridsome / source-faker插件来帮助将数据填充到该网站。 让我们继续进行设置。

外挂程式 ( Plugins )

With Plugins enabled you can have additional functionalities tied to your Gridsome App. Plugins options are added to gridsome.config.js. In this tutorial, we’ll be building a profile listing site and we will need the gridsome/source-faker plugin to help populate data to the site. Let’s go ahead and set that up.

启用插件后，您可以将其他功能绑定到Gridsome应用程序。 插件选项已添加到gridsome.config.js 。 在本教程中，我们将构建一个个人资料列表网站，我们将需要gridsome / source-faker插件来帮助将数据填充到该网站。 让我们继续进行设置。

Install the plugin using the command:

使用以下命令安装插件：

yarn add @gridsome/source-faker 
or 
npm install @gridsome/source-faker

And add the following to the gridsome.config.js file.

并将以下内容添加到gridsome.config.js文件中。

module.exports = {
  siteName: 'Fancy Random Profile',
  siteUrl: '',
  siteDescription: 'A directory listing of random profiles',
  plugins: [
    {
      use: '@gridsome/source-faker',
      options: {
        numNode: 50
      }
    }
  ]
}

设置布尔玛样式 ( Setup Bulma for Styling )

In this tutorial, I'll be using Bulma for styling and in order to set it up I'll have to add the following lines in main.js file. I'm using Bulma CDN all I need to do is that the link to the head of the generated html file.

在本教程中，我将使用Bulma进行样式设置，并且要进行设置，必须在main.js文件中添加以下几行。 我正在使用Bulma CDN，我所要做的就是链接到生成的html文件的头部。

import DefaultLayout from '~/layouts/Default.vue'

export default function (Vue, {router, head, isClient}) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
  head.link.push({
    rel: 'stylesheet',
    href: '//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css'
  })
}

使用GraphQL查询数据 ( Querying data with GraphQL )

With Gridsome there are several ways of getting data into your site. Gridsome makes use of GraphQL for data management. Now that we have setup the plugin let’s check out the GraphQL playground and the queries we have access to. Run yarn develop and navigate to http://localhost:8080/\_\_\_explore

使用Gridsome，有几种方法可以将数据导入您的站点。 Gridsome利用GraphQL进行数据管理。 现在我们已经设置了插件，让我们检查GraphQL游乐场和我们可以访问的查询。 运行yarn develop development并导航到http：// localhost：8080 / \ _ \ _ \ _explore

There’s a documentation of all queries and we can see the faker and allFaker queries has been added as a result of the gridsome/source-faker plugin we installed. This data will be used to populate the site we’re building. Now let’s create the profile page.

这里有所有查询的文档，我们可以看到安装了gridsome/source-faker插件后，faker和allFaker查询已添加。 此数据将用于填充我们正在构建的网站。 现在，让我们创建个人资料页面。

显示布局组件 ( Displaying the Layout Component )

The site we’ll be building will require us to create two pages. First one will be a page with a list of all profiles and the other page which will be the About page will contain details about the site. With Gridsome we have the layouts which are used to wrap pages components. So let’s create a layout called Default.vue and add the following code into it.

我们将要建立的站点将要求我们创建两个页面。 第一个页面是一个包含所有配置文件列表的页面，另一个页面是“关于”页面，其中包含有关该站点的详细信息。 有了Gridsome，我们有了用于包装页面组件的布局。 因此，让我们创建一个名为Default.vue的布局，并将以下代码添加到其中。

<template>
  <div class="container">
    <header class="header">
      <g-link class="title is-size-3" :to="{ name: 'home'}">{{ $static.metaData.siteName }}</g-link>
      <g-link class="subtitle is-size-3" :to="{ name: 'about' }">About</g-link>
    </header>
    <slot/>
  </div>
</template>

You can query data from GraphQL in a Layout component using the static-query like this:

您可以使用static-query从Layout组件中的GraphQL查询数据，如下所示：

<static-query>
query {
  metaData {
    siteName
  }
}
</static-query>

In the Default.vue file we can see the static-query what this does is it enable you plugin in data from GraphQL into your layout component. Now we are fetching the sitename from Metadata query and using it within the template $static.metaData.siteName. Also by passing in <slot /> we are displaying content of the pages component.

在Default.vue文件中，我们可以看到static-query作用是它使您可以将GraphQL中的数据插入到布局组件中。 现在，我们从Metadata查询中获取站点名称，并在模板$static.metaData.siteName使用它。 同样，通过传递<slot />我们将显示页面组件的内容。

显示页面组件 ( Displaying the Pages Component )

Now in order to create the page for displaying random profile, we’ll create an Index.vue file within the pages directory. By default the Index.vue become the homepage in this case, we’ll also create an About.vue component.

现在，为了创建用于显示随机配置文件的pages ，我们将在pages目录中创建一个Index.vue文件。 默认情况下，在这种情况下， Index.vue成为主页，我们还将创建一个About.vue组件。

<template>
  <Layout>
    <div class="content">
      <div class="card" v-for="edge in $page.allFaker.edges" :key="edge.node.id">
        <div class="card-content columns">
        <div class="column is-2">
          <figure class="image is-128x128">
            <img class="is-rounded" :src="edge.node.avatar">
          </figure>
        </div>
        <div class="column">
          <p class="title"> {{ edge.node.author }}</p>
          <p class="subtitle"> <i class="has-text-dark">Contact Email:</i> {{ edge.node.email.src }}</p>
          <p class="subtitle"> <i class="has-text-dark"> Profile: </i> {{ edge.node.title }}</p>
        </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

The page-query is also used for querying data from GraphQL and still does the same thing as static-query only difference is, it is used specifically for Pages and Templates.

page-query还用于从GraphQL查询数据，并且仍然与static-query具有相同的功能，唯一的区别是，它专门用于页面和模板。

<page-query>
query allFaker {
  allFaker (perPage: 10) {
    edges {
      node {
        email,
        author,
        avatar,
        title,
      }
    }
  }
}
</page-query>

And for the About Page, we are not really querying any data from GraphQL all we just have is a text describing what the site is all about.

对于“关于页面”，我们实际上并没有从GraphQL查询任何数据，我们只拥有描述站点内容的文本。

<template>
  <Layout class="content">
    <p class="title is-4">
      Fancy Random Profile is a website listing random people's profile and details.
    </p>
   <a href="https://github.com/lauragift21/scotch-gridsome">GitHub Repo Available here</a>
  </Layout>
</template>
<script>

Great! We have just completed the profile listing site and here’s what it looks like. You can run yarn develop to start the server.

大！ 我们刚刚完成了个人资料列表网站，这是它的外观。 您可以运行yarn develop启动服务器。

部署方式 ( Deployment )

Deploying a gridsome site is usually not a difficult task as tools like Netlify, Zeit Now, GitHub Pages etc are readily available to help out. We’ll be using Netlify to deploy the app we built in this tutorial. To deploy your Gridsome site to Netlify, head over to the Netlify platform and create a new site page, select your project repo from GitHub, GitLab, or Bitbucket and add the following build configuration.

部署网格站点通常不是一件容易的事，因为诸如Netlify，Zeit Now，GitHub Pages之类的工具随时可以提供帮助。 我们将使用Netlify部署我们在本教程中构建的应用程序。 要将Gridsome站点部署到Netlify，请转到Netlify平台并创建一个新站点页面，从GitHub，GitLab或Bitbucket中选择项目仓库，然后添加以下构建配置。

After adding that, click the deploy site button and that should run a build and generate a link to your site. You can check out the profile lisitng site here.

添加后，单击部署站点按钮，该按钮应运行构建并生成指向您的站点的链接。 您可以在此处查看个人资料的lisitng网站。

结语 ( Wrapping Up )

In this tutorial, You’ve learned what Gridsome is all about and how to build a static site using Gridsome and also you learned to use its awesome GraphQL layer to query data. Let this not be the end you can explore more by checking out the JAMStack and possibilities of integrating other API to your site using the JAMStack concept.

在本教程中，您已经了解了Gridsome的全部内容，以及如何使用Gridsome构建静态站点，还学习了使用其出色的GraphQL层查询数据。 让这不是结束，您可以通过检查JAMStack以及使用JAMStack概念将其他API集成到您的站点的可能性来进行更多探索。

翻译自: https://scotch.io/tutorials/getting-started-with-gridsome