静态站点生成

时间：2023-04-30 00:30:01 | 来源：网站运营

时间：2023-04-30 00:30:01 来源：网站运营

静态站点生成：

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>// 启动windowgridsome develop // localhost:8080或npm run developgridsome 依赖 sharp 模块，处理图片。它包含C++,很难安装。

// 先安装 sharpnpm 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. 文件组件
   
2. pages/Index.vue ——> '/'
   
3. pages/AboutUs.vue ——> '/about-us/'
4. pages/dab/Index.vue ——> '/dab/'
   
5. API 方式
   

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

// templates/MyPage.vue

```

动态路由：

1. 基于文件的动态路由
   
2. src/pages/user/[id].vue ——> /user/:id
   
3. 基于API 创建动态路由
   

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


重写路由规则

metaInfo

// Index.vuemetaInfo: { tutle: '', meta: [ {name: '', content: ''} ]}404页面： src/pages/404.vue

添加集合 Collections

// 第三方模拟测试接口jsonplaceholder.typicode.com集合用于承载数据，gridsome 运用模板将集合渲染成页面。

Data Sources ——> Collections ——> Nodes

// gridsome.server.jsconst 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/__explorequery { 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.jsmodule.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.jsmodule.exports = { siteName: 'Gridsome', plugins: [ { use: '@gridsome/source-filesystem', options: { typeName: 'BlogPost', path: './content/blog/**/*.md', } } ]}// 安装转换器npm install @gridsome/transformer-remark // 将 md 文件转为 html

Strapi

Strapi 介绍

通用的内容管理系统，后台管理文章
官网： http://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

// 安装 GraphQLyarn strapi install graphqlnpm run strapi install graphqlstrapi install graphql // 已全局安装 strapi可视化安装：

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

// 访问npm run developlocalhost:1337/graphql

将 strapi 数据预取到 Gridsome

// 在 gridsome 中使用插件npm install @gridsome/source-strapi// 在 gridsome.config.js 中配置插件重启服务，拉取最新数据

设计文章和标签数据模型

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

展示文章列表

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

文章列表分页

使用@paginate 指令完成分页

// index.vuequery ($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.jstemplates: { StrapiPost: [ // 集合的名字 source-strapi 生成的， typeName + contentTypes { path: '/post/:id', component: './src/templates/Post.vue' } ]}/换成/ 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 ——> 设置表单字段 ——> 设置权限

// 安装 axiosnpm install axios

部署 Strapi

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

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

服务器 + 数据库

// strapi config/database.jsclient: "" // 默认使用“sqlite” 数据库，可以改为 Mongodb, mysql// 官网 mysql 的配置选项strapi 部署的服务器，和数据库同一个服务器的话， host 为 “localhost”

// 安装mysqlnpm install mysql代码提交到gitee 或 github, 在服务器远程拉取下载

git clone xxxxcd xxx/npm install npm run buildnpm run start// 持久运行 pm2 start npm -- run start --name blog-backend// 访问xxx.xx:1337/admin设置接口、权限、测试接口

把本地服务联通远程 strapi

// gridsome.config.jsapiUrl: '', // 远程strapi地址可以创建环境变量: .env.development 和 .env.production 文件

// 客户端访问GRIDSOME_API_URL = ""apiUrl: process.env.GRIDSOME_API_URLVue.mixin() 将环境变量混入到实例，全局使用

部署 Gridsome 应用

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

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

自动更新：

1. Vercel ——> 项目 ——> Settings ——> Deploy Hooks ——> 创建并复制2. Strapi ——> 设置 ——> webhook