如何将你的前端项目上传到Github仓库并且部署

小孙不够睡

于 2023-03-03 15:58:11 发布

阅读量820

点赞数

分类专栏： git 文章标签： github git

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/qq_44785351/article/details/129321940

版权

git 专栏收录该内容

3 篇文章

订阅专栏

如何将你的前端项目上传到Github仓库并且部署

新建仓库

仓库名称为你的项目名，可以生成一个readme文件，不生成也行。
在这里插入图片描述

项目打包

首先打开你的.gitignore文件看看有没有/dist，如果有的话要删掉这一行，因为这个文件的作用就是告诉git哪些文件不上传，而我们要上传的就是dist，所以必须删除掉
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-svgZTA17-1677829772703)(C:\Users\stephen\AppData\Roaming\Typora\typora-user-images\image-20230215171416230.png)]$

在本地根目录下运行

npm run build

然后你就会发现文件夹中生成了一个dist文件夹，里面是打包好的原生的html, css, js文件，此时你打开index.html应该能直接在网页中看到样式，如果看不到那就说明打包有错误，F12查看报错并解决。

在这里插入图片描述

上传项目

将你本地的项目上传到github仓库中，具体步骤可以看我之前写的这篇博客：使用Git上传项目到Github仓库中

打包并发布

接下来点击settings -> pages，在source中选择deploy from a branch, branch 选择你要部署的branch，目录选择root，点击save。

在这里插入图片描述

可以在actions中查看构建是否完毕，没报错的话直接访问地址: 仓库地址+/dist/ 就能看到了，毕竟打包的项目 index.html 在这个目录下

在这里插入图片描述

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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