大前端【Gridsome + Strapi + GraphQL】开发博客应用，并部署到服务器上【Vercel + pm2】

文章输出：【拉勾教育Java高薪训练营 】 

•  学习体会
  • 学习拉钩前端课程有近3个多月的时间了，每天给自己安排2个多小时的视频任务，边看视频，边看笔记，最后进行实操训练。在这个过程中，最艰难的任务就是最后的作业题。感觉每次的作业难度好大啊，作业特别具有综合性，几乎涵盖了一个章节的知识点。不得不说，作业很具有挑战性。我的前端底子不是很强，做作业总是遇到很多困难和阻碍，不是项目发布失败，就是卡到一个问题上了，不过最后通过老师的帮助和自己的努力解决了问题，心里还是蛮有成就感的。剩下还有3个月的时间，我感觉我的技术会有更大的提升。
• 课程评价
  • 拉钩前端设计的课程真的是太符合市场的需求了，对于每个章节的设计也很有逻辑性，视频也很简短，内容浓缩到精华。在项目实操的过程中，老师也很耐心帮助我解决问题。我特别感谢小峰老师和圈圈老师对我的帮助。
• 收获
  • 对于有4年前端经验的我来说，学了近一半的课程，感觉比我工作接触的内容还多，而且我所学到的内容都是现在市场上所需要的技能，这个课程对我的技能给予了很大的提升，对我马上跳槽也有了很大的自信。报名前，我觉得网上有很多的免费课程可以学，所以很犹豫要不要花钱报这个课程，但是我整体看了这个课程体系，感觉很不错，现在学了一半，我感觉这个课程很值，不仅仅是对课程内容的满意，还有整个拉钩老师团队的满意。我觉得单打独斗到高手，需要走很多弯路，而遇到贵人帮自己的话，进阶就会很快。

一、准备工作 

• Gridsome
  • 参考我的博客：https://blog.csdn.net/weixin_37883657/article/details/113647520
  • 参考官网： https://www.gridsome.cn/
• Strapi
  • 参考我的博客：https://blog.csdn.net/weixin_37883657/article/details/113937540
  • 官网：https://strapi.io/
• 购买一个虚拟主机或者自己电脑安装一个虚拟主机：我买的是云服务 UCLOUD https://www.ucloud.cn/ （Linux 系统 ubuntu ）
• 在虚拟机安装 msyql，具体安装步骤参考我的博客 ：https://blog.csdn.net/weixin_37883657/article/details/114835435 
• 安装 mysql8时，第一次提示输入密码，记得输入空格，不要设置，在完成安装后再进行密码的设置，否则输出密码后，进入 mysql 会提示密码输入错误，解决办法重置密码，可以参考我的博客 ：https://blog.csdn.net/weixin_37883657/article/details/114937477
• 在本地安装 Navicate ，用来远程连接虚拟机的 mysql 数据库 

  • 安装完毕，先不要启动

    

  • 打开安装目录
    
    

  • 复制 PatchNavicat.exe 到该目录
    
    

二、前端用 Gridsome  创建项目 

• 安装 Gridsome 脚手架(用 yarn 或者 npm）
  • yarn global add @gridsome/cli 
  • npm install --global @gridsome/cli
  •  创建一个 Gridsome 项目
     

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

    注意事项：
          1、第一步 gridsome create my-gridsome-site 就卡住了解决办法：结束 control + c，删除项目里的依赖 rm -rf node_modules，手动  cnpm install 安装 node_modules  
          2、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"

• 访问网址：http://localhost:8080
  
  
  
  

• 我们以 startbootstrap-clean-blog 这个博客为例，用 gridsome 来实现这个博客 
  • 将这个项目克隆到本地：git clone https://gitee.com/daisy_yangyang/startbootstrap-clean-blog.git，无需安装依赖，直接打开 index.hrml 就可以访问
  • 处理首页模板
    • 先处理 index 中的 css 资源文件，在 startbootstrap-clean-blog 项目的 index 页面中，将 css文件提取到 我们的 Gridsome 项目中， 其他 HTML 也是一样的。
      • npm install bootstrap
      • npm install @fortawesome/fontawesome-free
      • 在 my-gridsome-site 项目的 main.js 中引入 
         

        import 'bootstrap/dist/css/bootstrap.min.css'
        import '@fortawesome/fontawesome-free/css/all.min.css'
        import './assets/index.css'

      •  Google 字体文件 可以在 assets 中创建一个 index.css
         

        // asstes/index.css
        @import url("https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic");
        @import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800");
        
        // 将