一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
基于 Gridsome 静态站点生成
- GitHub 仓库：github.com/gridsome/gr…
- 官网：gridsome.org/
介绍
Gridsome 是什么？
- Gridsome 是一个免费、开源、基于 Vue.js 技术栈的静态网站生成器
- Gridsome 是由Vue.js驱动的Jamstack框架，用于构建默认情况下快速生成的静态生成的网站和应用。
- Gridsome是Vue提供支持的静态站点生成器，用于为任何无头CMS，本地文件或API构建可用于CDN的网站
- 基于 Vue.js 的 Jamstack 框架
Gridsome使用场景
- 不适合有大量路由页面的引用
- 如果你的站点有成百上千条路由页面，则预渲染将非常的缓慢，当然，你每次的更新只需要做一次，但是可能需要花一些时间。
- 不适合有大量动态内容的引用
- 如果渲染路线中保护特定于用户查看其内容或其他动态资源的内容，则应该确保有相对应的占位符
- 想要有更好的 SEO
- 想要有更好的渲染性能
常用的静态网站生成器
- Jekyll（Ruby）
- Hexo（Node）
- Hugo (Golang)
- Gatsby(Node/React)
- Gridsome(Node/Vue)
- 另外，Next.js、Nuxt.js 也可以正常静态网站，但是他们更多被认为是SSR（服务端渲染）框架
备选方案
起步
学习条件
您应该具有有关HTML，CSS，Vue.js以及如何使用终端的基本知识。了解GraphQL的工作原理是有好处的，但不是必需的。 Gridsome是学习它的好方法。
Gridsome 需要Node.js（v8.3 +），并建议使用 Yarn。
1、安装 Gridsome CLI
# 使用 yarn
yarn global add @gridsome/cli
# 使用 npm
npm install --global @gridsome/cli
# 查看是否安装成功
gridsome --version
复制代码2、创建 Gridsome 项目
# 创建项目
gridsome create my-gridsome-site
# 进入项目中
cd my-gridsome-site
# 启动开发模式，或 npm run develop
gridsome develop
复制代码这里直接创建 Gridsome 可能不会直接成功，因为 Gridsome 依赖了一个特殊的第三方模块 sharp, sharp的作用是处理图片，如压缩图片大小、转换格式的作用。
又又又因为还依赖了 libvips 而且这个包很大，因为我们的网络问题很容易安装失败，所以我们需要进行一些特殊的配置
还有一些c++的插件，所以我们还需要安装一些依赖进行编译
配置
npm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips"
复制代码- 配置 node-gyp 编译环境
- github.com/nodejs/node… 根据文档进行配置
安装完毕 文件结构
4、自己试一试
- 在
src/pages目录中创建一个.vue组件
5、构建
gridsome build
复制代码构建结果默认输出到 dist 目录中。
Gridsome 会把每个路由文件构建为独立的 HTML 页面。
6、部署
可以把构建结果 dist 放到任何 Web 服务器中进行部署。
例如我们这里使用 Node.js 命令行工具 serve 来测试构建结果。
npm install -g serve
serve dist
复制代码或者可以部署到其它第三方托管平台：gridsome.org/docs/deploy…
或是自己的服务器，都可以！