Make writing a habit together! This is the fourth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Based on static Gridsome site generation

  • GitHub Repository: github.com/gridsome/gr…
  • Liverpoolfc.tv: gridsome.org/

introduce

What is Gridsome?

  • Gridsome is a free, open source static web site generator based on the vue.js technology stack
  • Gridsome is a Jamstack framework powered by vue.js for building statically generated websites and applications that are quickly generated by default.
  • Gridsome is a static site generator supported by Vue for building sites that can be used for CDN for any headless CMS, local file, or API
  • Jamstack framework based on vue.js

Gridsome usage scenarios

  • References to pages with a large number of routes are not suitable
    • If your site has hundreds or thousands of routed pages, pre-rendering will be very slow. Of course, you only need to do it once per update, but it may take some time.
  • Not suitable for references with lots of dynamic content
    • If you protect content in a render route that is specific to the user viewing its content or other dynamic resources, make sure you have placeholders
  • Want to have better SEO
  • You want better rendering performance

Commonly used static web site generator

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

An alternative to

  • VuePress
  • Nuxt
  • Gatsby.js

start

Learning conditions

You should have a basic knowledge of HTML, CSS, vue.js, and how to use terminals. Understanding how GraphQL works is helpful, but not necessary. Gridsome is a good way to learn it.

Gridsome requires Node.js (v8.3 +) and recommends Yarn.

1. Install the Gridsome CLI

# to use yarn
yarn global add @gridsome/cli

# use NPM
npm install --global @gridsome/cli


Check whether the installation is successful
gridsome --version
Copy the code

Create a Gridsome project

# create project
gridsome create my-gridsome-site

# Enter the project
cd my-gridsome-site

Start development mode, or NPM Run Develop
gridsome develop
Copy the code

Creating a Gridsome might not work because the Gridsome relies on a special third-party module called Sharp, which handles image compression and formatting.

Because of the dependency on libvips and the size of the package, we had to do some special configuration because our network problems made it easy to install and fail

There are also c++ plug-ins, so we need to install some dependencies to compile

configuration

  • Sharp Configuration Document
npm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips"
Copy the code
  • Configure the Node-gyp compilation environment
    • Github.com/nodejs/node… Perform the configuration according to the documentation

The file structure is installed

4. Try it yourself

  • insrc/pagesCreate one in the directory.vuecomponent

5, build,

gridsome build
Copy the code

The build results are output to the dist directory by default.

Gridsome will build each routing file into a separate HTML page.

6, deployment,

You can deploy the build dist on any Web server.

For example, we used the Node.js command line tool serve to test the build results.

npm install -g serve

serve dist
Copy the code

Or you can deploy to another third-party hosting platform: gridsome.org/docs/deploy…

Or your own server, either way!