Gridsome introduction

  • Gridsome is a free, open source web site generator based on the Vue technology stack
  • The official website
  • Github

What is a static web site builder

  • Static Site Builder uses a set of configurations, templates, and data to generate static HTMl files and related tools
  • This feature is also called prerender
  • The resulting web site does not require a server like PHP
  • You only need to run it on the Web Server or CDN of static resources

Benefits of static websites

  • To save money, you don’t need a professional server, just space to host static files
  • Fast transfer of content without going through the backend server
  • Security Without the execution of back-end programs, it is naturally more secure

Common static web site generator

  • Jekyll (Ruby)
  • Hexo (Node)
  • Hugo (Golang)
  • Gatsby (Node/React)
  • Gridsome (Node/Vue)
  • In addition, Next. Js, nuxt.js can also generate static websites, but they are more considered SSR (server rendering) frameworks

JAMStack

  • Another nifty name for this type of static web site generator is JAMStack
  • JAMStack’s JAM is an acronym for JavaScript, API, and Markup that is essentially a fat front end that calls various apis to achieve more functionality
  • In fact, it is also a model of the front and back end, but more apart, and even from a number of different vendors

Static application scenarios

  • Not suitable for applications with a large number of routed pages
    • If your site has hundreds or thousands of routed pages, pre-rendering will be very slow. Of course, you only need to do this once per update, but it may take some time. Most people don’t end up with thousands of statically routed pages, just in case
  • Not suitable for applications with lots of dynamic content
    • If the render route contains content specific to the user viewing its content or other dynamic sources, make sure you have placeholder components that can be displayed until the dynamic content is loaded to the client. Otherwise it might be a little weird

Second, the Gridsome foundation

Create a Gridsome project

  • node-gyp
npm install -g node-gyp
Copy the code

  • Install Gridsome scaffolding
Yarn Global add @gridsome/cli NPM install --global @gridsome/cli gridsome create gridsome-blog // initialize the project CD gridsome-blog  gridsome developCopy the code

Install dependencies slowly, no progress bar, solution:

  • Interrupt current installation
  • Go to the generated project directory and delete the current node_modules
  • You can see the progress by executing NPM Install
  • Once the dependencies are installed, run NPM Run Develop to start the project

The effect after startup is as follows:

pre-rendered

Package to generate the dist directory

yarn build
Copy the code

Install the Web static server

 npm i -g serve
Copy the code

Deploy the Build folder to the server

serve dist
Copy the code

The effect is as follows:

Open the console and see that a pre-rendered HTML file is returned

The directory structure

  • Gridsome.config.js Gridsome configuration file
  • Gridsome.server. js is also a girdsome configuration file, which is used to configure the server, gridsome internal service configuration.
  • A special feature of default. vue is that query is dedicated to querying Gridsome data for use by components
  • Components puts some common components
  • Static Static resources
  • Dist Package file
<static-query>
query {
  metadata {
  siteName
  }
}
</static-query>
Copy the code

Project configuration

View the Gridsome configuration

module.exports = {
  siteName: 'Grisome'.// The name on the page
  pathPrefix: '/strapi'.// Path prefix, whether the deployment has subdirectories
  templates: {}, // Define the routing template
  configgureWebapck: {}, / / the type Object | Function webpack configuration
  siteDescription: 'learning'./ / meta name
  plugins: [] // Configure the plug-in
}
Copy the code

Pages

Pages is the routing component of our project, which eventually generates a routing page that becomes static HTML when compiled

There are two creation methods

  • Create a new file in the Pages file, for example, demo.vue
  • API based creation
/ / gridsome. Server. Js configuration
api.createPages(({ createPage }) = > {
   // Use the Pages API here: https://gridsome.org/docs/pages-api/
   createPage({
     path: '/demo'.component: './src/templates/demo.vue'})})Copy the code

Dynamic routing The name of the page file created under pages is enclosed in square brackets as the dynamic routing parameter: SRC /pages/user/[id].vue

<template>
  <h1>
    User {{ $route.params.id }} Page
   </h1>
</template>

<script>
export default {
  name: 'UserPage'
}
</script>
Copy the code

The API to create

api.createPages(({ createPage }) = > {
  createPage({
    path: '/user/:id(\\d+)'.component: './src/templates/User.vue'})})Copy the code

Add a collection

Create a Demo component

<template>
  <Layout>
      <h1>demo</h1>
      <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
    </Layout>
</template>

<script>
import axios from 'axios'
export default {
  name: 'demo',
  data () {
    return {
      posts: []}},async created () {
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    this.posts = data
  }
}
</script>
Copy the code

Rendering in this way is not static rendering, it is dynamically loaded on the client side, we need to pre-render data into the page pre-render data

// gridsome.server.js
const axios = require('axios')

module.exports = function (api) {
  api.loadSource(async ({ addCollection }) => {
    const collection = addCollection('Post')

    const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')

    for (const item of data) {
      collection.addNode({
        id: item.id,
        title: item.title,
        content: item.body
      })
    }
  })
}
Copy the code

Query data in GraphQl

Go to http://localhost:8080/___explore

query {
  post (id : 2) {
    id
    title
    content
  }
}
Copy the code

Query GraphQl on the page

  • Use in components<static-query></static-query>
  • Used in page routing<page-query></page-query>
<template>
  <Layout>
      <h1>Posts2</h1>
      <ul>
        <li v-for="edge in $page.posts.edges" :key="edge.node.id">
          <g-link to="/">{{edge.node.title}}</g-link>
        </li>
      </ul>
    </Layout>
</template>

<script>
export default {
  name: 'Posts',}</script>

<page-query>
query {
  posts: allPost {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>
Copy the code

Render node pages using templates

Templates for collections: Configures the routing template

// gridsome.config.js
module.exports = {
  siteName: 'Hook education'.siteDescription: 'Big front end'.plugins: [].templates: {
    Post: [{path: '/posts/:id'.component: './src/templates/Post.vue'}}}]Copy the code

Create a post. vue pre-rendered page and get the data from GraphQL

<template>
  <Layout>
    <h1>{{$page.post.title}}</h1>
    <p>{{$page.post.content}}</p>
  </Layout>
</template>

<page-query>// ID! Query ($id: id!) { post(id: $id) { id title content } }</page-query>

<script>
export default {
  name: 'PostPage',
  metaInfo () {
    return {
      title: this.$page.post.title
    }
  }
}
</script>
Copy the code