利用github建立个人主页(包教包会)
写在前面 : 作为一名前端coder , 怎么能没有自己的个人主页呢?
经过一系列的摸打滚爬(实际上是参考各种教程)终于做出了自己主页,特此分享给大家
OK 下面直接开始了 让我们一起愉快的装X吧…
首先你得有一个github账号 , 怎么注册我就不说了 , 然后新建一个【username】.github.io 的项目.
神马?找不到新建仓库的入口? 在你登陆github首页的右上角有个"+"号,第一个选项New repository就是他了.
注意:此处的“【username】”是指你登陆github的账户，而不是你在github的昵称，比如我这里的username就必须为Zane-bill
如下图 , 填好 Repository name 其他的都默认, 然后点击Create repository,建仓完成.
因为Zane-bill.github.io这个仓库已经存在了,后面建仓演示我多加了两个0 (github.iooo)
接下来你可能会懵了,仓库在哪我怎么看不见,别急,这时候仓库是空的,需要你本地和这个仓库建立连接,github给我们提供了4个办法,就用第一个方法吧,和本地建立连接是难点.
我的开发环境是Windows,我使用的是TortoiseGit工具,界面化操作模式,不用记git相关命令就可以直接操作,非常方便,但TortoiseGit必须依赖Git,所以还要安装一个git.
Git下载地址:https://git-scm.com/downloads
TortoiseGit下载地址:https://download.tortoisegit.org/tgit/2.6.0.0/
一路next 确认就可以,分分钟安装好
我用的是中文版的TortoiseGit,安装好后单击鼠标右键会出现TortoiseGit的菜单,选择Git克隆,把刚才仓库的https地址复制到URL里,目录填的是你本地文件夹准备和github仓库建立连接的路径,其他不用管,点确定.
注意:新建的本地文件夹名称一定不要出现中文
这时你会看到刚才目录里多了一个.git的隐藏文件夹,千万不能删,删掉就和github失去连接了,当然你想重新换个目录来克隆或者取消连接删掉这个文件夹是最直接的方法.
接下来就可以把自己本地的代码复制到这个git_test 文件夹下了.
注意:你想展示的html文件的名称一定要是index 而且index.html 要和.git文件夹在同一目录下
拷贝完毕后 右键 Git提交 紧接着在提交完成页面 点 推送 (提交时"日志信息"要随便填下)
这时候刷新你的github,仓库里就已经有了你刚才在本地的推送内容
大功告成 ! 浏览器访问 【username】.github.io 就已经是你的index.html 页面了 !
注:我的TortoiseGit已经绑定了github账号和密码,所以克隆时没有跳出登陆页面,你们登陆一下就可以了
创建个人主页告一段落, 冒险越来越深入了…
创建个人项目演示页面
有时候看到别人的"github.io"后面还有内容,比如这样"xxxxxx.github.io/test"
这是新的项目演示页面,其实现在的你也可以, 再到github上新建一个仓库, 此时仓库名字可以自定义,然后在本地新建一个仓库进行克隆 推送,一样的套路,不同的是:
在刚才你新建的仓库那里,你要创建一个分支, 这个分支的名字必须是 gh-pages ,
点击Create branch : gh-pages
你会发现分支的内容和 master 一样, 其实项目演示页面用的是分支下的index.html页面
接下来操作如图
点击Settings - 点击左侧的Branches - 选择gh-pages作为默认的分支 - 最后Update一下,会跳出确认框 ,确认就行了,不慌. 等一会儿 访问【username】.github.io/【项目名】 搞定. . .
如果你要更新项目演示文件,记得推送时 远端 选择gh-pages
如果嫌master这个主支烦你也可以直接把他删掉 方法自己搜一下咯
到这儿就基本差不多了 ,如果你是追求完美的coder 请继续看
更改域名
【username】.github.io 这个网址太难看了,不好记 ?
没关系,你可以买个域名 ,像现在的腾讯云 阿里云 就有1块钱的域名,能管一年,还是很划算的
阿里云域名你需要在他首页"最新活动"–>“特惠专区”–>“域名与网站” -->“域名新用户1元购"这里才能看到1元的域名…在首页"产品”–>"域名注册"那里最低的却是9块…
买好之后实名认证是必须的,可以不用备案, 开始 解析
类型A，记录值为github的IP地址
类型CNAME，记录值为github主页名称（xxx.github.io）
在本地打开命令行cmd，ping自己github主页地址（xxx.github.io） 得到github的IP地址 填进去
接着来github进一步设置
在你主页仓库的那页,点击Settings - 找到GitHub Pages - Custom domain 填上你买的域名, 点击Save
这个时候仓库目录下会自动生成一个名字为CNAME的文件, 里面的内容就是刚刚你填的域名.
OK！这样就可以直接使用购买的域名访问GitHub个人主页啦
项目演示地址也会跟着变成 【你的域名】/【项目名】
thinks ~!