热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何将你的github仓库部署到githubpages(github.io博客)

 详细的git教程:http:www.cnblogs.comtugenhua0707p4050072.html#!comments 作为教程,很重要的一点就是要最大化的傻瓜化,本文

 

详细的git教程:http://www.cnblogs.com/tugenhua0707/p/4050072.html#!comments

 

作为教程,很重要的一点就是要最大化的傻瓜化,本文将从新建一个github仓库开始到成功部署github pages一步步解析。

第一步:新建一个github仓库"hello-ghpages":


现在我们有了一个空的仓库,上面只有README.md和LICENCE文件,并且注意现在所在的分支是"master"。之所以强调这一点是因为接下来的步骤必须明确自己的github page在哪个分支下面,这个等会儿再介绍。

第二步:点击页面右边一列的“Settings”,跳转到项目设置界面:


第三步:在设置界面我们能够看到有一块的标题是“Github Pages”,点击这一块上面的“Automatic page generator”按钮:


第四步:在“New Project Site”页面,需要注意的是页面最下面的“tracking ID”。“tracking ID”的作用是使用Google的Analystics功能,该功能能够分析你的网站的访问量等网站数据,可以不填。如果需要使用该功能,可以参考链接https://support.google.com/analytics/answer/1032385?hl=en。然后点击“Continue to layout”按钮。


第五步,设置主题,就能够发布了:


这样,我们就能够通过链接:http://username.github.io/hello-ghpages/访问我们刚刚发布的页面了,其中username是你的github账户的名字。根据博主的经验,第一次部署的话,等待的时间是比较长的,大概是十分钟到十五分钟左右。所以如果你立马访问刚刚发布的页面可能会出现404错误,不要着急慢慢等上十多分钟,会得到你想要的效果的:


到这一步,我们已经完成了github pages的部署,但是在这个时候我们面临了两个问题,第一:最初生成的仓库只有两个文件,不存在定义我们现在看到的github pages样式、内容的文件;第二,既然我们没有定义这些文件,而我们看到的这些文件有必须是真实存在的,这些文件放在了哪里?答案就涉及到我们一开始提到的分支了。我们在使用“Automatic page generator”功能的时候,github会自动在你项目的“master”分支下面新建一个“gh-pages”分支,而这个分支里面的代码定义了我们刚刚看到的部署成功的github pages页面的内容和样式。


我想在这里是有必要简单介绍一下分支这个概念的。分支分成两种,一种是上面截图中看到的,这种叫做远程分支,另外一种是我们在使用Git进行版本控制的时候使用到的,叫做本地分支。在使用Git进行版本控制的时候,对于每一次提交,都会生成一个commit对象,这个commit对象包含了以下内容: 



  • 提交信息元数据:包含了提交者、作者、提交时间等信息

  • 一个包含指向 tree 对象(根目录)的索引:在提交之前,Git 会先计算每一个子目录的校验和,然后在 Git 仓库中将这些目录保存为树(tree)对象。commit对象中的这个索引指向了这个对象。参考一下《pro git》里面的这张图就能很好的理解了:

对于提交有了一定认识之后,分支就更好理解了,Git 中的分支,其实本质上仅仅是个指向 commit 对象的可变指针。结合实际,我们来分析一下:在新建一个github仓库的时候,从上面的图我们可以看到,github会自动创建一个提交叫做“Initial commit”,同时新建了一个master分支,这个master分支是指向“Initial commit”提交对应的commit对象;在部署github pages的时候,github新建了一个分支,并且产生了一次提交“Create gh-pages branch via Github”。你可以把上面的过程理解成下面几条命令:



  1. git branch gh-pages    //在master分支下面新建一个gh-pages分支  



  2. git checkout gh-pages    //切换到新建的gh-pages分支  



  3. git rm -rf .        //由于master分支和gh-pages分支里面的内容完全不同,所以首先清空了所有文件  



  4. //在清空的文件夹里面自定义新的文件,也就是上面截图中看到的gh-pages分支中的文件  



  5. git add .    //跟踪自己定义的文件  



  6. git commit -m "Create gh-pages branch via Github"    //提交本次修改  



