当前位置:网站首页>新手必会的静态站点生成器——Gridsome
新手必会的静态站点生成器——Gridsome
2022-07-06 09:29:00 【萌褚】
为什么要使用Gridsome
Gridsome 通过使用PRPL模式将超高性能构建到每个页面中。您可以获得开箱即用的代码拆分、资产优化、渐进式图像和链接预取。Gridsome 网站默认获得几乎完美的页面速度分数。
Gridsome 生成静态 PWA。只有关键的 HTML、CSS 和 JavaScript 会首先加载。然后预取下一页,因此即使在离线时,用户也可以在不重新加载页面的情况下快速点击。
通过本教程中,你将从头开始构建自己的应用,分别使用 Gridsome -Cli 和 云开发平台
Gridsome -Cli 快速搭建项目
一、搭建本地开发环境
Gridsome 要求Node.js版本Node.js 12.13.0 || 14.0.0|| >= 16.0.0 或更高版本和Yarn。然而,一些模板需要更高的Node.js版本才能工作,如果你的包管理器发出警告,请升级。您可以使用n、nvm或nvm-windows 在同一台机器上管理多个版本的Node。 要了解如何安装 Node.js,参阅nodejs.org。 如果你不确定系统中正在运行的 Node.js 版本是什么,请在终端窗口中运行node -v。
npm 包管理器 因为我们通常都会使用Gridsome 提供的脚手架搭建项目结构,所以要下载并安装 npm 包并且npm >= 6。,你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面,该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端,请在终端窗口中运行 npm -v 。
你可以使用 Gridsome -Cli 生成器 来创建项目,生成应用和库代码,以及执行各种持续开发任务,比如测试、打包和部署。
二、创建新的初始应用
安装Gridsome CLI工具全局安装:
npm install --global @gridsome/cli
yarn global add @gridsome/cli
pnpm install --global @gridsome/cli
然后您可以使用它来启动一个新项目:
gridsome create my-gridsome-site
三、启动应用服务器
进入工作区目录,并启动这个应用。
cd my-gridsome-site
gridsome develop
gridsome develop命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用,
也会打开浏览器,并访问 http://localhost:8080/ 。
你会发现本应用正运行在浏览器中。
参考文献:gridsome.org
云开发平台一键部署Gridsome
作为Gridsome 开发者的你,云开发平台为你提供了一站式,全云端的开发平台,让你可以打开浏览器就完成开发,调试,上线,同时云开发平台底层调用的是阿里云集团Serverless产品,可以实现低门槛开发,部署,调试,降低开发上手成本,让Gridsome 应用可以一键快速部署!
一、创建环境
想要一键部署Gridsome ,需要以下账号和服务:
- Github账号 (https://github.com/),
- 阿里云账号,并使用阿里云账号登录云开发平台 (https://workbench.aliyun.com/) ,为保证最好的使用体验,请使用Chrome浏览器。开通OSS服务。
- 未开通阿里云OSS的用户,点击链接 (https://workbench.aliyun.com/product/open?code=oss) 开通OSS服务。OSS开通免费,有一定的免费额度,超过额度之后按量付费。
二、创建Gridsome 应用
- 创建前端应用。打开快速开始 https://workbench.aliyun.com/app ,找到Gridsome 点击创建「创建应用」按钮。
- 云资源访问授权。如果您之前没有使用过云开发平台,会出现云资源授权管理的选项,往下拉出现直至同意授权的字样,点击「同意授权」后出现授权成功,点击进入「下一步」。
- 绑定Github账号。授权完成后选择来源仓库为Github,按照提示点击去绑定,绑定GitHub帐号,登录后并点击Authorize Aliyunworkben允许云开发平台构建、发布你的GitHub代码为可访问的网站。
- 选择fork好的“Gridsome ”代码仓库。选择第一步中的代码仓库,主干分支,并点击下一步。主干分支一般指的是代码的master或main等分支。
填写基本信息,完成创建。填写基本信息并点击「完成」。成功后进入到应用详情和部署界面。
三、在日常环境部署
- 一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署以后可以点击访问部署网站查看效果。
- 访问Gridsome 网站。日常环境的测试域名也是可以访问的,点击访问已部署网站按钮会出现一个弹出,点击弹出上的立即访问就能够访问已经部署好的站点了。在部署完成后,可以继续本地编码,并将代码push到应用的“基本信息”中对应的代码仓库内。
阿里云开发平台多端应用
在平台中拥有热门开源应用的中心,以此去为每一位开发者的开发之路保驾护航。目前共涵盖多个领域,不乏像Gridsome .js、React、Nuxt.js、Next.js、AntDesign等热门必备的框架,也包含了内容管理平台Hexo、Docusaurus、Gridsome Press、Sapper等。提供给您了一个免费、便捷的云上研发工作平台,通过学习与实操演练两种模式,从入门到精通快速上手Serverless和云开发技术。0门槛全云端开发、随时随地在线协同、业界领先Serverless架构、行业应用一件初始化等特性也同步在每一次的实践。
云原生应用、主机应用部署、前端应用部署三大板块的支持,也供开发者们找到最合适自己神器,令开发工作事半功倍。其中满足IoT语音技能、小程序、H5应用等开发者低门槛应用开发的需求;也支持代码编译部署到ECS主机服务器的场景,帮助用户管理传统主机应用的能力;让前后端应用能够更高效地协同。平台将持续与开发者一起共同成长,帮忙开发者更好、更快以及更低成本的开发,多端的应用更加快速的上云。
边栏推荐
- Vs2019 initial use
- Anaconda下安装Jupyter notebook
- Codeforces - 1526C1&&C2 - Potions
- C basic grammar
- Analysis of protobuf format of real-time barrage and historical barrage at station B
- AcWing:第56场周赛
- Openwrt source code generation image
- Basic Q & A of introductory C language
- Determine the Photo Position
- Share an example of running dash application in raspberry pie.
猜你喜欢
随机推荐
QNetworkAccessManager实现ftp功能总结
Programmers, what are your skills in code writing?
OneForAll安装使用
2027. Minimum number of operations to convert strings
HDU - 6024 building shops (girls' competition)
Basic Q & A of introductory C language
<li>圆点样式 list-style-type
Acwing: the 56th weekly match
Acwing - game 55 of the week
1323. Maximum number of 6 and 9
QT实现圆角窗口
Acwing: Game 58 of the week
JS call camera
Interesting drink
Input can only input numbers, limited input
QT模拟鼠标事件,实现点击双击移动拖拽等
window11 conda安装pytorch过程中遇到的一些问题
本地可视化工具连接阿里云centOS服务器的redis
Li Kou: the 81st biweekly match
Date plus 1 day