静态站点生成（SSG）

Gridsome

Gridsome是什么

• 一个免费、开源、基于Vue.js技术栈的静态网站生成器
• 官方网站： https://gridsome.org
• github ： https://github.com/gridsome/gridsome
• demo地址 : https://github.com/qifutian/learngit/tree/main/my-gridsome-site

什么是静态网站生成器

1. 静态网站生成器是使用一系列配置、模板以及数据 ，生成静态HTML文件及相关资源的工具
2. 此功能也叫预渲染
3. 生成的网站不需要类似php这样的服务器
4. 只需要放到支持静态资源的web Server或者CND 上运行即可

优点

• 省钱，不需要专业服务器，只要能托管静态文件的空间
• 快速，不经过后端服务器的处理，只传输内容
• 安全，没有后端程序执行，相对更加安全

常见的静态网站生成器

• Jekyll(Ruby)
• Hexo(Node)
• Hugo(Golang)
• Gatsby(Node/React)
• Gridsome(Node/Vue)
• 另外，Next.js，Nuxt.js也可以生成静态网站，但是更多认为是SSR框架

JAMStack

• 这类静态网站生成器也叫 JAMStack
• JAMStack 的JAM 是JavaScript、API、和Markup的首字母
• 本质是一种胖前端，通过调研api 实现更多功能
• 也是一种前后端模式，只不过分离比较开，甚至前后端可以不同厂商

使用场景

• 不适合有大量路由页面的应用，页面过多不适合，会很缓慢
• 不适合大量动态交互的应用 、常见的后台系统，都是增删改查，比较适合博客，官网，文档展示

Gridsome 基础

官网地址：https://gridsome.org/docs/

创建项目

1. 安装 yarn global add @gridsome/cli 或是npm install --global @gridsome/cli
2. 创建项目 gridsome create my-gridsome-demo
3. 启动 gridsome develop
4. 但是安装可能会有问题，sharp需要c++环境，国外资源比较大，需要使用淘宝镜像
5. c++ 编译环境需要使用node-gyp，用来编译c++扩展包的
6. npm install -g node-gyp , 安装完成之后需要安装配件，windows下需要 npm install --global --production windows-build-tools ,还需要python环境

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"

预渲染

Gridsome 最核心的功能是生成预渲染静态页面
启动之后对应的就是pages下的页面，会自动生成对应的路由
例如，pages下新建foo.vue，导航切换回自动找到foo
生成静态网页需要使用 npm run build 构建，增加了dist目录
安装server是基于node的静态wab服务 npm i -g serve
server dist 资源部署，给出本机地址和局域网地址

目录结构

主要是src

1. main.js 是整个项目的启动入口，加载了DefaultLayout，导出一个函数，注册Layout成全局组件
2. template 目录放vue组件，放一些集合的节点
3. pages放的是路由页面，会自动生成路由
4. layout放一个布局组件
5. components放一些公共组件
6. .temp放一些打包生成的文件

配置文件

gridsome.config.js 配置文件 siteName 配置页面名称 siteDescription 设置meta标签，利于搜索引擎 configureWebpack： 自定义webpack配置 ......

// 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: 'Gridsome',
  siteDescription: "大前端",
  pathPrefix: '',  // 路径前缀
  siteUrl: '', //配置默认的url地址
  titleTemplate: '', // 标题模板
  templates: {
   } ,  // 路由模板
  metadata: