3-4-Gridsome 生成静态站点的基础

1. Gridsome是什么

• 一个免费、开源、基于VUE.js技术栈的静态网站生成器
• 官方网址：https://gridsome.org
• GitHub: https://github.com/gridsome/gridsome

2. 什么是静态网站生成器

• 静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具
• 这个功能也叫做预渲染
• 生成的网站不需要类似PHP这样的服务器
• 只需要放到支持静态资源的WebServer或者CDN上即可运行

3. 静态网站的好处

• 省钱：不需要专业的服务器，只要能托管静态文件的空间即可
• 快速：不经过后端服务器的处理，只传输内容
• 安全：没有后端程序的支持，自然会更安全

4. 常见的静态网站生成器

• Jekyll(Ruby)
• Hexo(Node)
• Hugo(Golang)
• Gatsby(Node/React)
• Gridsome(Node/Vue)
• 另外，Next.js/Nuxt.js也能生成静态网站，但它们更多被认为是SSR（服务端渲染）框架

5. JAMStack

• 这类静态网站生成器还有个漂亮的名字叫做JAMStack
• JAMStack的JAM是JavaScript、API和Markup的首字母组合
• 本质上是一种胖前端，通过调用各种API来实现更多的功能
• 其实也是一种前后端的模式，只不过离的比较开，甚至前后端来自多个不同的厂商。

6. 静态应用的使用场景

• 不适合有大量路由页面的应用
  • 如果您的站点有成百上千条路由页面，则预渲染将非常缓慢。当然，您每次更新之需要做一次，但是可能要花一些时间。大多数人不会最终获得数千条静态路由页面，而只是以防万一。
• 不适合有大量动态内容的应用
  • 如果渲染路由中包含特定于用户查看其内容或其他动态源的内容，则应确保您具有可以显示的占位符组件，直到动态内容加载到客户端为止，否则可能有点怪异。

7. Gridsome学习建议

• 使用Gridsome需要有一定的Vue基础，如果有基础，看过文档，只会觉得它比Vue本身更简单一些。

二、Gridsome基础

1. 创建Gridsome项目

Gridsome依赖sharp，国内的用户很难安装成功sharp，所以使用淘宝镜像安装sharp。

npm config set sharp_binary_host "https://npm.taobao.org/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npm.taobao.org/mirrors/sharp-libvips"

sharp是C++语言编写的，所以还要安装C++环境。
sharp官网

安装node-gyp，编译C++扩展包
npm install -g node-gyp

根据node-gyp的官方文档 https://github.com/nodejs/node-gyp 的说明对不同操作系统进行安装命令：

On Unix

• Python v2.7, v3.5, v3.6, v3.7, or v3.8
• make
• A proper C/C++ compiler toolchain, like GCC

On macOS

ATTENTION: If your Mac has been upgraded to macOS Catalina (10.15), please read macOS_Catalina.md.

• Python v2.7, v3.5, v3.6, v3.7, or v3.8
• Xcode
  • You also need to install the XCode Command Line Tools by running xcode-select --install. Alternatively, if you already have the full Xcode installed, you can find them under the menu Xcode -> Open Developer Tool -> More Developer Tools.... This step will install clang, clang++, and make.

On Windows

Install the current version of Python from the Microsoft Store package.
Install all the required tools and configurations using Microsoft’s windows-build-tools using npm install --global windows-build-tools(搜索cmd，然后右键“以管理员身份运行”，然后再安装) from an elevated PowerShell or CMD.exe (run as Administrator).

然后根据Gridsome官网https://gridsome.org/docs/的教程安装gridsome，

npm install --global @gridsome/cli

拉取远程模板到本地：

gridsome create my-gridsome-site

如果安装不成功，修改host文件
安装依赖的时候比较慢，又没有进度条，可以按ctrl+C中断掉，然后进入已经生成的my-gridsome-site目录下，执行rm -rf node_modules删除半成品node_modules，然后重新执行npm install，此时就能看到进度了。

安装好依赖之后，可以在package.json里查看命令。

执行npm run develop启动项目

访问http://localhost:8080/看到以下页面就证明启动成功了。

2. 预渲染

创建一个Foo.vue页面

<template>
  <div>
    <h1>Foo Page</h1>
  </div>
</template>

<script>
export default {
    
  name: 'FooPage'
}
</script>

<style>

</style>

然后执行npm run build进行打包，打包后生成了一个dist文件

然后起一个静态服务：serve dist
如果没有serve，要全局安装下npm i serve -g
然后访问http://localhost:5000就可以看到页面是由服务端渲染好了返回的，然后客户端的交互都是单页面应用形式。

3. 目录结构

src/main.js是整个项目的启动入口，里面加载了/layouts/Default.vue

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api

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

export default function (Vue, {
    router, head, isClient }) {
   
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
}

Default.vue中有个特别之处：

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

这个query是查询gridsome数据给组件用的。

src/templates文件夹是放集合的节点。

src/pages是路由页面。

src/layouts放布局组件。

src/components放公共组件。

src/.temp放打包过程生成的文件。

.catch是缓存的一些内容

node_modules放第三方包

static放不需要打包编译的文件，指静态的资源

gridsome.config.js gridsome的配置文件

gridsome.server.js 也是girdsome的配置文件，是配置服务端的，Gridsome内部的服务配置。

4. 项目配置

查看Gridsome的配置

gridsome.config.js

// This is where project configuration and plugin options are located.
// Learn more: https://gridsome.org/docs/config

// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`

module.exports = {
   
  siteName: '肖战', // 页面上的名称
  pathPrefix: '/my-app', // 路径前缀， 部署是否有子目录
  templates: {
   }, // 定义路由模版
  configgureWebapck: {
   }, // type Object | Function webpack 配置
  siteDescription: '大前端', // meta 名称
  plugins: [] // 配置插件
}

5. Pages

pages 就是我们项目当中的路由组件，最终会生成路由页面，在编译的时候会成为静态的HTML
(1) 基于文件形式创建

直接在src/pages目录下创建一个文件，就是一个新的路由了

(2) 基于编程方式通过createPage

gridsome.server.js

api.createPages(({
    createPage }) => {
   
    // Use the Pages API here: https://gridsome.org/docs/pages-api/
    createPage({
   
      path: '/my-page',
      component: './src/templates/MyPage.vue'
    })
  })

src/templates/MyPage.vue

<template>
  <div>
    <h1>
      MyPage
    </h1>
  </div>
</template>

<script>
export default {
    
  name: 'MyPage',
  metaInfo: {
    
    title: 'MyPage' // 配置header中的title
  }
}
</script>

<style>

</style>

重启项目后访问http://localhost:8080/my-page就可以看到MyPage页面。

6. 动态路由

(1) pages下面创建的页面文件名称用方括号括起来，作为动态路由参数

src/pages/user/[id].vue

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

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

<style>

</style>

重启后访问：http://localhost:8080/user/1

就可以看到 User 1 Page 这个内容了

(2) 编程方式

gridsome.server.js

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

7. 添加集合

定义一个页面Posts1.vue

<template>
  <Layout>
      <h1>Posts1</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: 'Posts1',
  data () {
    
    return {
    
      posts: []
    }
  },
  async created () {
    
    const {
     data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    this.posts = data
  }
}
</script>

<style>

</style>

数据是在客户端动态加载请求过来的，不是预渲染生成的。

想要数据预渲染，得使用Gridsome中的集合Collections

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

module.exports = function