【Gridsome】静态网站生成

news/2024/5/9 14:59:24/文章来源:https://blog.csdn.net/weixin_37883657/article/details/113647520

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_754052.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echarts 各种图表网站,留着有用

2019独角兽企业重金招聘Python工程师标准>>> https://echarts.baidu.com/examples/#chart-type-treemap 转载于:https://my.oschina.net/u/3222944/blog/3001309

Java程序员的职业发展路线 附:大型网站 -- 架构技能进阶图谱

职业发展道路基本有3条: 第一条路线(技术专精): 初级Java开发---中级--高级---项目主管--Java项目经理---网站架构师----资深专家 第二条路线(技术转产品):初级Java开发---中级--产品策划--产品…

宜春网站建设

2019年“五一”小长假结束,很多人给假期生活的总结估计是“人从众”、“买买买”,以致文化和旅游部都用“繁荣超预期”来形容“五一”的文化和旅游市场。据调查,许多人都是通过网上购买火车票、飞机票、各景点门票以及预订酒店,很…

jquery 当页面图片加载之后_谷歌SEO页面速度的重要性

什么是页面速度?页面速度是指网页加载所需的时间。一个页面的加载速度是由几个不同的因素决定的,包括网站的服务器、页面文件大小和图片压缩。也就是说,"页面速度 "并不像 "网页速度 "那么重要。"页面速度 "并…

网站建设协议_了解这几个企业建站流程做出来的网站更让客户喜欢

网站建设步骤是网站建设当中一个重要环节,一个网站看它好不好,重要一点就是这个网站建设了。因为好的网站建设能够让浏览网站用户,一直停留在网站当中。很多人会问这个网站建设要怎么样才能够让用户喜欢,为什么宁开亮传媒免费做的…

javamail发送html_SpringBoot入门建站全系列(十)邮件发送功能

SpringBoot入门建站全系列(十)邮件发送功能Spring Mail API都在org.springframework.mail及其子包org.springframework.mail.javamail中封装。 JavaMailSenderImpl: 邮件发送器,主要提供了邮件发送接口、透明创建Java Mail的MimeMessage、及邮…

访问调用https_(二)http协议的网站装ssl升级成https

最终目标:微信小程序要想上线 必须内部所有域名都是https,比如网络图片,比如后端接口,比如其他链接。问:既然https://minihome.top/能直接访问了,那我用eggjs(node)写的后端接口是不是就可以正常访问了&…

推荐几个很好很好用的网站

1. MSDN 这是非官方性质的微软网站,但是它无广告,提供了很多的微软资源,却是相当的良心。如果要安装操作系统、office、VS、Visio等都可以从这个网站上进行下载。 2. 高清图片 该网站提供很多高清壁纸,风格清新,艺术风…

大型网站架构技术一览

大型网站的挑战主要来自庞大的用户,高并发的访问和海量数据,任何简单的业务一旦需要处理数以P计的数据和面对数以亿计的用户,问题就会变得棘手。大型网站架构主要就是解决这类问题。 本文内容大部分来自《大型网站技术架构》,这本书很值得一…

大型网站架构演化历程

摘自《大型网站技术架构》:第一章 大型网站架构演化 目录 一、大型网站系统的特点 二、 大型网站架构演化发展历程 1. 初始阶段的网站架构 2. 应用服务和数据服务分离 3. 使用缓存改善网站性能 4. 使用应用服务器集群改善网站的并发处理能力 5. 数据库读写分离 6. 使…

珍藏30年的网站都在这了,自媒体运营必不可少

目录 01办公协作 02 图库 03新媒体相关 04 APP相关 05 小程序相关 06 H5制作 06 二维码 07 问卷 08 gif 09 大数据 10 SasS类平台 11 KOL采购及广告投放 12活动会议 13 长短连接 14 搜索工具 15 思维导图 16 图片处理 17 识图工具 18 表情包 01办公…

HMDB网站 爬取工具

HDMB网站有一个特别不友好的地方是: 搜索相应太慢,成功率还低,这个简直太不爽了。不过白天体验明显好于晚上体验…原因自己品吧 效果图工具使用部分效果 根据HMDBID下载结果 设置搜索条件搜索结果 解析成Excel文件 接受定制任务

网站、数据库的衍变之路(三)

话接前文《网站、数据库的衍变之路(二)》。上文讲了几种静态化方案的利弊,有朋友要讲详细一点,呵呵,这不属于本文的范畴。也有朋友说有些网站不适合搞静态化,是有这种情况。但是在这个时期,网站还处于刚发展的起始阶段…

Java SpringMVC 支付宝-手机网站支付接口

首先就是申请支付宝第三方接口,获取到APPID,应用发布前也可以用支付宝的沙箱环境,服务器要开启外网访问权限,因为支付宝需要返回异步通知(notify_url)和同步通知(return_url) 如果想学习Java工程化、高性能…

JAVA WEB快速编写一个JSP WEB网站了解网站的基本结构 调试 部署

一、使用eclipse初始化一个JSP WEB项目(即:动态WEB项目),步骤如下: 如上图示注意选择TOMCAT版本 如上图示勾选生成web.xml,当然如果不勾选也行,但后续如果有需要用到配置的地方就需要再单独添加,故这里我选…

我穿越到1994年,终于发现80%的网站都用PHP的原因!

见字如面,我是军哥!昨天晚上写代码到深夜,一头扎到床上,沉沉睡去。第二天睁开眼睛,我发现自己居然坐在一个咖啡馆里,旁边的墙上贴着最新的英文电影海报《阿甘正传》、《肖申克的救赎》这都是1994年的经典电…

Java程序员进阶笔记实操—大型网站架构技术之负载均衡详解(3)

欢迎关注专栏:Java架构技术进阶。里面有大量batj面试题集锦,还有各种技术分享,如有好文章也欢迎投稿哦。 上一篇:Java程序员进阶笔记实操—大型网站架构技术之负载均衡详解(2) 本次分享大纲 软件负载均衡概…

使用SEP实现:禁止访问特定的网站

利用SEP自带的防火墙可以禁止客户所需要禁止的网站。具体操作如下: 1、点击【Policies】选【Firewall】,在右边右击,选择【Add】。 2、选择【Rules】,可以再【Policy name】里更改名字,便于识别。 3、选择【Add Rule】…

允许网站使用相机和麦克风_新一代网红神器 佳能G7 X Mark III相机评测

1英寸卡片机向来是很多玩家首选的随身摄影器材。一方面,1英寸传感器相较手机等常规装备而言具备更高的成像水准;另一方面,“小巧机身大光圈变焦镜头”的配置不仅带来了出色的便携性,同时还能满足各种复杂的拍摄需求,实…

怎么arm数据上传到云服务器_纵横数据:在日本服务器上搭建外贸网站怎么样?...

​​现在外贸建站赚取外汇已经成为不少企业的收入来源,而对于外贸网站的搭建,不少企业或者网站开发者都会选择使用wordpress程序,而且近几年采用wordpress搭建外贸用户的增长一直都比较快。那么使用wordpress搭建外贸网站有什么好处&#xff…