Github Pages-搭建网站

2,157 阅读4分钟

开始之前

      写文章对于许多程序猿来说,应该算是一个比较优秀的习惯,而且你会感觉到是一件蛮高大上的事 ,你们觉得呢?

关于github Pages

     在说github Pages之前,小编想百科一下github, GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub。是不是感觉小编是个话痨,废话尽说!好吧,确实有些是,哈哈!

    好啦,进入主题。那什么是Github Pages呢?其实了解git的大佬们一点就知道,它当然是免费的静态站点了。通俗的来讲就是:依托github的一个静态页面展示的平台。那这个Github Pages具有几个小特点确实值得我们关注一下,如下:

  • 搭建简单而且免费;
  • 支持静态脚本;
  • 可以绑定你的域名;

   也正是这个几个小特点对于一些想展示小项目的程序猿来说,Github Pages是一个值得使用的小工具。为什么说是值得使用呐?当然“免费”啦,免费的东西不用白不要啊,对不咯!这样你就不用花钱买一个服务器了(当然啦,注意一下噢,Github Pages支持静态、静态、静态脚本噢)。

搭建步骤

     小编现在带阅读者开始搭建网站啦!别开小差噢!

      第一步:

     1、首先要注册一个Github的账号:注册网址:https://github.com/

     第二步:

     2、登录Github,创建一个新的仓库(repository),存放网址站点的相关文件,如下图:


在这里大家要注意一些小问题噢,如下:

  • 这个仓库名比较特殊,取名格式:用户名.github.io;例如:hongdeyuan.github.io
  • 是否选择 “Initialize this repository with a README”,在这里我们一般不 勾选择 ,为什么呐?因为你在本地仓库push的时候会造成冲突。当然,你也可以选择强推本地参考代码,但是不推荐强制推送本地库代码,因为在公司 你强制推送代码是属于 “高危操作”噢!,至于什么是“高危操作”小编在这就不提啦哈,因为内容过多!后面小编再写一个《git“高危操作”》专栏。

    第三步:

     3.上传项目文件/推送本地库项目,如下图:


      直接点击“uploading an existing file.”,然后进入上传文件界面,一个一个上传即可!如图所示:


     但是小编不推荐这样做,所以请采用第二个方法:
     首先,将本地静态项目文件初始化git:使用 :git init 如下图:


   接着,将本地项目文件添加到暂存区,使用:  git add .     ;再使用:git status  查看文件状态 如下图所示:


  紧接着,将暂存区的文件提交到本地仓库中,使用:git commit -a -m'fisrt commit‘  ;再使用:git status 查看文件状态 如下图所示:


  再接着,连接远程仓库,使用:git remote add dhyuan https://github.com/hongdeyuan/hong.github.io   ;并使用:git remote -v :查看远程连接的地址 如下图所示:


      最后,将本地仓库代码推送到远程库:使用 git push dhyuan master,如图所示:


    至此,小编便带大家提交完了本地库项目了,所以我们来验收一下,去远程github查看下;如下图所示:


   大家是否成功了呐?不出意外,应该是成功了噢!(千万注意:是否选择 “Initialize this repository with a README”,需要勾选它,否则,在这一步会拒绝你的 代码推送噢,所以你在这就得采用“高危操作” :git push dhyuan master -f  : 强制推送代码)

  第四步:

  4、点击“settings”进入设置。:进入设置后,往下拉,找到GitHub Pages设置界面,如下图所示:


接着,选择主题并提交:


【特别提醒】:

  • gh-pages分支用于构建和发布;
  • 如果user/org pages使用了独立域名,那么托管在账户下的所有project pages将使用相同的域名进行重定向,除非project pages使用了自己的独立域名;
  • 如果没有使用独立域名,project pages将通过子路径的形式提供服务username.github.com/projectname;
  • 自定义404页面只能在独立域名下使用,否则会使用User Pages 404;


  第五步:

验证创建的博客页面是否成功


   此刻,大家就见证了,一个网站的搭建了,快去动动手玩下吧!
   
    下期再见!