静态站点生成

Gridsome基础

介绍

Gridsome 是一个免费、开源、基于Vue.js 技术栈的静态网站生成器。

官网： https://gridsome.org

静态网站生成器：

1. 是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具。
2. 生成的网站不需要类似 PHP 这样的服务器，只需要放到支持静态网站的 Web Server 或 CDN 上即可运行。

常见的静态网站生成器：

1. gridsome (Node/vue)
2. gatsby (Node/react)
3. Jekyll (Ruby)
4. Hexo （Node）
5. Hugo (Golang)
6. 另外，Nuxt.js , Next.js 也能生成静态网站，但是它们更多的被认为是 服务端渲染 （SSR） 框架

它们也叫 JAMStack : Javascript 、API 、Markup的首字母组合。本质上是一种胖前端，通过调用各种API来实现更多的功能。

使用场景：

1. 不适合有大量路由页面的应用
2. 不适合有大量动态内容的应用
3. 适合 博客、企业网站等

创建项目

// 安装
npm install --global @gridsome/cli

// 创建项目
gridsome create <project>
	1. Install dependencies 时，Ctrl + c 打断
	2. rm -rf node_modules
	3. npm install 

cd <project>

// 启动window
gridsome develop     // localhost:8080
或
npm run develop

gridsome 依赖 sharp 模块，处理图片。它包含C++,很难安装。

// 先安装 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"

// 安装 gridsome时自动安装 sharp
// npm install sharp	

安装 sharp 依赖的 C++ 环境

npm install --global --production windows-build-tools

// 必须要安装Python 进行编译，windows-build-tools 中有

预渲染

// 安装静态服务
npm install -g serve

// 执行部署的目录
serve dist

// 通过 npm run build 打包的文件，可以直接部署到服务器上

目录结构

​ src 目录：

1. main.js : 项目的启动入口
2. pages/ : 页面组件
3. template/ : 节点集合的组件
4. layouts/ : 页面布局组件
5. components/ : 公共组件
6. .temp/ : 自动生成的临时文件

项目配置

// gradsome.config.js

官方文档 config

Pages

创建：

1. 文件组件

   1. pages/Index.vue ——> ‘/’
   2. pages/AboutUs.vue ——> ‘/about-us/’
   3. pages/dab/Index.vue ——> ‘/dab/’

2. API 方式

   // gridsome.server.js
   api.createPages(({ createPage}) => {
   	createPage({
   		path: '/my-page',
   		component: './src/templates/MyPage.vue'
   	})
   })
   
   // templates/MyPage.vue
   
   

动态路由：

1. 基于文件的动态路由

   1. src/pages/user/[id].vue ——> /user/:id

2. 基于API 创建动态路由

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

重写路由规则

metaInfo

// Index.vue
metaInfo: {
	tutle: '',
	meta: [
		{name: '', content: ''}
	]
}

404页面： src/pages/404.vue

添加集合 Collections

// 第三方模拟测试接口
jsonplaceholder.typicode.com

集合用于承载数据，gridsome 运用模板将集合渲染成页面。

Data Sources ——> Collections ——> Nodes

// gridsome.server.js
const axios = require('axios')
module.exports = function (api) {
  api.loadSource(({ addCollection }) => {
  
    const collection = addCollection('Post')
    
    const { data } = await axios.get('jsonplaceholder.typicode.com/posts')
    
    for(const item in data){
      collection.addNode({
        id: item.id,
        title: item.title,
        content: item.body
      })
    }
  })
}

在GraphQL中查询数据

GraphQL: 一种用于 API 的查询语言。GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据。

// localhost:8080/__explore
query {
	post (id: 2){
		id
		title
	}
}

• post
• allPost

在页面中查询GraphQL

// 页面中
<div>{{ $page.books }}</div>
<page-query>
	query{
		books: allBooks{
		
		} 
	}
</page-query>

// 组件中
<static-query>
	query{
	
	}
</static-query>

// 页面链接
<g-link></g-link>

使用模板渲染节点页面

// template/Post.vue
<g-link :to="$page.post.path"></g-link>
<page-query>
	query($id: ID!){		// ID类型，不能为空
		post (id: $id){
			id
			title
			content
			path
		}
	}
</page-query>

// gridsome.config.js
module.exports = {
	templates: {
		Post: [
			{
				path: '/posts/:id',
				component: './src/templates/Post.vue'
			}
		]
	}
}

Gridsome案例

创建项目

个人博客， 分页，数据管理

// 创建项目
gridsome create blog-with-gridsome

// 启动 
npm run develop

处理首页模板

使用 github 上的 startbootstrap-clean-blog 模板，

git clone https://github.com/cuihuale2021/startbootstrap-clean-blog.git --depth=1    #使用最新版本

// 放到同一个编辑器中
cd startbootstrap-clean-blog/
code -a .

static 文件夹下的图片不会进行打包编译。它是直接暴露给服务端的，引用时 “/img/abc.png”

处理其他页面模板

