利用git搭建本身的我的博客

时间 2019-11-09

标签利用 git 搭建本身我的博客栏目 Git 繁體版

原文原文链接

1、概述

哈，本篇博客不属于Android技术类的文章，但却有很是高的实用性。若是你心细的话，你会发现如今访问zhanghongyang.com或者guolin.tech你会发现最终跳转的是咱们的csdn博客的列表目录。javascript

有人会说，这个简单哇，买个域名，设置下域名解析不就行了么？css

这样是不行的，关键在于个人博客站点是csdn所提供的，归属于csdn的blog子域名下，可是在设置域名解析的时候只能填写ip，若是你ping 个人博客地址最终获得的ip多是csdn某台服务器的甚至是拿不到的，因此光填写ip是不行的，不过若是你是本身搭建的服务器站点就能够简单设置解析ip就能够了。html

ok，可是大多数人可能还我同样并无足够的精力去维护我的博客站点，而选择csdn、简书、博客园等平台编写博客。可是这类平台所提供的url想必是很是长的，例如个人：java

http://blog.csdn.net/lmj623565791

通常人太难记住了，因此我但愿买一个好记的域名android

zhanghongyang.com（张鸿洋.com）

这样你们一眼就能记住，一眼不够两眼确定没问题。git

ok，那么针对我这样的问题，有什么好的且免费的方案呢？程序员

这个问题，郭神和我在dota群里讨论过，最终的方案有两个选择：github

买个服务器，搭建个服务作页面跳转（redirect或者js跳转）.
利用github提供的github pages

方案1我是不会选的，由于租服务器这种事情要钱哇；最终选择了方案二，利用github pages。web

不少人可能并不清楚github pages是干吗的，官网是：https://pages.github.com/，其实算github提供的一个服务，咱们能够免费的再其上面搭建本身的网站，也有不少人利用github pages做为本身的我的博客站点。windows

接下来，咱们就看github pages如何使用，以及我是如何利用它作页面跳转的。

那么，经过本文的学习，你也能够利用github pages搭建一个小站点，构建属于本身的网站，或者使用github pages维护我的博客均可以。

这里感谢郭神，该方案虽然一块儿讨论得出，可是对该方案的实施是在我以前的，此外你们能够关注他的博客。

2、Github Pages的使用

（1）新建仓库

ok，首先你须要一个github的帐号，立志做为一名优秀的程序员，这个帐号是应该有的，若是没有赶快申请一个。

有了帐号之后，首先点击新建仓库，如图：

而后到达仓库信息填写界面，如图：

这里只要注意一个地方，就是仓库的名称，必须是：你的用户名.github.io，例如个人用户名是hongyangAndroid，我填写的仓库名称即为：hongyangAndroid.github.io。

（2）更新内容

有了仓库之后，你就能够去随意的更新内容了，若是你对html熟悉，你能够随便写个页面提交上去，好比我写个简单的html页面。

先简单说一下若是更新github仓库中的内容：

clone到本地

命令行进入硬盘上任意一个文件夹，而后执行
```
git clone https://github.com/hongyangAndroid/hongyangAndroid.github.io.git 
```
- 1
- 2
- 1
- 2
注意修改成你的仓库地址，若是你的电脑上并不支持Git命令，你能够搜索Git 安装，先安装好git并配置好环境。

到达本地以后，咱们就能够准备好须要更新进去的页面了，好比我新建一个index.html内容以下：

<!DOCTYPE html> <html> <body> <h1>这是我使用github pages搭建的我的站点。</h1> </body> </html>

完成以后，记得保存，index.html必须和你clone下来的.git文件夹在同一个目录，如图：

完成以后，就是提交了。

/Users/zhy/github_repository/mine/hongyangAndroid.github.io
git add .
git commit -m "更新index.html，编写博文测试" [master c22f3d4] 更新index.html，编写博文测试 1 file changed, 6 insertions(+), 1 deletion(-) git push Username for 'https://github.com': hongyangAndroid Password for 'https://hongyangAndroid@github.com': >zhy$

注意首先命令行进入你的hongyangAndroid.github.io这个目录，而后依次执行git add . , git commit -m "注释"，git push，而后输入你的用户名，密码便可。

