分类: GitHub2014-07-12 13:10 19710人阅读 评论(21) 收藏 举报
说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字.
本文中假设用户名为 tiemaocsdn

1. 注册账号:
地址: https://github.com/
输入账号、邮箱、密码,然后点击注册按钮.

图1 第1步

2. 初始设置
注册完成后,选择Free免费账号完成设置。

图2 第2步

2.1 验证邮箱
请打开你的邮箱,查看发送给你的确认邮件,你需要验证邮箱后,后面生成的个人主页才会被接受和发布.

3. 创建页面仓库
地址: https://github.com/new
这个仓库的名字需要和你的账号对应, 如 tiemaocsdn.github.io
输入基本信息,然后点击创建仓库.

图3 第3步

4. 进入项目设置页面
因为这个项目就是专门的放页面的,所以master分支即可. 如果是你的某个仓库的页面,你需要设置到 gh-pages 分支中,关于这些,请参考本文末尾提到的参考资料.

图4 第4步

5. 进入自动页面生成器
在设置页面,下拉到底部, 默认分支(master)不用管.

图5 第5步

6.1 创建用户页面(即技术博客站点)
输入一些内容,可以自己编辑,也可以从readme加载:

图6-1 第6-1步

6.2 继续,选择主题

图6-2 第6-2步

7. 选择主题,然后发布
如下图所示,其实这些以后你都可以自己修改替换,这只是生成一些css,html,img到你的仓库里面.

图7 第7步

8. 查看效果
现在,你可以访问自己的GitHub.io 上的主页了,例如:
http://tiemaocsdn.github.io/
页面效果如下图所示:

图8 第8步

9. CNAME绑定域名

到这一步,其实已经很明确了, http://tiemaocsdn.github.io/ 这么一个域名,就指向了刚刚构建的这个站点/页面。 如果嫌弃这个域名太土了怎么办?

其实很好办,花钱买个喜欢的域名映射过去就好了。 在根路径下创建一个文件, 文件名是大写的 "CNAME", 注意没有后缀。 因为tiemaocsdn 没有购买域名,那么就拿另一个来说事吧。

类似下面这样:

https://github.com/renfufei/renfufei.github.io/blob/master/CNAME

里面的内容,就是访问此 xxx.github.io 时会重定向到此域名,所以其实这个地址可以是任意值。 但是为了有意义,我们可以定义为某个固定的域名,例如 :

  1. blog.cncounter.com

文件的内容只有一行,这样访问 http://renfufei.github.io 时浏览器就接收到重定向指令,跳转到CNAME里面指定的域名去了。

大致的响应头和状态码如下,你也可以使用Chrome打开NetWork,勾选上 Preserve Log 保留日志看一看相关信息:

  1. Request URL:http://renfufei.github.io/
  2. Request Method:GET
  3. Status Code:301 Moved Permanently
  4. Location:http://blog.cncounter.com/
  5. Server:GitHub.com

这样就很明白了,访问此站点时,如果域名不是 blog.cncounter.com ,那么就会跳转到 http://blog.cncounter.com/,个人恶意推测,即便你将CNAME文件的内容设置为 www.baidu.com 也是可行的,这样访问的时候直接跳转到百度了。
但是,如果 http://blog.cncounter.com/ 是空的怎么办?  这就需要你自己保证咯。

当然,要是这么结束掉,那本文就是一篇坑文。 
如果你持有这个域名,那么你可以将域名的对应记录也CNAME到 "renfufei.github.io" . 记住, renfufei.github.io 已经是一个互联网上能明确定位到的地址,所以DNS记录完全可以映射到此路径.

例如如下的记录, DNS中,A记录那就是直接指定一个IP。 CNAME就是重命名,指向另一个域名。 主机记录就是前缀,例如: blog, 与 cncounter.com 拼接在一起就是 blog.cncounter.com ,如果你想映射 www.cncounter.com,那么主机记录就是 www ,记录类型是CNAME,记录值是renfufei.github.io;如果想将 http://cncounter.com 这个根域名也映射到,那么记录类型也是CNAME,主机记录就是一个英文的 at: "@". 你可以将多个域名都映射到 xxxxx.github.io 之类的你自己的站点上,但原则上都会跳转到你新建的 CNAME文件中的域名上。【放心,不会死循环。。。】.好的,恭喜你!

