(转载) 如何利用github打造博客专属域名
转载请标明出处:
http://blog.csdn.net/lmj623565791/article/details/51319147;
本文出自:【张鸿洋的博客】
一、概述
哈,本篇博客不属于Android技术类的文章,但却有非常高的实用性。如果你心细的话,你会发现现在访问zhanghongyang.com或者guolin.tech你会发现最终跳转的是我们的csdn博客的列表目录。
有人会说,这个简单哇,买个域名,设置下域名解析不就好了么?
这样是不行的,关键在于我的博客站点是csdn所提供的,归属于csdn的blog子域名下,但是在设置域名解析的时候只能填写ip,如果你ping 我的博客地址
最终得到的ip可能是csdn某台服务器的甚至是拿不到的,所以光填写ip是不行的,不过如果你是自己搭建的服务器站点就可以简单设置解析ip就可以了。
ok,但是大多数人可能还我一样并没有足够的精力去维护个人博客站点,而选择csdn、简书、博客园等平台编写博客。但是这类平台所提供的url想必是非常长的,例如我的:
- http://blog.csdn.net/lmj623565791
一般人太难记住了,所以我希望买一个好记的域名
- zhanghongyang.com(张鸿洋.com)
这样大家一眼就能记住,一眼不够两眼肯定没问题。
ok,那么针对我这样的问题,有什么好的且免费的方案呢?
这个问题,郭神和我在dota群里讨论过,最终的方案有两个选择:
- 买个服务器,搭建个服务做页面跳转(redirect或者js跳转).
- 利用github提供的
github pages
方案1我是不会选的,因为租服务器这种事情要钱哇;最终选择了方案二,利用github pages。
很多人可能并不清楚github pages
是干嘛的,官网是:https://pages.github.com/,其实算github提供的一个服务,我们可以免费的再其上面搭建自己的网站,也有很多人利用github pages
作为自己的个人博客站点。
接下来,我们就看github pages
如何使用,以及我是如何利用它做页面跳转的。
那么,通过本文的学习,你也可以利用github pages
搭建一个小站点,构建属于自己的网站,或者使用github pages
维护个人博客都可以。
这里感谢郭神,该方案虽然一起讨论得出,但是对该方案的实施是在我之前的,此外大家可以关注他的博客。
二、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
注意修改为你的仓库地址,如果你的电脑上并不支持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
等,具体自行搜索。
三、打造博客专属域名
(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
等),好了,看你的脑洞了~~
欢迎关注我的微博:
http://weibo.com/u/3165018720
(转载) 如何利用github打造博客专属域名相关推荐
- 利用GitHub搭建博客自定义域名失效问题解决方法
自定义域名每次"hexo d"后会失效,参考网上的解决方法有两种 解决方法一: 只要在source 目录添加一个新文件CNAME就好 CNAME –不带任何后缀,这就是全称,里面写 ...
- XMD:使用Github Pages搭建个人站点,更换博客专属域名
一.使用Github Pages搭建个人站点 (1)新建仓库 ok,首先你需要一个github的账号,立志作为一名优秀的程序员,这个账号是应该有的,如果没有赶快申请一个. 有了账号以后,首先点击新建仓 ...
- 用户名或用户域名_给自己的Hexo+GitHub静态博客绑定自己的专属域名
前言 GitHub+Hexo静态博客详细教程,介绍:对比:部署:发布 - 听海的博客www.tsingsea.com 以上是Hexo+GitHub静态博客超级详细搭建教程的正文部分,也算是这个专题教 ...
- 手把手教你建github技术博客
适合人群 喜欢写Blog的人 有一定的编程基础 爱折腾的人 熟练使用版本控制Git 了解使用Github 熟悉基本的MarkDown语法 环境准备 安装Git 下载 msysgit 并执行即可完成安装 ...
- 使用 Hexo 创建 GitHub Page 博客(一)
CSDN GitHub Hexo 使用 Hexo 创建 GitHub Page 博客(一) AderXCoding/blob/master/system/tools/hexo/01-use_hexo ...
- flask-admin 快速打造博客 系列一
前言: 我想分享flask+flask-admin快速打造博客的详细教程,可是发现网易课堂已经有相应的免费课堂了,所以就不打算一点一滴的在这里做笔记,分享这些东西了.所以我主要集中在flask-adm ...
- 搭建自己的github.io博客
搭建自己的github.io博客 github.io是基于github的repo管理,这意味着咱们对其是有觉得的控制,这个跟放在第三方的平台比,可控性要好太多.下面咱们将详细讲述如何基于github. ...
- 【效率为王】超详细 Hexo + Github Pages 博客搭建教程
前言 现在市面上已经有许多博客了,比如 CSDN.掘金.博客园.简书等等.我们可以直接在上面发表内容,而且交互比较人性化,而且也能被搜索引擎检索到.但是总归是别人的平台,经常会受限,因此我们就希望能有 ...
- 如何利用新浪博客做关键词霸屏
利用新浪博客的高权重,做好关键词SEO优化,建立博客群,打造被动引流系统,实现百度搜索关键词霸屏. 从博客定位到内容布局,从引流文案植入到博文快速收录的技术都会跟大家详细讲解,适合个人及团队操作. 一 ...
最新文章
- 采用NAND Flash设计存储设备的挑战在哪里?
- JDBC预状态通道设置时间格式的问题
- html js 如何判断页面是第一次访问还是重复刷新访问,使用JS判断页面是首次被加载还是刷新...
- 谈SOA在国内推进状况
- RESTful API概述
- atcoder 2643 切比雪夫最小生成树
- Mac OS Virtualbox 倒入 ova 镜像文件
- 【纯干货】4年前想解决的事情,今天才实验成功
- bcb quickrep保存为 图片_干货|SCI论文中图片与组图技巧
- 计算机怎么屏幕保护,屏保设置在哪里设置 电脑屏保怎么设置
- 【转】Photoshop中快速复制的技巧有哪些
- 二维码图像编码原理(字符编码:ASCII、UTF-8)
- 误差条图各部分的代表意思_【小强视界】混凝土搅拌站计量误差原因分析及控制措施...
- (收藏)让你从骨子里爱上英文
- TP5 PHPExcel导出类
- 如何把地址导航生成二维码?
- webpack优化系列七:首屏加载优化
- 64位驱动 hp630打印机_m351a驱动-HP 惠普 LaserJet Pro 300 Colour M351a 彩色激光打印机驱动下载5.0.12200.630官方版-东坡下载...
- Feishu(飞书) 聊天机器人应用(3/3)- DevOps 机器人助手,管理 GitLab Issues,BOT 开源示例程序
- android音乐频谱解析
热门文章
- 在AWS上配置深度学习主机
- OpenWrt R20.10.20 / LuCI Master (git-20.256.12360-1a54222) 不能访问内网网址
- 删除oracle卸载后window服务中残留的oracle服务
- 计算机存储可读写,Python-十二、读写计算机文件
- Ubuntu桌面没有图标的解决方案
- c语言数据类型取值范围
- 美团大数据平台架构实践
- 《C Primer Plus》学习笔记—第14章
- 又一里程碑!阿里首推Java技术成长笔记,业内评级“钻石级”
- 什么是云原生(cloud native)?