将react项目部署到Gitpage

最新推荐文章于 2024-08-25 07:21:03 发布
最新推荐文章于 2024-08-25 07:21:03 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： git
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/que_li/article/details/80566111
版权

1.在git上新建git仓库。

2.将git仓库clone到本地。然后在git仓库文件夹中新建项目

3.将写完的项目进行build

npm run build

4.安装 gh-pages

npm install gh-pages --save-dev

5.进入package.json
这里写图片描述

"homepage": "https://queli1990.github.io/test"
"predeploy": "npm run build",
"deploy": "gh-pages -d build"

6.yarn run deploy
(如果这一步报错，确认是否已经安装yarn，如果没有第1步：

npm install yarn

第2步：yarn)

7.到git仓库中，setting下设置。
这里写图片描述
“homepage”: “https://queli1990.github.io/test”

*原理：进行npm install gh-pages --save-dev
之后其实是在git仓库下多了一个gh-pages分支。然后在setting下将主页设置为上传的build文件夹中的index.html就会自动读取页面内容。*

视频链接：https://www.rails365.net/movies/react-ji-qiao-2-ba-react-ying-yong-bu-shu-dao-github-pages（视频中默认已将代码push到git仓库）

Que_Li
关注
专栏目录
将 React 应用程序部署到 GitHub 页面
分享身边生活经验blog
10-15 1050
GitHub Pages 是 GitHub 的一项服务，可让您将 HTML、JavaScript 和 CSS 文件添加到存储库并创建托管静态网站。该网站可以托管在 GitHub 的域（例如，）或您自己的自定义域上。React 应用程序可以以类似的方式托管在 GitHub Pages 上。我们可以免费将我们的 React 应用部署到 GitHub 的域，但 Github Pages 也支持自定义子域 Apex 域。支持的自定义域例子www子域自定义子域顶点域现在，如果我们导航到React App。
使用github部署react项目
weixin_57405849的博客
08-05 322
': HTTP/2 stream 1 was not closed cleanly before end of the underlying stream—强制修改—git config --global http.version HTTP/1.1—然后就好了git push origin main)如上图（不要着急save!等下面配完再说），github-settings-pages-source: deploy from a branch-main-/docs。[win的指令是不同的：]
在Github Pages上部署React项目
qq_43445362的博客
05-07 1281
1、确保项目已经提交到github上 2、build已有项目 yarn build 3、安装gh-pages yarn add gh-pages --save-dev 4、在项目对应github仓库的setting中设置pages （1）修改Source，可以先选择master开启页面 （2）获取你的网页地址 5、修改package.json 在package.json中添加homepage字段，值为刚刚从github上获取的地址 { "name": "g-shop", "version":
GitHub自动部署教程
最新发布
gitblog_00358的博客
08-25 782
GitHub自动部署教程 Github-Auto-Deploya server that allows you to automatically deploy the latest version of your github project at each git push项目地址:https://gitcode.com/gh_mirrors/gi/Github-Auto-Deploy 项目介...
上传react项目到github
阿秋吖的博客
02-08 477
初始化 git init 添加 git add . 提交 git commit -m "init app" 链接远程仓库 git remote add origin https://github.com/aqiuya-lang/ASCManage.git 推送到远程仓库 git push -u origin master
使用GitHub Pages和GitHub Actions部署React应用
前端全栈开发者
05-21 483
介绍 我最近用Create React App starter模板创建了一个网站来演示我开发的一个npm包。我认为使用GitHub页面部署这个站点是非常简单的，然而，我错了。经过反复试验，我设法解决了这个问题。本文的目的是重新创建该场景，并带领您完成解决我们一路上遇到的每个问题的过程。 1.起点 让我们从一个共同的基础开始。我们先用Create React App工具创建一个React应用，同时将代码添加到GitHub仓库。我使用了以下命令来生成这个示例React应用。 npx create-react-.
React项目部署在阿里云服务器ECS
01-07
本来计划是将一个React工程部署在自己的Centos虚拟机中，但是因为一些网络和安全问题暂时停止了这个计划，于是就把该项目转移到阿里云服务器中，这篇笔记记载了如何从第一步开始直到浏览器通过IP可以访问你的React...
使用Jenkins部署React项目的方法步骤
10-17
在本文中，我们将探讨如何使用Jenkins部署React项目，这是一个自动化构建和部署的过程，可以极大地提高开发效率并减少人为错误。Jenkins作为一个流行的持续集成和持续部署(CI/CD)工具，可以帮助我们实现React项目的...
将 create-react-app 创建的 react 项目部署到gitee pages
qq_43194368的博客
01-23 1102
0 前提 react在本地通过npm start能正常运行 已将创建好的react项目通过git上传到远程仓库 1 如何将项目发布成静态页面 1.1 安装 gh-pages npm install gh-pages --save-dev 1.2 修改 package.json { // ... "homepage": "./", "dependencies": { // ... }, "scripts": { // ... "deploy": "gh-pag
React从开始搭建到项目部署到服务器
热门推荐
胖叔的博客
05-22 1万+
导语 什么是React？Vue跟React相比的区别是哪些？为什么大厂都会选择React？ 区别 设计模式 React采用的是MVC模式（严格的view层）；Vue采用的是MVVM模式； 组件写法不同； react主张jsx+inline style,也就是讲HTML、css写到js中，一切皆js,vue则是webpack+Vue-loader的单文件组件格式，即HTML、css...
React项目部署至github预览
ONEGISER的博客
12-30 693
React项目部署至github预览
github-pages-react
03-17
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（we
reactgit
03-29
该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行该应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint
07-借助Github Page把你的React项目部署到线上环境（转载自简书）【如何在github page上部署react项目？】
Lin_hahahaha的博客
10-01 935
文章目录转载自简书：[借助Github Page把你的React项目部署到线上环境](https://www.jianshu.com/p/02c86540d324)引言具体步骤1.保证你的React项目是可以正常运行的2.在github上新建仓库3.将本地代码同步到github仓库上4.修改本地React项目的 package.json文件1.配置homepage：2.配置发布选项5.安装 gh-pages6.部署项目到github page上7.后续有改动项目，要重新打包部署 转载自简书：借助Github
react搭建脚手架和上传到gitee
qq_29116547的博客
11-13 682
搭建脚手架： 项目不需要的文件，可以安装vim .gitignore 1.从gitee上拉下创建的项目 git clone 项目路径 2.初始化项目 yarn init 3.上传到gitee $ git add . //添加本地文件 git commit -m '备注' //写备注 git push //上传到码云 git push -u origin ...
react项目部署到GitHub上
将心_的博客
10-15 1718
将react项目部署到GitHub上来实现一个类似线上服务器的效果，可以预览我们的react项目 1.正常创建react项目，写好react项目 2.新建一个GitHub仓库 3.在自己的react项目里面找到package.json文件 更改里面的配置项 （1）添加homepage这一项，后面的地址和GitHub仓库地址不一样是.io结尾的 （2）npm安装gh-pages：npm i gh-pages -D （3）在scripts里面添加两句话，最后两句 4.本地文件上传到GitHub仓库 （1）G
【前端实践】把react项目部署到GitHub Pages（vite）
Everglowwwwww的博客
04-26 1014
2024.5.8亲测 😀。
reactapp项目在gitee上部署静态页面 保姆级教程
qq_40844651的博客
10-07 854
热爱探索的小乔，在解决问题的道路上，越走越远,git小白
React git
学习笔记
10-04 200
git init 创建 .git 文件夹 创建 .gitignore文件 : node_modules/ git add . 将全部文件设置为 staged 状态 git commit -m "Initial commit" 首次commit git status 查看状态 文件修改后再次add: git add changed_file 然后commit：git commit -m "some message" ...
将react 应用部署到gitee
08-28
### 回答1： 要将React应用部署到Gitee Pages，可以按照以下步骤操作： 1. 将React应用打包为静态文件。可以使用以下命令在应用的根目录下运行： ``` npm run build ``` 这将在`build`目录中生成应用的静态文件。 2. 创建一个名为`gh-pages`的分支。可以使用以下命令在本地创建并切换到`gh-pages`分支： ``` git checkout -b gh-pages ``` 3. 将`build`目录下的所有文件添加到`gh-pages`分支。可以使用以下命令： ``` git add build/* ``` 4. 提交更改并推送到Gitee仓库： ``` git commit -m "Deploy to Gitee Pages" git push origin gh-pages ``` 5. 在Gitee仓库中打开“设置”选项卡，向下滚动到“Gitee Pages”部分。 6. 在“源”下拉菜单中选择`gh-pages`分支，并选择`/`作为部署路径。 7. 单击“保存”按钮，Gitee Pages将开始构建并部署您的React应用。部署完成后，您可以访问`https://<username>.gitee.io/<repository-name>/`来查看应用。 请注意，构建和部署可能需要几分钟时间。如果您遇到任何错误或问题，请确保已正确配置您的Gitee仓库，并检查Gitee Pages的构建日志以获取更多详细信息。 ### 回答2： 将 React 应用部署到 Gitee 平台需要以下步骤： 1. 在 Gitee 上创建一个新的项目仓库，选择"空仓库"的选项。 2. 将你的 React 应用的代码上传到该仓库。你可以使用 Git 命令行或 Gitee 提供的仓库管理工具将代码推送到远程仓库。 3. 在项目根目录下，创建一个名为 `.gitignore` 的文件，将不需要上传到仓库的文件和文件夹添加到该文件中，例如 `node_modules` 文件夹。 4. 使用终端进入项目根目录，运行以下命令安装项目的所有依赖：`npm install` 或 `yarn install`。 5. 在命令行中运行 `npm run build` 或 `yarn build`，以生成部署所需的生产版本的代码。 6. 在生成的 `build` 文件夹中的所有文件是应用的生产版本。将这些文件夹和文件上传到 Gitee 仓库。 7. 在 Gitee 仓库页面中，找到部署设置选项。选择适合你应用类型的部署选项。对于一个 React 应用，可以选择静态页面部署选项。 8. 配置部署选项，指定正确的访问路径和部署的分支。按照Gitee的说明，配置你的部署选择。 9. 完成配置后，点击保存并部署，Gitee 将自动完成从项目仓库中拉取代码、安装依赖、构建和部署的过程。 10. 完成部署后，Gitee 将为你的应用生成一个访问链接，你可以通过该链接访问和共享你的 React 应用。 以上是将 React 应用部署到 Gitee 的大致步骤，根据你的应用需求和 Gitee 平台的具体配置可能会有所差异。建议在部署之前，详细阅读 Gitee 平台相关的文档和指南。 ### 回答3： 将 React 应用部署到 Gitee 的步骤如下： 1. 首先，在 Gitee 上创建一个新的仓库，用来存放你的 React 应用代码。在 Gitee 的主页上点击"创建仓库"按钮，填写仓库名称和描述，选择仓库可见性，然后点击"创建仓库"按钮完成创建。 2. 在本地计算机上，进入你的 React 应用的代码目录。 3. 初始化 Git 仓库，并将你的应用代码添加到仓库中。在终端中执行以下命令： ```shell git init git add . git commit -m "Initial commit" ``` 4. 在 Gitee 上的仓库页面中，复制仓库的 SSH 或 HTTPS 地址。 5. 在终端中执行以下命令，将本地仓库与 Gitee 远程仓库进行关联： ```shell git remote add origin <Gitee 仓库地址> ``` (Gitee 仓库地址是步骤4中复制的地址) 6. 提交代码到 Gitee 远程仓库： ```shell git push origin master ``` 7. 等待代码推送完成后，刷新 Gitee 仓库页面，即可看到你的 React 应用代码已经成功部署到 Gitee 上。 请注意，以上步骤假设你的计算机上已经配置了 Git，并且你已经在 Gitee 上创建了账户。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值