到目前为止,你就觉得一个问题应该是如何将现在看到了github pages定义成我自己想看到的效果,这里就需要用到Git了。

第六步:Clone远程仓库到本地:


第七步:clone下来默认为master分支,所以我们在文件夹里面看到的是master分支对应的内容。而我们需要编辑的是gh-pages分支,因为这个分支才能够定义github pages的内容和样式。我们需要执行下面的命令:


上面的命令的意思是说,在本地新建一个分支,本地分支的名字叫做“gh-pages”,这个新建出来的分支是在远程分支“origin/gh-pages”分支下面分化出来的,切换到新建出来的"gh-pages"分支,这个时候,我们看到在文件夹"hello-ghpages"下面的文件时远程分支"gh-pages"的内容了:


第八步:删除里面的所有文件,当然最好不要直接删除,而是通过git命令,那样会更加方便快捷。


第九步:目前为止,这个文件夹是空的了,我们在里面新建一个index.html文件,在里面定义一些内容,并且提交到当前分支。


第十步:提交到远程分支,查看效果:


第十一步:查看效果吧,哈哈:


到这里就大功告成了,嘿嘿。让我们来回顾一下,在整个教程中,我们需要掌握的主要是如何将远程分支分化到本地,并且自定义远程分支的内容。上面的index.html是github pages的主页,你可以在这个基础上慢慢扩充你需要显示的内容,一切都和教程中展示的一样。如果你有什么问题或意见,欢迎在下面的评论中提出。

注明转载地址:http://www.cnblogs.com/yuanzm/p/3945814.html



推荐阅读
  • 本文由编程笔记#小编为大家整理,主要介绍了markdown[软件代理设置]相关的知识,希望对你有一定的参考价值。 ... [详细]
  • EzPP 0.2发布,新增YAML布局渲染功能
    EzPP发布了0.2.1版本,新增了YAML布局渲染功能,可以将YAML文件渲染为图片,并且可以复用YAML作为模版,通过传递不同参数生成不同的图片。这个功能可以用于绘制Logo、封面或其他图片,让用户不需要安装或卸载Photoshop。文章还提供了一个入门例子,介绍了使用ezpp的基本渲染方法,以及如何使用canvas、text类元素、自定义字体等。 ... [详细]
  • Flutter App 中创建模块并且依赖 Flutter
    在FlutterApp中打开对应的Android工程;并且向Android原生工程添加一个AndroidModule模块,并且在工程根settings. ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ... [详细]
  • Metasploit攻击渗透实践
    本文介绍了Metasploit攻击渗透实践的内容和要求,包括主动攻击、针对浏览器和客户端的攻击,以及成功应用辅助模块的实践过程。其中涉及使用Hydra在不知道密码的情况下攻击metsploit2靶机获取密码,以及攻击浏览器中的tomcat服务的具体步骤。同时还讲解了爆破密码的方法和设置攻击目标主机的相关参数。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识,包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性,外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍,读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行,并且不再受限于特定的语言和部署环境。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • imx6ull开发板驱动MT7601U无线网卡的方法和步骤详解
    本文详细介绍了在imx6ull开发板上驱动MT7601U无线网卡的方法和步骤。首先介绍了开发环境和硬件平台,然后说明了MT7601U驱动已经集成在linux内核的linux-4.x.x/drivers/net/wireless/mediatek/mt7601u文件中。接着介绍了移植mt7601u驱动的过程,包括编译内核和配置设备驱动。最后,列举了关键词和相关信息供读者参考。 ... [详细]
  • FeatureRequestIsyourfeaturerequestrelatedtoaproblem?Please ... [详细]
  • Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ... [详细]
  • 大坑|左上角_pycharm连接服务器同步写代码(图文详细过程)
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了pycharm连接服务器同步写代码(图文详细过程)相关的知识,希望对你有一定的参考价值。pycharm连接服务 ... [详细]
  • 由于同源策略的限制,满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全,但另一方面也限制了资源的使用。那么如何实现跨域呢,以下是实现跨域的一些方法。 ... [详细]
  • Imdevelopinganappwhichneedstogetmusicfilebystreamingforplayinglive.我正在开发一个应用程序,需要通过流 ... [详细]
author-avatar
dushearer304
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有