更新成功以后，那就要恭喜你了，你的我的站点搭建成功了。

你确定又要说，你忽悠谁呢，顶多算你新建了一个仓库，提交了一个html文件而已，这里我要说，No No No，你的我的站点真的搭建好了，你已经能够给你的亲朋好友炫耀了，那么站点总要有个访问的地址吧，否则怎么访问呢？

恩，是的，默认的地址是:

http://hongyangandroid.github.io

例如我在浏览器访问这个地址：

看到没有，咱们刚才编写的简单html文件已经能够经过特定的url访问了，恩，你记得修改成你本身的url。

若是你的html、css、js技术足够好，你彻底能够利用这样的方式搭建一个高逼格且实用的我的站点，固然你也能够在上面搭建你的简历，方便打印，不过注意保护我的隐私。

ok，到这里，咱们已经教会你们如何利用github pages去搭建我的站点了，哈，免费的我的站点。若是我大学时候知道这个功能，我至少网页设计能够多拿10分，恩，那会我得了90分。

至于这个页面好很差看，看你的才华了；这个页面能干什么，看你的想象了。

ok，通过上面的内容，你们了解了利用github搭建我的站点，以及一些简单git命令的使用，可是咱们文章的标题是：如何利用github打造博客专属域名，恩，接下来的标题就是专属域名。

对了，若是你想利用这个作我的博客，以及有不少方便的工具辅助你完成了，例如hexo等，具体自行搜索。

3、打造博客专属域名

（1）域名购买与解析

ok，首先你要有个域名，那么就要去申请域名了，这里咱们能够经过万网申请：https://wanwang.aliyun.com/，查找你想申请域名，若是能够买，购买就能够了。

购买域名完成，进入万网的管理控制台：

找到你已经购买的域名，点击解析，进入以下页面：

而后点击添加解析，ip能够跟我填写的一致，固然以防发生变化，你能够ping你的url：

例如：

ping www.hongyangandroid.github.io

而后拿到返回的这个IP也能够。

恩，根据上表，选择一个IP，填写两条记录其实就能够了：

主机记录www对应www.zhanghongyang.com
主机记录@对应zhanghongyang.com

ok，设置完成解析以后，是否是直接访问域名就能跳转到咱们刚才的github页面呢？

恩，是不能，你去访问会显示404.

咱们还差一个环节。

（2）CNAME

差什么呢，差一个CNAME文件，这个文件须要提交到咱们刚才建立的仓库，内容为咱们的域名，例如:

而后记得执行：git add . , git commit -m "注释"，git push，而后输入你的用户名，密码便可，忘了命令往前翻。

更新成功以后，检查下，肯定成功了，就能够经过你的域名访问了，例如：

ok，到这里你已经学会了如何经过你购买的域名与github pages结合，即经过你购买的域名访问你的我的站点了。

通常状况下，到这里就能够庆祝了，好比你想托管你的简单的网页设置。

可是，若是你和我同样，博客在其余平台下托管，你想经过购买的域名跳转到该平台，你的任务还没结束。

（3）神奇的JS

好吧，其实一点也不神奇，也就一行js跳转代码。

对于我这种状况，我不须要任何内容，只要一行js就行了，我能够这么写index.html：

<!DOCTYPE html> <html> <script> window.location.href="http://blog.csdn.net/lmj623565791"; </script> <body> </body> </html>

而后我提交就搞定了，我就能够经过zhanghongyang.com直接跳转到个人博客页面了。

but，心细的人并无知足，好比咱们手机访问的csdn列表页面和电脑的列表页面不一样的，因而咱们能够更加完善咱们的js代码：

<script>
function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){ window.location.href="http://blog.csdn.net/lmj623565791"; } else { window.location.href="http://m.blog.csdn.net/blog/index?username=lmj623565791"; } } browserRedirect(); </script>

经过判断userAgent来肯定是不是来自手机端的，若是是手机端的访问mobile的页面，不然访问pc端页面。这么心细也就没谁了，该代码是郭神编写的。

ok，到此就真的结束了~~

文章不长，可是值得玩一下，你能够设计个贺卡，作个网页版ppt，托管个网站原型，恩，甚至编写博客（记得利用各类工具hexo等），好了，看你的脑洞了~~