从0-1生成并部署静态网站

这里我们由浅及深，从0到1生成并部署我们自己的静态网站。这里我们使用静态站点生成器 Gridsome 快速生成静态网站

一、关于 Gridsome

1、Gridsome 是什么 ？

Gridsome 由Vue.js驱动的Jamstack框架，用于构建默认情况下快速生成的静态生成的网站和应用。 Jamstack使您可以通过预渲染文件并直接从CDN直接提供文件来构建快速安全的站点和应用程序，而无需管理或运行Web服务器。Gridsome为每个页面构建一个.html文件和一个.json文件。加载第一页后，它仅使用.json文件来预取和加载下一页的数据。它还为需要它的每个页面构建一个.js包（代码拆分）

2、为什么使用Gridsome ？

对于简单展示页面，例如博客或者企业宣传官网等，有更好的SEO，更好的渲染性能，更极致的用户体验。但是它不适合做交互复杂的，路由特别多的网站，比如后台管理系统等。

3、搭建 Gridsome 项目

关于如何安装创建项目，以及项目的常规目录结构等这里不再赘述，如果有nuxt.js基础知识的铁汁们，学习Gridsome更加易上手，有许多地方和nuxt 很神似。具体知识内容自行参考官网学习：官网地址

PS：关于Gridsome 项目的部署，可以把构建结果 dist 放到任何 Web 服务器中进行部署，文章后面会有专门介绍部署的部分（使用vercel）

二、strapi 的部署

Gridsome 项目开发完成后需要进行部署可以进行线上访问。部署主要分为两个部分，首先是Gridsome 项目本身的部署，另外一个就是后台接口管理的部署。

先部署后台接口strapi的原因：部署客户端的时候需要预取数据，首先得先有数据才能预取。

这里关于strapi的基础知识不再赘述，可以去官网自行学习，官网地址。这里主要讲一下部署，部署的过程与nuxtjs 项目自动部署相差无几。在这里数据用的本地的sqlite数据库

1、连接服务器

打开终端，连接服务器，ssh root@113.31.153.214，这里113.31.153.214服务器地址需要改成自己的，输入密码xxxxx，登录成功

2、下载项目

项目完成后先将项目推送到远程仓库，可以使用GitHub也可以使用gitee等等都可以。我这里用的gitee。

从远程仓库拉代码： git clone https://gitee.com/gongyexj/blog-backend.git

安装依赖：npm i

构建：npm run build

3、启动服务

使用pm2来管理：pm2 start "npm run start" --name blog

访问：http://113.31.153.214:1337/admin/ （初始化启动访问可能需要一些时间）

三、gridsome 的部署

1、使用 vercel 部署的优势

（1）自动集成GitHub，当本地代码修改提交到GitHub仓库时vercel自动重新构建

（2）提供 Deploy Hooks与strapi结合，当后台数据发生变化时，vercel自动重新构建

在vercel中：

在strapi中：

2、但是这里存在一个问题：

项目中使用的接口是 HTTP 协议，而 Vercel 中部署的网站是 HTTPS 协议，由于在 HTTPS 协议下无法请求 HTTP 协议的接口，所以我们可以通过代理的手段来解决这个问题。

（1）安装代理插件

npm i http-proxy-middleware

（2）在项目根目录下添加 Vercel 配置文件 vercel.json

{
   
  "rewrites": [
    {