[置顶] 创建GitHub技术博客全攻略的更多相关文章

  1. 创建GitHub技术博客全攻略【转】

    本文转载自:http://blog.csdn.net/renfufei/article/details/37725057/ 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比 ...

  2. 创建GitHub技术博客全攻略

    http://blog.csdn.net/renfufei/article/details/37725057 http://www.pchou.info/web-build/2014/07/04/bu ...

  3. 创建GitHub技术博客

    创建GitHub技术博客全攻略 githubio技术博客网站生成 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字.本 ...

  4. (转)创建GitHub技术博客

    https://blog.csdn.net/renfufei/article/details/37725057

  5. 作业一:创建个人技术博客、自我介绍、简单的C程序

    年9月14日中午12点: 一.主要内容  建个人技术博客(博客园 www.cnblogs.com) 本学期将通过写博客的方式提交作业,实际上,最终的目的是希望同学们能通过博客的形式记录我们整个学习过程 ...

  6. Hexo博客框架攻略

    前言 前天无意在b站看到up主CodeSheep上传的博客搭建教程,引起了我这个有需求但苦于没学过什么博客框架的小白的兴趣.于是花了两天时间终于终于把自己的博客搭建好了,踩了无数的坑,走偏了无数的路, ...

  7. [置顶] 如何更改CSDN博客高亮代码皮肤的样式,使博客看起来更有范(推荐)

    由于本人写博客的时候,也没有配置博客的相关属性,因此贴出来的代码块都是CSDN默认的,因此代码背景色都是白色的,如下所示: 但是本人在浏览他人博客的时候,发现有些博客的代码块看起来比较有范,整个代码库 ...

  8. 全流程指导Visual Studio Code+Markdown Nice+gitee+PicGo管理自己的技术博客文章

    全流程指导Visual Studio Code+Markdown Nice+gitee+PicGo管理自己的技术博客 1.背景 我挺喜欢写博客,但每一次将博客转移到公众号或者知乎,总是需要调整格式,不 ...

  9. [技术博客]大闸蟹的技术博客,通过gitlab api进行用户批量创建

    技术博客--通过gitlab api批量注册用户 gitlab登录界面本身提供了register功能,但需要手工一个个添加,对于一次性会添加整个班级的学生的软工平台来说并不科学合理.使用gitlab ...

随机推荐

  1. WinForm窗体设置

    属性: 软件启动后在屏幕中间 StartPosition = CenterScreen取消放大按钮 MaximizeBox = false不能拖动边框 FormBorderStyle = FixedD ...

  2. 超长英文(代码)自动换行的样式(CSS)

    如何想让一连串文字在显示可以自动换行,而不会把在代码中使用的容器撑开,则在文章的CSS样式处加上以下代码即可: table-layout: fixed; word-wrap:break-word;或者 ...

  3. PixelFormat 枚举

    成员名称 说明 Alpha 像素数据包含没有进行过自左乘的 alpha 值. Canonical 默认像素格式,每像素 32 位. 此格式指定 24 位颜色深度和一个 8 位 alpha 通道. Do ...

  4. VPN错误789:L2TP连接尝试失败

    VPN 错误789:l2tp 连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到一个处理错误 Windows配置VPN,选择“使用IPsec的第2层隧道协议(L2TP/IPSec)”时, XP系 ...

  5. JSP 实现 之 调用java方法实现MySQL数据库备份和恢复

    package cn.qm.db; import java.io.BufferedReader; import java.io.DataInputStream; import java.io.IOEx ...

  6. vector -1

    vector的特色有支持随机存取,在集合尾端增删元素很快,但是在集合中间增删元素比较费时. vector以模板(泛型)方式实现,可以保存任意类型的变数,包括使用者自定义的资料型态,例如:它可以是放置整 ...

  7. Ruby和Rails开发环境安装

    更新包管理 sudo apt-get update 安装curl sudo apt-get install curl *安装rvm via curl \curl -L https://get.rvm. ...

  8. 自定义滚动条 niceScroll 配置参数

    配置参数 当调用“niceScroll”你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变光标颜色,默认值是“#000000” cursoropacitymin - 改变不透 ...

  9. 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

  10. [FML]学习笔记一Cross-validation交叉验证

    在实际的工程中,有时labeled data的数量不足以留出validation sample(验证样本)否则会导致training sample(训练样本)的数量太少.为了解决这个问题,我们引入一种 ...