新手必會的靜態站點生成器——Gridsome

来源:https://www.cnblogs.com/helong-123/archive/2022/06/22/16400551.html
-Advertisement-
Play Games

為什麼要使用Gridsome Gridsome 通過使用PRPL模式將超高性能構建到每個頁面中。您可以獲得開箱即用的代碼拆分、資產優化、漸進式圖像和鏈接預取。Gridsome 網站預設獲得幾乎完美的頁面速度分數。 Gridsome 生成靜態 PWA。只有關鍵的 HTML、CSS 和 JavaScri ...


為什麼要使用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 ,需要以下賬號和服務:

file

二、創建Gridsome 應用

file

  • 雲資源訪問授權。如果您之前沒有使用過雲開發平臺,會出現雲資源授權管理的選項,往下拉出現直至同意授權的字樣,點擊「同意授權」後出現授權成功,點擊進入「下一步」。

file

  • 綁定Github賬號。授權完成後選擇來源倉庫為Github,按照提示點擊去綁定,綁定GitHub帳號,登錄後並點擊Authorize Aliyunworkben允許雲開發平臺構建、發佈你的GitHub代碼為可訪問的網站。

file

  • 選擇fork好的“Gridsome ”代碼倉庫。選擇第一步中的代碼倉庫,主幹分支,並點擊下一步。主幹分支一般指的是代碼的master或main等分支。

file

填寫基本信息,完成創建。填寫基本信息並點擊「完成」。成功後進入到應用詳情和部署界面。

file

三、在日常環境部署

  • 一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署,部署狀態變成綠色已部署以後可以點擊訪問部署網站查看效果。

file

  • 訪問Gridsome 網站。日常環境的測試功能變數名稱也是可以訪問的,點擊訪問已部署網站按鈕會出現一個彈出,點擊彈出上的立即訪問就能夠訪問已經部署好的站點了。在部署完成後,可以繼續本地編碼,並將代碼push到應用的“基本信息”中對應的代碼倉庫內。

file

阿裡雲開發平臺多端應用

在平臺中擁有熱門開源應用的中心,以此去為每一位開發者的開發之路保駕護航。目前共涵蓋多個領域,不乏像Gridsome .js、React、Nuxt.js、Next.js、AntDesign等熱門必備的框架,也包含了內容管理平臺Hexo、Docusaurus、Gridsome Press、Sapper等。提供給您了一個免費、便捷的雲上研發工作平臺,通過學習與實操演練兩種模式,從入門到精通快速上手Serverless和雲開發技術。0門檻全雲端開發、隨時隨地線上協同、業界領先Serverless架構、行業應用一件初始化等特性也同步在每一次的實踐。

雲原生應用、主機應用部署、前端應用部署三大板塊的支持,也供開發者們找到最合適自己神器,令開發工作事半功倍。其中滿足IoT語音技能、小程式、H5應用等開發者低門檻應用開發的需求;也支持代碼編譯部署到ECS主機伺服器的場景,幫助用戶管理傳統主機應用的能力;讓前後端應用能夠更高效地協同。平臺將持續與開發者一起共同成長,幫忙開發者更好、更快以及更低成本的開發,多端的應用更加快速的上雲。

