☞☞ 个人主页欢迎访问 ☜☜
一、github上传项目
gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。
代码托管项目管理平台还有许多,最推荐的就是Github和Coding,其次是开源中国的码云。
GitHub的API:https://api.github.com/
exp:通过api访问个人信息:https://api.github.com/users/yufy1314
1.去git官网下载git工具
下载完了点击git Bash弹出命令框:
2.登录Github官网或客户端
3.创建仓库
⑴ 点击New repository如图:
⑵ 进入仓库以后如图:
如果在这步添加了README文件,相当于给自己挖了一个坑,在后面你会发现最后push代码始终失败:
D:\myselfProject\my-webpack-project>git push https://github.com/YuFy1314/my-webpack-project.git
To https://github.com/YuFy1314/my-webpack-project.git
! [rejected] master -> master (non-fast-forward)
error: failed to push some refs to 'https://github.com/YuFy1314/my-webpack-project.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
这一堆英文的意思就是在远程仓库初始化之后,发现了一个你本地没有的文件,它就会被认为是别人提交过的代码,你没有pull而直接选择了push,这个时候你直接输入git pull --rebase origin master
,把远程代码拉下来就ok了
⑶ 填写完了直接点击创建仓库Create repository
4.上传源代码:
仓库创建完成以后,你会看见如图中所示,生成了自己的git地址,还有git命令,后面要根据这些命令将项目提交到github中
5.生成公钥
ssh-keygen -C '[email protected]' -t rsa
⑴ 通过这行代码生成公钥,这个邮箱要写自己注册github时的邮箱,或者是Primary email address,-C是大写,输入后按enter后一直回车就可以了,如图:
⑵ 然后根据生成的路径去找id-rsa.pub,找到后用编辑器打开,如图:
6.填写公钥
⑴ 打开github,找到设置Settings
⑵ 点击SSH and GPG keys:
⑶ 点击绿色的按钮New SSH key:
⑷ Title是这个公钥的名字,当然不写也可以,就是为了将来公钥多了好区别;主要是key,在我们之前生成的公钥文件里面,把内容全部复制下来,注意key开头的写法(Begins with 'ssh-rsa', 'ssh-dss', 'ssh-ed25519', 'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', or 'ecdsa-sha2-nistp521'),填写完以后点击Add SSH key:
⑸ 成功之后跳转到这里:
7.接下来的操作均用命令提示符来完成,按照之前提到的git命令来执行,如图:
⑴ 进入自己的项目目录,如图:
⑵ 初始化目录为git项目,如图:
git init
这时细心的人会发现项目目录中多了一个.git文件夹
⑶ 添加说明文件到暂存区,如图:
git add README.md
因为我的项目目录下有多个文件,所以要用 * 代替
⑷ 提交到本地仓库并写日志,"first commit"这里的内容是在你提交项目到github中每一个文件夹/文件都会显示的内容,如图:
git commit -m "first commit"
输入完代码回车:
⑸ 添加远程主机,主机名为origin 地址为https://github.com/YuFy1314/howzhi.git 这个地址就是在第4步中上传源代码的那个地址复制下来
git remote add origin https://github.com/YuFy1314/howzhi.git
输入完上面的代码直接回车:
⑹ 本地的master分支推送到origin主机,同时指定origin为默认主机,后面就可以不加任何参数使用git push了,-u 参数指定一个默认主机,如图:
git push -u origin master
输入完上面的代码直接回车:
8.到你的github主页的项目中看到你刚上传的项目,如图:
二、通过github域名访问
※如果你想通过github域名直接访问你的这个项目的话,那么可以进入这个项目的settings,将你的仓库名Repository name修改为(你的用户名.github.io):
然后将页面拉到下方,确认GitHub Pages下的Source中的值为master branch,如果不是自行修改即可:
由于后来GitHub网站更新了,可以多个项目进行预览访问了,也就是说这个域名作为标准,把我们每一个仓库项目都可以拿过来访问,猛戳→查看GitHub pages发布源的标准,其实里面就说的非常清楚了,无非就是这三种情况,每种情况对号入座即可:
您可以配置GitHub的页面,从发布在网站的源文件master,gh-pages或/docs在你的文件夹master分支的项目页面,并满足特定条件的其他网页的网站。
我实验了两个项目,一个是html普通项目还一个是vue+webpack的项目,其实是一个道理,github pages都是根据index.html来访问我们的项目的,vue+webpack最后通过build出来的生产环境项目根目录也是有index.html的,所以只需要我们把项目中的src或者dist文件夹的名字改成github可以识别的docs文件夹,然后再push到github上即可,vue项目只有一个小点不同而已,下面分别介绍:
- 普通html项目https://yufy1314.github.io/resume/:
在项目的根目录就存在着index.html,所以直接在主分支那里创建一个新的分支gh-pages
出来就可以了
然后点击右边的Settings,找到GitHub Pages
然后点击save保存下当前设置,刷新页面,再找到GitHub pages
- vue+webpack项目https://yufy1314.github.io/my-mailefengle-gallery/:
在package.json同级目录下创建一个vue.config.js文件,里面复制上下面的代码:
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/my-mailefengle-gallery/'
: '/'
}
代码中的my-mailefengle-gallery
是我的这个项目的仓库的名字,换成你的仓库名就可以了,保存之后将项目重新build一下,再将打包好了dist文件夹修改成docs,再push到github上,谨记这个docs文件夹仅在master主分支下可以识别,再点击Settings找到GitHub pages,切换到如下图:
然后同上,大功告成,如果这个时候访问页面出错的话,就是你打包的路径的问题了,一般使用vue-cli的都会出现页面空白的情况(可以参考https://blog.csdn.net/x550392236/article/details/80416909),如有其它问题,和我的这个文章内容无关,访问同级路径的问题还请自行百度。
三、更新github项目
⑴ 在github中进入要克隆的项目,右侧有一个绿色按钮Clone or download,点击之后出现一个URL,将它复制下来,如图:
⑵ 当修改完项目的时候,细心的人在本地项目目录中会发现,前面都有个红色感叹号,这个时候在命令提示符中进入磁盘中存放这个项目的位置,依次使用命令行(git add .)将修改的文件添加到暂存区中、(git commit -a)提交和上次提交对比后有变动的文件(这时本地项目目录中的叹号变成了绿色的对号,就代表提交成功了;如果这步出现了错误,就输入
git status
查看状态,将没有提交成功的用git commit -m "描述"
重新提交一遍)、(git push origin master)将分支push到github上,将github上的项目更新完毕。
希望阅读完本文可以帮助到您,谢谢O(∩_∩)O~
欢迎访问我的GitHub,喜欢的可以star,项目随意fork,支持转载但要下标注;
欢迎光临个人主页