This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

Gridsome

A free, open source static web site generator based on vue.js technology stack. Use Gridsome to quickly develop static web sites.

The official address: https://gridsome.org/docs/

  • What is a static web site builder
    • Static Site Builder is a tool that generates static HTML files and related resources using a series of configurations, templates, and data.
    • This feature is also called pre-render
    • The resulting web site does not require a server like PHP
    • It only needs to be placed on a Web server or CDN that supports static resources
  • Benefits of static websites
    • To save money
      • You don’t need a professional server, just space to host static files.
    • fast
      • Only content is transferred without processing by the back-end server
    • security
      • Without the execution of back-end programs, it is naturally more secure
  • Common static web site generator
    • Jekyll (Ruby)
    • Hexo (Node)
    • Hogo (Golang)
    • Gatsby (Node/React)
    • Gridsome (Node/Vue)
    • In addition, Next. Js, nuxt.js can also generate static websites, but they are more commonly thought of as SSR (server-side rendering) frameworks
  • JAMStack
    • Another nifty name for this type of static web site generator is JAMStack
    • JAMStack’s JAM is a combination of JavaScript, API, and Markup
    • 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 from the more open, and even from a number of different manufacturers.
  • For example Gridsome
    • Take the data from different channels, package it in Gridsome, and finally place it on a Web Server or CDN.
  • 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 into the client location, otherwise it can be a little weird. For example: blog, enterprise propaganda station this kind of document class comparison is suitable for static site, and like the background management system has a large number of dynamic content is not suitable.
    • Application scenarios of extreme experience

Install gridsome cli

npm install --global @gridsome/cli

  • Sharp contains c++ files and a c++ compiler environment. Sharp also relies on libvips.

  • You need to configure the Chinese Mirror to install Sharp effectively

    https://sharp.pixelplumbing.com/install#chinese-mirror

  • Nodejs c++ extension package. Nodejs c++ extension package.

    npm install -g node-gyp

    https://github.com/nodejs/node-gyp

    Still, you need a c++ compiler. NPM install –global Windows-build-tools py2.7/3.5/3.6/3.7/3.8(no matter which platform is required)

  • Executing installation Commands

    gridsome create my-gridsome-site

    Compiling from Source failed and needs to be configured in the hosts file

    199.232.4.133 raw.githubusercontent.com

  • The default route is automatically generated for files under Pages

  • NPM Run Build packages projects into static files that can be deployed on any server. Global install Serve was tested locally, and Serve Dist started a local server.

  • Gridsome packages pages with routing addresses. Whether the page routing is automatically contracted under Pages, manually configured in Gridsome.serve.js in the Grdisome project, or templates configured manually in Gridsome.config.js, the page template is packaged. Otherwise, if no route is available, the device is not packaged.

gridsome.config.js

Gridsome.org/docs/config…

siteName: StringCommon title for each page.// Configure the common title for each page. XXX is individually configured for each page (vue-meta metaInfo)
siteDesciption: StringConfigure meta tags for each page. siteDesciption:'Big front end'
titleTemplate: '%s - <siteName>'The title of the template configureWebpack: Obejct |FunctionSpecify the configuration of webpackCopy the code

Dynamic routing

  • File-based Dynamic Routes

    src/pages/user/[id].vue becomes /user/:id.
src/pages/user/[id]/settings.vue becomes /user/:id/settings.
Copy the code

  • Create Programmatic dynamic routes in Gridsome.server.js

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

  • page meta info

    Gridsome uses vue-meta to process meta information for a page

404 not found

  • Gridsome has a default 404 page. To customize a 404 page, add 404.vue in the Pages directory

The collection collection

  1. The collection contains many nodes, each corresponding to a page
  2. Prerender the data in the collection to the page

  • Create a collection,

    • Source plugins allow you to store data from sources such as wordpress/ Markdown into collections

    • Store interface data into a collection by retrieving interface data.

      // gridsome.server.js
const axios = require('axios')
module.exports = function (api) {
  api.loadSource(async actions => {
    const post = actions.addCollection('Posts')
    const { data: postData } = await axios.get(
      'https://jsonplaceholder.typicode.com/posts'
    )
    for (const item of postData) {
      post.addNode({
        id: item.id,
        title: item.title,
        content: item.body
      })
    }
  })
}
Copy the code

  • Query collection data with GraphQL

    Each collection created creates XXX and ALLXXX collections in GraphQL, with the former querying for a single data and the latter querying for a collection

    # Write your query or mutation here2Id and title # query {#posts(id: 2)Query {allPosts {edges {node {id id title}};Copy the code

  • How to query the data on the page, to pre-render the page

    https://gridsome.org/docs/querying-data/

    // This tag is the same as template
<page-query>
query {
  posts: allPosts {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>
Copy the code
    // template 
<li v-for="item in $page.posts.edges" :key="item.node.id">
	<g-link>{{ item.node.title }}</g-link>
</li>
Copy the code

    Open network and find that preview for the /posts2 path is blank because we are in development mode. So we need to package and start the server so that we can see the full results returned by the path.

    Dynamic data is statically translated into static pages through the data layer of GraphQL to form static pages.

  • There is node data in gridsome.server.js, and there should also be a template for the node (such as a template for article details – data obtained by ID). How is a node’s template defined?

    https://gridsome.org/docs/templates/

  • Define templates in gridsome.config.js

    module.exports = {
  // The route is configured
  // How to set paths and templates for collections,
  // Posts: path:String; SRC /templates/{Collection}. Vue is used as a template.
  templates: {
    Posts: [
      // This post is the name of the collection
      {
        path: '/posts/:id'.// This id is not a parameter and must be present in item. The path property is generated in the Posts collection with a value of/Posts /item.id.
        component: './src/templates/Post.vue'}}}]Copy the code

    This allows you to access /posts/:id using a route. When configured, you add a path attribute to the posts collection. The path is the ID of each item at /posts/. That’s why the ID can’t be messed up.