create-react-app创建项目并用git上传至GitHub及展示预览效果
1、在本地中创建一个项目所在的文件夹
2、npm -g create-react-app
3、在此文件夹下 create-react-app react-demo (项目名)
4、cd react-demo
5、npm start(等待一会浏览器自动开启)
6、开始噼里啪啦写你需要的代码
7、(重点)在package.json配置文件中加一句: “homepage”: “./” (为下面打包做准备,如果不加这句话,那么在预览时开启的页面空白,原因路径不对)
8、npm run build(打包)
9、在你的GitHub上新建个仓库,把地址复制下来备用
10、项目所在文件夹下git init
11、git add . (点的意思是所有文件,把所有文件添加上去)
12、git commit -m "xxxxxxxxxx"(提交信息)
13、git remote add origin https://github.com/xxx/xxx(刚才你在GitHub上保存的地址)
14、git pull origin master(上传之前先拉一下,第一次不拉也行,但是之后提交最好想成这个习惯)
15、git push -u origin master(把你的代码提到GitHub上)
16、此时,在GitHub对应的仓库上,就可以看到刚才提交的代码了。
接着,点击“setting”;
找到GitHub Pages,source中点击下面按钮切换到master branch,点击save;
就可以看到一个链接了,点击链接,发现出现的是你项目中的README.md;
在链接后面加上 /build/# 回车后,即可看到预览效果。
之后的修改代码后,重新npm run build ,重复11~15步骤即可。
create-react-app创建项目并用git上传至GitHub及展示预览效果的更多相关文章
- 如何把项目通过git上传之github完整教程
作为一个有追求的程序员,需要撸点自己的开源项目,虽然我现在只是在学着造轮子,但这并不影响我成为大神的心.Github是基于git实现的代码托管,很多程序员在上面托管自己的开源项目,我使用Github也 ...
- C# asp:FileUpload上传文件使用JS实现预览效果
js代码: <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview() { va ...
- 用命令行在本地创建一个库并上传到Github
1 如何在本地创建一个仓库并上传到github? 基本步骤: $ mkdir blog //在桌面上创建一个叫"blog"的目录 $ cd blog //"cd blo ...
- React项目打包并部署到 Github 展示预览效果
React项目打包并部署到 Github 展示预览效果 当开发者模式结束,准备打包的时进行以下步骤: 在package.json配置文件中加一句: "homepage": &quo ...
- .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件
asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:n ...
- java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载
java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载 实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览 采用Spring+Sp ...
- 【已采纳】新项目第一次怎么上传到github里面
言归正传,最近学习了怎么将新创建的本地代码上传到github上,这里简单的记录一下,我喜欢使用命令行,这里全用命令行来实现,不了解git命令的可以去了解下. 第一步:建立git仓库 cd到你的本地 ...
- Windows下如何将一个文件夹通过Git上传到GitHub上(转)
在通过windows系统的电脑上写代码,需要将项目上传到GitHub上去.比如在Pycharm上写Django后端,整个项目是一个文件夹的形式,那么怎么才能这个文件夹通过Git命令上传到GitHub上 ...
- Mac git 上传到 github
上传本地项目到github 1.初始化本地项目 进入到你的项目,根目录下git init,会在你的项目的根目录下多出一个.git的文件夹,也许你的mac隐藏了,但是用命令行或者vscode等工具是可以 ...
随机推荐
- Android 开发 8.0版本启动Service的方法
前言 google在更新Android8.0后对Service的权限越发收紧.导致目前想要启动服务必需实现服务的前台化(否则在服务启动5秒后,系统将自动报错).下面我们就来看看如何在8.0上启动服务 ...
- 索引跳跃式扫描(INDEX SKIP SCAN)
索引跳跃式扫描(INDEX SKIP SCAN) 索引跳跃式扫描(INDEX SKIP SCAN)适用于所有类型的复合B树索引(包括唯一性索引和非唯一性索引),它使那些在where条件中没有对目标索引 ...
- 69.纯 CSS 创作一个单元素抛盒子的 loader
原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...
- IntelliJ IDEA神器使用技巧 慕课
1,高效定位代码:无处不在的跳转. 项目之间的跳转(打开了多个窗口):ctrl+alt+] 或ctrl+alt+[ 查找窗口 shift+ctrl+a 输入recent file 最近打开的文件. ...
- 彻底搞懂Scrapy的中间件(二)
在上一篇文章中介绍了下载器中间件的一些简单应用,现在再来通过案例说说如何使用下载器中间件集成Selenium.重试和处理请求异常. 在中间件中集成Selenium 对于一些很麻烦的异步加载页面,手动寻 ...
- php把网络图片转Base64编码。
/** 把网络图片图片转成base64 * @param string $img 图片地址 * @return string */ /*网络图片转为base64编码*/ function imgtob ...
- java web复习(二)
三.四种属性范围及应用 setAttribute(String name,Object o)设置属性 getAttribute(String name)根据属性名取得属性 removeAttribut ...
- pyqt5 -—-布局管理
绝对布局 例如: 我们使用move()方法定位了每一个元素,使用x.y坐标.x.y坐标的原点是程序的左上角. lbl1 = QLabel('Zetcode', self) lbl1.move(15, ...
- 循环队列搜索 Search in Rotated Sorted Array
这里比较重要的是,不要一上来就判断mid 和 target有没有关系.因为数组是无序的,这样的判断毫无结论,只会搞的更复杂.应该先想办法判断出哪一侧是有序的. class Solution { pub ...
- a 标签实现分享功能
在网页中,经常会用到分享功能,例如分享到qq,分享到微信,分享到微博等,但是怎么实现呢?一直没有想清楚这个问题,觉得好高大上的样子,于是在网上找了一些资料,也没有看出个什么所以然来: 于是有些心急了, ...