当前位置: 首页 > news >正文

使用netlify实现自动化部署前端项目(无服务器版本)

介绍

  1. 本文以 github仓库进行介绍关联netlify的无服务前端自动化部署。
  2. 用途:个人网站设计、小游戏等
  3. 当然这只是让你入门~具体细节等待你自己去探索

实现

  1. 打开官方网站
    在这里插入图片描述
  2. 如果没有注册过的账户,你需要使用 github 去进行登录。注册完成后会自动给你提示填写创建仓库信息,可忽略性看以下操作。
  3. 进入首页

在这里插入图片描述
在这里插入图片描述

  1. 因为我给了所有权限,于是可以看到以下面板,我们以test-demo举例子(点击它)
    在这里插入图片描述
  2. 然后进入到以下页面
    (1)Build command:你的打包命令(此处一般为填写 npm run build 或者 yarn build)(具体看的位置是package.json中script中看项目打包命令)
    (2)Publish directory:这里填写你打包后文件夹的名字叫什么(一般为dist,dist下一级必须有index.html文件!否则指向你项目的入口index.html文件)
    (3)Branch to deploy:这个是选择你github上哪个分支
    (4)操作完以上操作后直接点击 deploy site 进行下一步

在这里插入图片描述

  1. 执行完上一步后会看到以下页面,然后这里在进行build构建,咱们点进去,可以看见正在构建,还能看到使用的node版本信息等。
    在这里插入图片描述
    在这里插入图片描述
    滚动到最上面去点击按钮进行查看构建后的页面是否正常
    在这里插入图片描述

  2. 当整个过程没有飘红的时候代表着你 yarn build 执行成功。这也意味着你成功完成了无服务自动化部署项目了。咱们可以试试修改代码然后重新提交。
    在这里插入图片描述

温馨提醒

  1. 有的项目(vue-cli)如果在配置文件中添加了publicPath: '/xxxxxx'则会遇到访问白屏bug,置位publicPath: ''就行了
  2. 使用vue3的时候同时使用了vue2的写法可能会遇到需要重新下载依赖的问题(本地打包没得这个问题),跟着提示下载依赖就行了。
  3. 构建中如果出现红色提醒,则代表着打包构建有问题,需自己捋捋,建议在本地打包成功后再做尝试。
  4. 如果你访问后发现是这个页面,则说明你打包那一步失败了(飘红了~去看看打包过程,哪里报错改哪里),或者你配置的第五步Publish directory错误了。
    在这里插入图片描述
    (1)Publish directory 这个地址可以更改,如下图
    在这里插入图片描述

相关文章:

使用netlify实现自动化部署前端项目(无服务器版本)

介绍 本文以 github仓库进行介绍关联netlify的无服务前端自动化部署。用途:个人网站设计、小游戏等当然这只是让你入门~具体细节等待你自己去探索 实现 打开官方网站 如果没有注册过的账户,你需要使用 github 去进行登录。注册完成后会自动给你提示填…...

MATLAB点云数据处理(二十九):可视化点云之pcshow参数详解与快捷键操作

文章目录 1 pcshow简述2 最简单的pcshow3 带参数的pcshow3.1 点大小参数----MakerSize3.2 背景色参数----Background3.3 指定竖直轴参数----VerticalAxis3.4 指定垂直轴方向参数----VerticalAxisDir3.5 投影参数----Projection3.6 指定可视化平面参数----ViewPlane3.7 颜色渲染…...

顺序表——重置版

本期我们来实现数据结构的顺序表(这个之前写过一次,不过本期和之前可能会略有不同,但大体相同),大家可以看一下我们之前完成的顺序表 (6条消息) 顺序表及其多种接口的实现_顺序表类中实现接口方法_KLZUQ的博客-CSDN博客…...

PyQt5自然语言处理入门案例笔记

前言 最近想将自然语言处理的项目进行可视化,尽量还是使用回Python语言,因此打算用PyQt来实现相应的功能。 入门案例 一个简单的自然语言处理的demo,使用PyQt框架,该demo可以读取文本文件,对文件中的文本进行情感分…...

使用 CSS 替换表行颜色?