file


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 給大家推薦八個非常實用的Python案例,希望大家看過後能夠有所收穫! 1、合併兩個字典 Python3.5之後,合併字典變得容易起來,我們可以通過**符號解壓字典,並將多個字典傳入{}中,實現合併。 def Merge(dict1,dict2): res = {**dict1,**dict2} r ...
  • 1、Collections sort(List list) 自然升序排序 reverse(List<?> list) 集合反轉 binarySearch(List<? extends Comparable<? super T>> list, T key) 二分查找(要求集合有序) addAll(Co ...
  • 前言 利用selenium在做自動化測試的時候,經常會用到數據來做批量測試,常用的方式有讀取txt文件,xml文件,csv文件以及excel文 件幾種。 使用 excel 來做數據管理時,需要利用 xlrd、xlwt 開源包來讀寫 excel。 1、安裝xlrd、xlwt pip install x ...
  • 大佬的理解-> Java多線程(三)--synchronized關鍵字詳情 大佬的理解-> Java多線程(三)--synchronized關鍵字續 1、問題引入 買票問題 1.1 通過繼承Thread買票 繼承Thread買票案例 /* 模擬網路購票,多線程資源共用問題,繼承Thread方式; 結 ...
  • 控制結構 順序 程式從上到下逐行地執行,中間沒有任何判斷和跳轉。 順序控制舉例和註意事項 Java中定義成員變數時採用合法的前向引用。如: public class Test{ ​ int num1 = 12; ​ int num2 = num1 + 2; } 錯誤形式: public class ...
  • 前言 當我們開始學習Python時,我們會養成一些不良編碼習慣,而更可怕的是我們連自己也不知道。 我們學習變成的過程中,大概有會這樣的經歷: 寫的代碼只能完成了一次工作,但後來再執行就會報錯或者失敗,令人感到懊惱, 或者偶然發現一個內置函數可以讓你的工作更輕鬆時,瞬間豁然開朗。 我們中的大多數人仍然 ...
  • 1. 前言 距離上次發《MAUI初體驗:爽》一文已經過去2個月了,本計劃是下半年或者明年再研究MAUI的,現在計劃提前啦,因為我覺得MAUI Blazor挺有意思的:在Android、iOS、macOS、Windows之間共用UI,一處UI增加或者修改,就能得到一致的UI體驗。 看看這篇文章《Bla ...
  • 一:背景 1. 一個有趣的話題 最近在看 硬體異常 相關知識,發現一個有意思的空引用異常問題,拿出來和大家分享一下,為了方便講述,先上一段有問題的代碼。 namespace ConsoleApp2 { internal class Program { static Person person = n ...
一周排行
    -Advertisement-
    Play Games
  • 前言 當別人做大數據用Java、Python的時候,我使用.NET做大數據、數據挖掘,這確實是值得一說的事。 寫的並不全面,但都是實際工作中的內容。 .NET在大數據項目中,可以做什麼? 寫腳本(使用控制台程式+頂級語句) 寫工具(使用Winform) 寫介面、寫服務 使用C#寫代碼的優點是什麼? ...
  • 前言 本文寫給想學C#的朋友,目的是以儘快的速度入門 C#好學嗎? 對於這個問題,我以前的回答是:好學!但仔細想想,不是這麼回事,對於新手來說,C#沒有那麼好學。 反而學Java還要容易一些,學Java Web就行了,就是SpringBoot那一套。 但是C#方向比較多,你是學控制台程式、WebAP ...
  • 某一日晚上上線,測試同學在回歸項目黃金流程時,有一個工單項目介面報JSF序列化錯誤,馬上升級對應的client包版本,編譯部署後錯誤消失。 線上問題是解決了,但是作為程式員要瞭解問題發生的原因和本質。但這都是為什麼呢? ...
  • 本文介紹基於Python語言中TensorFlow的Keras介面,實現深度神經網路回歸的方法。 1 寫在前面 前期一篇文章Python TensorFlow深度學習回歸代碼:DNNRegressor詳細介紹了基於TensorFlow tf.estimator介面的深度學習網路;而在TensorFl ...
  • 前段時間因業務需要完成了一個工作流組件的編碼工作。藉著這個機會跟大家分享一下整個創作過程,希望大家喜歡,組件暫且命名為"easyFlowable"。 接下來的文章我將從什麼是工作流、為什麼要自研這個工作流組件、架構設計三個維度跟大家來做個整體介紹。 ...
  • 1 簡介 我們之前使用了dapr的本地托管模式,但在生產中我們一般使用Kubernetes托管,本文介紹如何在GKE(GCP Kubernetes)安裝dapr。 相關文章: dapr本地托管的服務調用體驗與Java SDK的Spring Boot整合 dapr入門與本地托管模式嘗試 2 安裝GKE ...
  • 摘要:在jvm中有很多的參數可以進行設置,這樣可以讓jvm在各種環境中都能夠高效的運行。絕大部分的參數保持預設即可。 本文分享自華為雲社區《為什麼需要對jvm進行優化,jvm運行參數之標準參數》,作者:共飲一杯無。 我們為什麼要對jvm做優化? 在本地開發環境中我們很少會遇到需要對jvm進行優化的需 ...
  • 背景 我們的業務共使用11台(阿裡雲)伺服器,使用SpringcloudAlibaba構建微服務集群,共計60個微服務,全部註冊在同一個Nacos集群 流量轉發路徑: nginx->spring-gateway->業務微服務 使用的版本如下: spring-boot.version:2.2.5.RE ...
  • 基於php+webuploader的大文件分片上傳,帶進度條,支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況)。文件上傳前先檢測該文件是否已上傳,如果已上傳提示“文件已存在”,如果未上傳則直接上傳。視頻上傳時會根據設定的參數(分片大小、分片數量)進行上傳,上傳過程中會在目標文件夾中生成一個臨 ...
  • 基於php大文件分片上傳至七牛雲,使用的是七牛雲js-sdk V2版本,引入js文件,配置簡單,可以暫停,暫停後支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況),可以配置分片大小和分片數量,官方文檔https://developer.qiniu.com/kodo/6889/javascrip ...