第七章:使用Netlify零成本部署组件文档

article/2025/11/4 4:38:12

第七章:使用Netlify无成本发布组件文档

为什么使用Netlify?

一开始一共有三个方案:
1、Github Page
2、Netlify
3、Vercel
Github Page只支持一个repo发布一个网站,而我们的项目是一个mononrepo项目,后续可能还有其他需要部署的项目,pass掉;
通过实操,目前通过vercel部署的网站正常无法访问,翻墙也不行,pass掉;

实操:

Netlify官网
进入官网,点击右上角sign up;
选择github注册:
在这里插入图片描述
点击add new site:
在这里插入图片描述
然后:Import an existing project
在这里插入图片描述
选择github:
在这里插入图片描述
然后选择github账号中的repo:
在这里插入图片描述
选择react-ui-teaching,然后:
在这里插入图片描述
选择分支;
设置build配置:
在这里插入图片描述
等待build部署:
在这里插入图片描述
在这里插入图片描述
显示缺少.gitmodules文件:
原因是我们的monorepo项目中个子项目react-ui-teaching;
我们可以将monorepo项目名字修改为react-ui-teaching-monorepo;
然后新建一个repo放置子项目,这样可以互不干扰;
然后将子项目push到github;
在monorepo项目根目录下新建文件 .gitmodules:

[submodule "react-ui-teaching"]path = packages/react-ui-teachingurl = https://github.com/henuGM/react-ui-teaching

push之后再重新试一下:
在这里插入图片描述
command错误,这样,我们直接使用npx dumi build命令构建:
在这里插入图片描述
再试一次;
在这里插入图片描述
构建成功;
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/a65b08cf2e564cdabebd30399816ca56.pn

点domian setting:
在这里插入图片描述
Edit site name:
在这里插入图片描述修改成功:
在这里插入图片描述


http://chatgpt.dhexx.cn/article/gjdJQtOO.shtml

相关文章

React项目全球新闻发布管理系统 - 新版问题解决方式整理及部署网站至 Netlify

整理了一下新版的变化以及遇到的坑的解决办法,最后也会分享将网站及接口部署的方式。 千锋前端-React全家桶_React项目全球新闻发布管理系统 https://www.bilibili.com/video/BV1fw411d7R5 文章目录 P4P5P6P11P15P17P18P22P29P30P34P38P41P43P45P50P67进阶: 多语系网…

Coolify系列01- 从0到1超详细手把手教你上手Heroku 和 Netlify 的开源替代方案

什么是Coolify 一款超强大的开源自托管 Heroku / Netlify 替代方案coolLabs是开源、自托管和以隐私为中心的应用程序和服务的统称 为什么使用Coolify 只需单击几下即可托管你的应用、数据库或其他开源服务,等。它是 Heroku 和 Netlify 的一个替代方案。通过 Cool…

.NET Framework 框架

20世纪90年代以来出现的3种典型的组件技术: 1)OMC(对象组件模型)的CORBA 2)Microsoft的COM/DCOM 3)Sun公司的JavaBeans 在2002年,微软发布了.NET框架的第一个版本,声称其解决了旧问…

vercel和netlify部署代码并解决接口代理转发的问题(和Nginx功能一样)

前言 部署过程就不说了,部署完成后是这样子的 然后访问链接,无法访问 解决 依次点击 Settings–>Domains,在输入框中输入你的域名并点击 Add 按钮。 以此域名为例子demo.gshopfront.dreamlove.top为例,点击添加 我们前往域名管理系统,记录下绿色的值以腾讯云的…

部署Netlify站点博客

Netlify站点部署静态博客 今天尝试把站点部署在Netlify上,因为部署在GitHub Pages上,国内访问速度太慢了,所以就尝试一下别的站点,部署成功之后发现速度还是不太行,后边继续找找原因 Netlify 部署的地址在这里 下图…

使用Hexo+github+netlify快速搭建个人博客网站

1 写在开头 倒腾了好几天,算是做出了一个有点样子的个人博客网站。便学各位大佬也写一个搭建教程,总结一下个人踩坑经验,也希望能对他人略有作用。 博客演示(欢迎来留言交流) 为什么选择Hexo?答&#xff1…

使用 netlify 部署你的前端应用

