Generated based on Gridsome static site

Get into the habit of writing together! This is the 4th day of my participation in the "Nuggets Daily New Plan·April Update Challenge",Click to view event details。

Generated based on Gridsome static site

• GitHub repository:github.com/gridsome/gr…
• Official website:gridsome.org/

introduce

What is Gridsome?

• Gridsome is a free, open source, static website generator based on the Vue.js technology stack
• Gridsome is a Vue.js powered Jamstack framework for building statically generated websites and apps that are generated quickly by default.
• Gridsome is a Vue-powered static site generator for building CDN-ready websites for any headless CMS, local files or API
• Jamstack framework based on Vue.js

Gridsome usage scenarios

• Not suitable for citations 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 it once per update, but it may take some time.
• Not suitable for references with a lot of dynamic content
  • If the render route protects content specific to the user viewing its content or other dynamic resources, you should ensure there are corresponding placeholders
• want better SEO
• Want better rendering performance

Commonly used static website generators

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

Options

• VuePress
• Nuxt
• Gatsby.js

start

learning conditions

You should have a basic knowledge of HTML, CSS, Vue.js and how to use the terminal. Knowing how GraphQL works is beneficial, but not required. Gridsome is a great way to learn it.

Gridsomerequired Node.js（v8.3 +) and recommended Yarn.

1. Install Gridsome CLI

# 使用 yarn
yarn global add @gridsome/cli

# 使用 npm
npm install --global @gridsome/cli


# 查看是否安装成功
gridsome --version
复制代码

2. Create a Gridsome project

# 创建项目
gridsome create my-gridsome-site

# 进入项目中
cd my-gridsome-site

# 启动开发模式，或 npm run develop
gridsome develop
复制代码

Creating Gridsome directly here may not succeed directly, because Gridsome relies on a special third-party modulesharp,sharpIts role is to process pictures, such as compressing picture size and converting formats.

And again because I'm still dependentlibvipsAnd this package is very big, because our network problem is easy to fail the installation, so we need to do some special configuration

There are also some c++ plugins, so we also need to install some dependencies to compile

configure

• sharp configuration documentation

npm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips"
复制代码

• Configure the node-gyp build environment
  • github.com/nodejs/node…Configure according to documentation

Installed file structure

4. Try it yourself

• Create a component in the src/pagesdirectory.vue

5. Build

gridsome build
复制代码

Build results are output to the distdirectory .

Gridsome will build each route file as a separate HTML page.

6. Deployment

Build results can be deployed distto any web server.

For example, we use the Node.js command line tool hereserveto test the build results.

npm install -g serve

serve dist
复制代码

Or it can be deployed to other third-party hosting platforms:gridsome.org/docs/deploy…

Or your own server, you can!