nav, footer 放到 layouts/Default.vue 布局组件中

使用本地MD文件管理文章内容

Markdown 插件

npm install @gridsome/source-filesystem

// 配置插件   gridsome.config.js
module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'BlogPost',
        path: './content/blog/**/*.md',
      }
    }
  ]
}

// 安装转换器
npm install @gridsome/transformer-remark      // 将 md 文件转为 html

Strapi

Strapi 介绍

通用的内容管理系统，后台管理文章

官网： strapi.io

博客文章，商品，用户评论，用户等。

Strapi 的基本使用

// 安装
npx create-strapi-app my-app --quickstart

在创建好的后台管理系统中，添加字段、编辑内容。

使用 Strapi 接口数据

角色和权限中，设置接口的权限

使用 postman 测试接口

localhost:1337/posts

访问受保护的API

分配权限，创建用户

在postman 中登录，获取Token, 在进行 接口测试

// 登录
localhost:1337/auth/local
// 接口测试
localhost:1337/posts

通过 GraphQL 访问 Strapi

// 安装  GraphQL
yarn strapi install graphql
npm run strapi install graphql
strapi install graphql				// 已全局安装 strapi

可视化安装：

​ 后台面板 ——> 市场 ——> 插件

// 访问
npm run develop

localhost:1337/graphql

将 strapi 数据预取到 Gridsome

// 在 gridsome 中使用插件
npm install @gridsome/source-strapi

// 在 gridsome.config.js 中配置插件

重启服务，拉取最新数据

设计文章和标签数据模型

post ——> Tags， 多对多的关系

展示文章列表

graphql 中可以查询到的数据，放到页面查询、赋值

文章列表分页

使用@paginate 指令完成分页

// index.vue
query ($page: Int){
	posts: allStrapiPost(perpage: 2, page: $page) @paginate{		// perpage 每页多少条 page 当前页
		pageInfo {
			totalPages
			currentPage
		}
		edges {		// 数据
		
		}
	}
}

// 分页页码的显示
import { Pager } from 'gridsome'
 	//...
 	components: {
 		Pager
 	}
// 使用组件
<Pager :info="$page.posts.pageInfo" />

展示文章详情

详情页使用模板，不同的类型展示不同的页面

// gridsome.config.js
templates: {
	StrapiPost: [		// 集合的名字  source-strapi 生成的， typeName + contentTypes
		{
			path: '/post/:id',
			component: './src/templates/Post.vue'
		}
	]
}

<a href=“”>换成<g-link to=“”> a链接会刷新页面

query($id: ID!){	// 文章id 为 ID类型，非空
	post: strapiPost(id: $id){		// 设置别名为 post
		// ...
	}
}

// 封面图
:style = "{
	backgroundImage: `url(http://localhost:1337${ $page.post.cover.url })`
}"

// 文章内容
v-html="$page.post.content"

处理Markdown格式的文章

还是使用第三方包 markdown-it 插件

npm install markdown-it

// 使用
var MarkdownIt = require('markdown-it'),
md = new MarkdownIt()

methods: {
	mdToHtml(content) {
		return md.render(content)
	}
}

v-html="mdToHtml( $page.post.content )"

文章标签

// sourc-strapi 中配置
contentTypes: ['post', 'tag']

查询、遍历到模板

基本设置

标题、副标题、封面

Strapi 中创建单一节点

// source-strapi 插件配置
singleTypes: ['general'],

查询、赋值

联系我

表单不需要预渲染，使用正常的客户端请求即可

Strapi ——> 创建集合 Concat ——> 设置表单字段 ——> 设置权限

// 安装 axios
npm install axios

部署 Strapi

gridsome博客项目，可以部署到任何的服务器环境中

Strapi 项目需要部署到Node.js 环境中

服务器 + 数据库

// strapi  config/database.js
client: ""				// 默认使用“sqlite” 数据库，可以改为 Mongodb, mysql

// 官网 mysql 的配置选项

strapi 部署的服务器，和数据库同一个服务器的话， host 为 “localhost”

// 安装mysql
npm install mysql

代码提交到gitee 或 github, 在服务器远程拉取下载

git clone xxxx
cd xxx/
npm install 
npm run build
npm run start

// 持久运行 
pm2 start npm -- run start  --name blog-backend

// 访问
xxx.xx:1337/admin

设置接口、权限、测试接口

把本地服务联通远程 strapi

// gridsome.config.js
apiUrl: '',					// 远程strapi地址

可以创建环境变量: .env.development 和 .env.production 文件

// 客户端访问
GRIDSOME_API_URL = ""

apiUrl: process.env.GRIDSOME_API_URL

Vue.mixin() 将环境变量混入到实例，全局使用

部署 Gridsome 应用

自动构建部署： vercel.com ——> 网站托管服务

本地项目推入github, vercel 导入github中的项目。

自动更新：

1. Vercel ——> 项目 ——> Settings ——> Deploy Hooks ——> 创建并复制


2. Strapi ——> 设置 ——> webhook