我前几天写了一篇文章, 如果你想搭建一个博客 ,其中提到了使用 netlify 做博客托管服务。 netlify 可以为你的静态资源做托管,就是说它可以托管你的前端应用,就像 github page 那样。不过,它不又只像 github page 那么…

netlify国内快吗

Netlify国内快吗? Netlify vs 21云盒子 Netlify 是一家提供 JamStack(静态网站)托管的平台,支持自动从Github等仓库拉取代码, 按自定义构建方式进行构建,最后把生成的静态网站进行发布; 在这基础上同时也支持自定义域名,自动申请SSL证书等…

Netlify前端自动化部署工具

一、使用github或者gitlab登陆netlify 首先,打开netlify网站(https://app.netlify.com/) 然后使用github或者gitlab账号登录。 二、根据github/gitlab仓库创建网站 点击New site from Git按钮: 根据你的仓库所在平台选择,以下三选一&#x…

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

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

Netlify静态资源托管之部署自动化

关注「WeiyiGeek」公众号 将我设为「特别关注」,每天带你玩转网络安全运维、应用开发、物联网IOT学习! 0x00 基础介绍 0x01 Netlify 使用 0x00 基础介绍 Q: Netlify 是什么? Netlify 是一个提供静态资源网络托管的综合平台,一个直观的基于…

如何使用netlify部署vue应用程序

什么是Netlify? Netlify是一个现代网站自动化系统,其JAM架构代表了现代网站的发展趋势。所谓JAM,就是指基于客户端JavaScript、可重用API和预构建Markup标记语言的三者结合。 有了Netlify,我们只要在本机Git中写前端代码&#xff…

C语言:strlen() --- 计算字符串长度

C语言 基础开发----目录 一、strlen() 简介 1. 函数原型 unsigned int strlen(char *str);2. 参数 str - - 要计算长度字符串的地址指针 3. 功能 计算给定字符串的字节长度&#xff0c;直到空字符结束&#xff0c;但不包括空字符。 4. 头文件 #include <string.h>…

C语言 计算字符串的长度

方法一&#xff1a; #include<stdio.h> int length(char *s){char *ps;while(*p!\0){ //等同于 *pp;}return p-s; } void main(){char s[32];printf("请输入一个字符串&#xff1a;");scanf("%s",&s);printf("长度为&#xff1a;%d",l…

计算字符串长度的五种方法

方法一&#xff1b; ------------------------------------------------------------ 方法二; ------------------------------------------------------------ 方法三&#xff1b; ------------------------------------------------------------ 方法四利用sizeof()&#x…

计算字符串长度

用三种方法计算字符串的长度&#xff1a; 字符串&#xff1a;“abcd”&#xff0c;在储存的时候&#xff0c;字符串的最后一位会以一个终止符 \0&#xff0c;所以求取的就是终止符前的字符数。 1.计数器方式 通过设置一个计数器&#xff0c;然后用指针字符串从头扫描&#xf…

计算字符串长度的三种方法(库函数 指针 )【详解】

目录 求字符串长度的一般原理方法一&#xff1a;strlen函数函数原型使用方法 方法二:指针整数方法三&#xff1a;指针-指针总结&#xff1a; 求字符串长度的一般原理 求字符串长度简单来说就是计算一个字符串(字符数组)中元素的个数即从数组头部计数&#xff0c;直到遇到字符串…

微信小程序怎么开发(小程序开发文档)

微信小程序是一种全新的连接用户与服务的方式&#xff0c;它可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。 2017年1月9日~2018年1月9日&#xff0c;小程序正式上线一周年。上线以来&#xff0c;小程序不断地释放新能力&#xff0c;迭代更新&#xff0c;…

【小程序】一文带你了解微信小程序开发(小程序注册/开发工具的下载)

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列专栏&#xff1a;小程序开发基础教程 &#x1f451;名言警句&#xff1…

小程序设计文档

状态码介绍 {status: 状态码msg: 消息data: 响应数据 }code解释0success1error10need_login2illegal_argument 介绍 用到的接口 小程序登陆能获取的信息有 wx.request的返回为 data里面包的是后端服务器返回的值 小程序登陆时序图 登陆流程 微信小程序wx.login()拿到…