8.4.2 静态站点生成

本文为拉勾网大前端高薪训练营第一期笔记

什么是静态网站生成器

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

好处

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

常见的静态网站生成器

• 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学习建议

需要有一定的Vue基础

项目配置

gridsome.config.js

https://gridsome.org/docs/config/

module.exports = {
	siteName: '拉勾教育',
	siteDescription: '大前端',
	plugins: []
}

siteName是网页title "a - b"这里的b，同时也是header左上角的名称

siteDescription是网页meta description

Pages

https://gridsome.org/docs/pages/

两种选项创建页面，一种是文件系统

• src/pages/Index.vue becomes /(The frontpage)
• src/pages/AboutUs.vue becomes /about-us/
• src/pages/about/Vision.vue becomes /about/vision/
• src/pages/blog/Index.vue becomes /blog/

动态路由式

• src/pages/user/[id].vue becomes /user/:id.
• src/pages/user/[id]/settings.vue becomes /user/:id/settings.

一种是编程式

gridsome.server.js