【Gridsome】静态网站生成

Gridsome 介绍

• Gridsome 是一个免费、开源、基于 Vue.js技术栈的静态网站生成器
  • 什么是静态网站生成器
    
    
  • 静态网站的好处
    
    
  • 常见的静态网站生成器
    
    
  • JAMStack
    
    
  • 静态应用的使用场景

    • 不适合管理系统

    • 简单页面展示

    • 想要有更好的 SEO

    • 想要有更好的渲染性能

• Gridsome 是由Vue.js驱动的Jamstack框架，用于构建默认情况下快速生成的静态生成的网站和应用。
• Gridsome是Vue提供支持的静态站点生成器，用于为任何无头CMS，本地文件或API构建可用于CDN的网站
• 使用Vue.js，webpack和Node.js等现代工具构建网站。通过npm进行热重载并访问任何软件包，并使用自动前缀在您喜欢的预处理器（如Sass或Less）中编写CSS
•  基于 Vue.js 的 Jamstack 框架
• Gridsome 使开发人员可以轻松构建默认情况下快速生成的静态生成的网站和应用程序
• Gridsome允许在内容里面引用任何CMS或数据源
  •  从WordPress，Contentful或任何其他无头CMS或API中提取数据，并在组件和页面中使用GraphQL访问它 

创建Gridsome项目 

1、用 yarn 或者 npm 安装，两个随便选一个 

• yarn global add @gridsome/cli 
• npm install --global @gridsome/cli

2、创建 Gridsome 项目 

• gridsome create my-gridsome-site
• cd my-gridsome-site
• gridsome develop 

注意事项：
        第一步 gridsome create my-gridsome-site 就卡住了解决办法：结束 control + c，删除项目里的依赖，手动  cnpm install 安装c node_modules 

gridsome 项目安装依赖注意事项（配置环境变量）：

• 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"

 3、打包 cnpm run build

 4、安装 server，并部署 

• cnpm install -g serve

• serve dist