如何在github上部署自己的前端项目
很多时候我们想需要一个地址就可以访问自己的前端作品,
但是注册一个服务器和域名是需要花钱,很多小伙伴都不愿意,
其实这种前端静态页面github就可以帮我们预览其效果,而且只要在有网的情况下都可以访问的。
下面我就以vue.js为例,如何一步一步的在github上部署自己的前端项目的。
我的案例:https://husanfeng.github.io/vue-components-web/
首先你需要一个github账号,所有还没有的话先去注册吧!
https://github.com/
我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可:
https://git-for-windows.github.io/
1.1 创建一个本地项目
进到自己的本地项目文件下,右键-选择git bash here(如下图)
1.2 建立本地仓库
如上点击git bash here之后即可打开git客户端黑窗口,
输入命令: git init 初始化,
初始化成功后你会发现项目里多了一个隐藏文件夹.git(.git是隐藏文件,可通过设置显示隐藏文件夹令其显示)
然后,将项目中所有文件添加到仓库
输入指令: git add .(此处有空格)
注意: git是不能管理空的文件夹的,文件夹里必须有文件才能add
接着,把文件提交到仓库,双引号内是提交注释。
输入指令: git commit -m "注释内容"
1.3 创建github仓库
登录个人github账户之后,选择 New repository,
接着,根据提示创建一个仓库
如此,一个名为vue-components-web的github仓库就创建成功了
1.4 关联github仓库
复制github vue-components-web仓库的仓库地址,这里选择的是http地址,这样比较简单,没有选择ssh,如有需要,可自行百度设置ssh,
获取到github仓库地址后,将本地仓库与github仓库关联
输入指令: git remote add origin http://github.com/husanfeng/vue-components-web.git
注:在git客户端直接按 insert 即可粘贴内容
接下来弹出对话框输入自己github帐号密码;
关联成功
1.5 上传本地项目
输入指令: git push -u origin master
稍等几分钟即可,
这样本地代码已经推送到github仓库了,去githubt仓库刷新即可。
2:如何在github上访问自己的项目
2.1:创建gh-pages分支
2.2:在vscode上切换到gh-pages分支
2.3:将打包后的文件copy到gh-pages分支,在vscode上提交即可(记住打包文件放到gh-pages分支的根路径,不然页面出不来)
2.4:在github上切换到gh-pages分支,点击Settng按钮
2.5:选择到gh-pages branch分支,点击Save
点击 https://husanfeng.github.io/vue-components-web/ 地址 就可以访问了
最新文章
- [Idea] 在idea中使用jetty debug
- (zhuan)Python 虚拟环境:Virtualenv
- CodeForces 19D Points(线段树+map)
- Android带侧滑菜单和ToolBar的BaseActivity
- iOS 7.1 安装 企业应用 提示 无法下载应用程序
- linux中关于php和nginx用户权限的一些东西
- URAL 2040 (回文自动机)
- 【转】Mac用户必备!100多款免费实用的苹果Mac软件大搜集
- QSqlDatabase的进一步封装(多线程支持+更加简单的操作)——同时支持MySQL, SQL Server和Sqlite
- 开源Math.NET基础数学类库使用(05)C#解析Delimited Formats数据格式
- 如何在linux下检测内存泄漏
- 面试题:HTTP与HTTPS
- Scrapy爬虫框架第四讲(Linux环境)
- 词根 sent/sens
- Sublime远程连接Linux
- linux删除文件后不释放磁盘的问题
- POJ 1390 Blocks(记忆化搜索+dp)
- (转)SQL知识_SQL Case when 的使用方法
- ZooKeeper系列(2) 安装部署 (转)
- RabbitMQ学习以及与Spring的集成(三)