详细介绍:怎么用github展示自己的前端项目页面

之前一直想着把自己做的一些页面怎么用github展示出来,因为我看到有人用的是github来展示自己做的一些项目。用github来展示就不用去折腾搭建自己的网站等一系列复杂的东西了,后面在网上搜了下,感觉好复杂,但是最近几天静心下来研究这个,结合别人写的一些教程,发现是那么的简单,分分钟的事儿嘛,觉得网上有些教程写的太过于复杂,对新手不是很友好,特此写一篇觉得对新手友好的教程,希望能帮到有需要的人。

 

第一步,你首先要注册一个github账号,我想这个应该很简单吧。要是实在不会百度……

 

第二步,注册好github之后,你需要安装git (git下载官方链接:https://git-scm.com/downloads),下载好后安装,一路next就行。安装好后你鼠标右键单机会显示git,如下图所示:

至于git教程可以去看廖雪峰老师写的( 链接:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/),注意:第一次使用git命令行的时候需要自报家门,填写自己的名字和邮箱,具体说明请看相关教程。

 

第三步:去github上创建自己的项目仓库,登陆进自己的github后,点击加好,选择:new respository,见下图:

点击之后就会出现下图所示的界面:填写自己的项目名称,项目相关介绍,选择公开还是私密。这里展示自己的项目选择公开

 

填好之后点击下方绿色的创建按钮,创建好后会出现如下界面:注意(红框区域的链接就是你的仓库地址,这个需要记好,一会儿需要用)

 

第四步:上面项目仓库创建好后,接下来就是给自己的仓库吧添加项目了,这里我们用git命令给仓库上传项目。先进入 自己的项目目录,然后鼠标右击选择git bash here,如下图所示:

点击git bash here后,会出现如下git窗口:

接下来就来输入命令,一步一步来把自己的项目推送到自己的仓库。

1.输入git init 初始化,输入后如下图所示:

2.然后再输入git add . (注意后面还有一个点哦),如下图:

3.接着输入输入git commit -m "first commit" 双引号里面的内容可以自定义,如下图:(注意这里第一次使用上传的时候,到这一步会出现让你输账户和密码的框,输了之后确定就好了,以后再传就不用再输账户密码了,详细介绍可以看我推荐的那篇gitHub教程)

4.然后在输入git remote add origin https://github.com/pickerless/rentproj (后面这个链接就是自己的仓库地址,这里我放的是我自己的仓库地址),见下图:

5.最后一步输入:git push -u origin master  把代码上传到github仓库,见下图:

这样我们就把自己的项目推送到自己的仓库里面了。关于推送项目到自己的仓库,可以参考这篇文章:https://blog.csdn.net/m0_37725003/article/details/80904824 写的很详细。

第五步:现在我们就可以去自己的项目仓库设置了,做到这,就距离成功不远了!进入我们的仓库就可以看到里面多了些东西,见下图:

 

 接下来我们点击页面的settings按钮,点击settings后,往下翻,翻到GitHub Pages 处,如下图:

然后点击None按钮,选择master branch,见下图:

点击之后再看这里,会出现一个链接,如图:

点击这个链接之后,你的项目就能展示 出来啦!注意,你的项目 里面必须得有index.html页面,好像是gitHub是从index开始解析的。

 

posted @ 2019-04-17 22:19  鲸鱼非鱼  阅读(3586)  评论(0编辑  收藏  举报