阅读建议:建议通过左侧导航栏进行阅读
文章简介:本文是学习Gridsome的学习笔记
静态网站生成器
定义:静态网站生成器是使用一系列配置、模板以及数据,生成静态HTML
文件及相关资源的工具。
特点:
- 由于是提前生成静态
HTML
文件及相关资源,所以也叫预渲染 - 生成的网站不需要服务器,只需要放到支持静态资源的
web server
或CDN
即可运行
优势:
- 省钱-不需要专业的服务器,只要能托管静态文件的空间
- 快速-不经过后端服务器的处理,只传输内容
- 安全- 没有后端程序的执行,会更安全
常见的静态网站生成器:
- 基于
Ruby
的JekyII
- 基于
Node.js
的Hexo
- 基于
GoLang
的Hugo
- 基于
Node/React
的Gatsby
- 基于
Node/Vue
的Gridsome
Next.js
和Nuxt.js
也能生成静态网站,但是他们更多的被认为是服务端渲染(SSR
)框架
这类静态网站生成器统称JAMStack
(JAM
指JavaScript、API、Markup
),通过调用各种API来实现更多的功能,其本质是一种前后端分离的模式,甚至前后端可以来自不同的厂商。
使用场景:
- 不适合有大量路由页面的应用,路由页面过多,则预渲染会非常慢
- 不适合有大量动态内容的应用
Gridsome
学习GridSome
要有Vue
基础,但比Vue
简单,参考官方文档
资源链接:
创建Gridsome项目
环境准备:Node.js(v8.3 +)环境、C++编译环境、Python环境
使用
Gridsome
脚手架创建项目时,处理图片(如压缩图片的大小、转换图片的格式)依赖的sharp包很难安装成功,主要原因有两点:
1、里面包含一些C++文件,在安装的时候需要先编译,要有C++编译环境
2、依赖的libvips几十兆,比较大
1、安装Gridsome
脚手架工具
npm install --global @gridsome/cli
2、准备sharp
的安装环境
不管是哪个是哪个操作平台(Windows、Linux),都需要有python环境,windows环境可以通过Windows应用商店安装。
- 在sharp官网找到国内镜像,安装国内镜像
//安装sharp镜像
npm config set sharp_binary_host "https://npm.taobao.org/mirrors/sharp"
//安装libvips镜像
npm config set sharp_libvips_binary_host "https://npm.taobao.org/mirrors/sharp-libvips"
- 安装
C++
编译环境- 下载
Python
安装包,安装Python
环境 - 安装node-gyp及相关套件windows-build-tools,它的作用是编译
C++
扩展包
- 下载
//安装node-gyp
npm install -g node-gyp
//安装windows-build-tools
npm install --global windows-build-tools
3、创建Gridsome
项目,并安装依赖包
gridsome create sample-gridsome
npm scripts
命令
"scripts": {
"build": "gridsome build", //编译构建预渲染静态网页
"develop": "gridsome develop", //本地启动项目
"explore": "gridsome explore"
},
4、本地执行npm run develop
启动项目,浏览器访问http://localhost:8080/
,页面如下:
5、本地执行npm run build
编译构建预渲染静态网页,生成的静态网页在dist
目录下,可以将它部署在任何支持静态文件的web服务器上。
6、使用serve
插件本地部署测试打包后的文件
serve是一个基于node.js的命令行静态web服务
//安装serve
npm install -g serve
项目根目录下执行 serve dist
启动本地服务,如下图表示启动成功:
目录结构