跳到主内容 我正在使用一个带有交替行颜色的表格。 tr.d0 td {background-color: #CC9999;color: black; } tr.d1 td {background-color: #9999CC;color: black; }<table><tr class"d0"><td>One</td><td>one</td></tr>&…...

智能家居控制系统

&#x1f941;作者&#xff1a; 华丞臧. &#x1f4d5;​​​​专栏&#xff1a;【项目经验】 各位读者老爷如果觉得博主写的不错&#xff0c;请诸位多多支持(点赞收藏关注)。如果有错误的地方&#xff0c;欢迎在评论区指出。 推荐一款刷题网站 &#x1f449; LeetCode刷题网站…...

Linux 进程:fork()与vfork()的对比

目录一、fork函数二、vfork函数1.函数的原理2.函数的隐患3.解决函数隐患的方法在Linux的进程学习中&#xff0c;常使用fork函数来创建子进程&#xff0c;但其实还有一个vfork函数也可以创建子进程。但是这两个函数的实现机制不同&#xff0c;fork函数使用了写实拷贝技术&#x…...

环境搭建02-Ubuntu16.04 安装CUDA和CUDNN、CUDA多版本替换

1、CUDA安装 &#xff08;1&#xff09;下载需要的CUDA版本 https://developer.nvidia.com/cuda-toolkit-archive &#xff08;2&#xff09;安装 sudo sh cuda_8.0.61_375.26_linux.run&#xff08;3&#xff09;添加环境 gedit ~/.bashrc在文件末尾添加&#xff1a; ex…...

HOT100--(3)无重复字符的最长子串

点击查看题目详情 大思路&#xff1a; 创建哈希表&#xff0c;元素类型为<char, int>&#xff0c;分别是字符与其对应下标 用哈希表来存储未重复的子串&#xff0c;若有重复则记录下当前子串最大值maxhashsize 并且开始以相同方法记录下一子串 遍历完成以后&#xff0c…...

vue keep-alive多层级路由支持

keep-alive使用 属性值 1.include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 2.exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 3.max - 数字。最多可以缓存多少组件实例。 注&#xff1a;匹配首先检查组件自身的 name 选项&#xff0c;如果 nam…...

从源码角度看React-Hydrate原理

React 渲染过程&#xff0c;即ReactDOM.render执行过程分为两个大的阶段&#xff1a;render 阶段以及 commit 阶段。React.hydrate渲染过程和ReactDOM.render差不多&#xff0c;两者之间最大的区别就是&#xff0c;ReactDOM.hydrate 在 render 阶段&#xff0c;会尝试复用(hydr…...

ARM基础 -- 2

文章目录一、可编程器件的编程原理1.1 电子器件的发展方向1.2 可编程器件的特点1.3 整个编程及运行过程二、指令集对CPU的意义2.1 汇编语言与C等高级语言的差异2.2 汇编语言的本质2.2.1 编程语言的发展过程2.2.2 汇编语言的特点和用途三、RISC和CISC的区别3.1 复杂指令集CPU --…...

Java 类型转换

Java 类型转换 int转Integer int int0 1; Integer integer1 int0; // 自动装箱 Integer integer2 new Integer(int0); Integer integer3 Integer.valueOf(int0);Integer转int Integer integer0 2; int int1 integer0; // 自动拆箱 int int2 integer0.intValue(); // …...

【Java开发】JUC基础 05:线程通信/协作

1 生产者消费者问题&#x1f4cc; 线程通信应用的场景可以简单地描述为生产者和消费者问题假设仓库中只能存放一件产品&#xff0c;生产者将生产出来的产品放入仓库&#xff0c;消费者将仓库中产品取走消费&#xff1b;如果仓库中没有产品&#xff0c;则生产者将产品放入仓库&a…...

哪些工具可以实现在线ps的需求

在线Photoshop有哪些工具可以选择&#xff1f;在 Adobe 的官网上就能够实现&#xff0c;很惊讶吧&#xff0c;其实 Adobe 官方推出了在线版本的 Photoshop 的&#xff0c;尽管目前还是 Beta版本&#xff0c;但其实也开放了蛮久了。编辑切换为居中添加图片注释&#xff0c;不超过…...

如何使用C2concealer生成随机化的C2 Malleable配置文件

关于C2concealer C2concealer是一款功能强大的命令行工具&#xff0c;在该工具的帮助下&#xff0c;广大研究人员可以轻松生成随机化的C2 Malleable配置文件&#xff0c;以便在Cobalt Strike中使用。 工具运行机制 开发人员对Cobalt Strike文档进行了详细的研究&#xff0c;…...

网络基础之IP地址和子网掩码

一、IP地址IP地址是IP协议提供的一种统一的地址格式&#xff0c;它为互联网上的每一个网络和每一台主机分配一个逻辑地址&#xff0c;以此来屏蔽物理地址的差异。习惯上&#xff0c;我们用分成四段的十进制数表示IP地址&#xff0c;从0.0.0.0 一直到255.255.255.255。互联网上的…...

G1D54-CRF

一、CRF的输入X是什么&#xff1f;是构造的特征吗&#xff1f; 如此&#xff0c;CRF的x只用于状态函数吗&#xff1f; CRF的例子解释调用代码 机器之心 知乎忆榛 此处线性链条件随机场的特征函数形式被统一了&#xff1f; BilstmCRF&#xff0c;强烈推荐&#xff01;&#x…...

vue3 使用defineAsyncComponent与component标签实现动态渲染组件

内容有些啰嗦&#xff0c;内容记载了当时遇到了bug以及解决问题的思路。 业务场景简述&#xff1a; 前端做配置化组件&#xff0c;通过url内的唯一标识&#xff0c;请求后端sql 哪取页面配置信息&#xff0c;前端通过配置信息动态渲染查询表单&#xff0c;导出、表格&#xff…...

Linux下 C/C++ NTP网络时间协议详解

NTP&#xff08;Network Time Protocol&#xff0c;网络时间协议&#xff09;是由RFC 1305定义的时间同步协议。它是通过网络在计算机系统之间进行时钟同步的网络协议。NTP 在公共互联网上通常能够保持时间延迟在几十毫秒以内的精度&#xff0c;并在理想条件下&#xff0c;它能…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...