创建GitHub技术博客全攻略

说明: 首先,你需要注册一个 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 时会重定向到此域名,所以其实这个地址可以是任意值。 但是为了有意义,我们可以定义为某个固定的域名,例如 :

 

[plain] view plain copy

 

 

  1. blog.cncounter.com  

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

 

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

 

[plain] view plain copy

 

 

  1. Request URL:http://renfufei.github.io/  
  2. Request Method:GET  
  3. Status Code:301 Moved Permanently  
  4.   
  5. Location:http://blog.cncounter.com/  
  6. 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文件中的域名上。【放心,不会死循环。。。】.好的,恭喜你!

 

10. 仓库的页面

创建好个人或组织的Github首页之后,就拥有了一个固定的二级域名。 

那么,每个项目都可以使用页面生成器生成一个项目的页面(page)。 当然,项目使用的 pages 就不是 master 分支了,而是一个叫做 gh-pages 的分支。gh 是 github 的简称, github会自动解析下面的页面。

相应的访问路径类似 http: //xxx.github.io/project-name/ 这样。例如: http://blog.cncounter.com/cncounter/

对应的分支为: https://github.com/cncounter/cncounter/tree/gh-pages

有兴趣你可以点进去看看,生成方式和上面的基本一样。 当然,Github现在改版了,新版的布局,Settings 被挪到了上方,但是基本操作还是不变的。

 

注意事项:

  • 如果报404,或者其他错误,请稍等,或者检查你的邮箱,看看构建失败的提示信息.
  • 比如我的,因为最初没有验证邮箱,结果收到了好几次发布失败的通知(如下面的邮件提示)。
  • 以后每次你提交(或在线修改后提交)文件到这个仓库,GitHub 都会自动为你构建,并发布。
  • 所以,有问题,请修改并提交某个文件,重新试试吧!

[plain] view plain copy

 

 

  1. The page build failed with the following error:  
  2.   
  3.   
  4. You need a verified email address in your GitHub account to publish Pages.  
  5. You can verify your email addresses from your Settings panel:  
  6.   
  7.   
  8.     https://github.com/settings/emails  
  9.   
  10.   
  11. If you have any questions please contact us at https://github.com/contact.  

下面是参考的一部分:

您可以通过GitHub的页面自动生成器快速为 项目,用户(User,比如你的账号),或组织(Organization, 比如 alibaba) 创建一个网站(其实就是技术博客啦)。

生成用户/组织的网页

要生成用户/组织的网站页面,你需要创建一个仓库(repository,代码库),名为: username.github.io 或 orgname.github.io ; 用户名或组织名 必须 是你自己的账号/或所属的组织, 否则GitHub Pages 站点不会帮你生成(build,构建,编译,)。 GitHub的页面自动生成器可以通过仓库的设置页面(Settings page)看到。 您可以阅读更多关于用户和组织页面的内容 。

警告: GitHub页面网站在互联网上是公开,即使其所属的仓库是私有的。 如果你有敏感数据在页面仓库中,您可能需要在发布之前删除他们。

参考地址:

如果你看到这里,如果你已登录, 如果觉得对你有帮助,请点击下面的 “顶” 按钮.

如果有问题,有建议,请留言。

赶快试试吧!

GitHub.io技术博客的好处: 写博客,你可以自己定义JS,CSS,图片,嵌入iframe 显示代码示例,什么你都可以自定义,什么标签都允许,而在其他的技术博客站点,因为安全限制,很多是不允许的。

如果你对学习Git,以及使用这种强大的工具和项目/代码管理思想感兴趣,那么推荐你阅读这一系列的文章,讲得深入浅出,生动有趣: http://www.worldhello.net/gotgithub/01-explore-github/010-what-is-github.html

Windows下Git使用入门系列: 

 

    1. 目录
    2. 安装及配置Git
    3. 安装及配置TortoiseGit
    4. Git与TortoiseGit基本操作
    5. MarkDown示例
    6. 解决 TortoiseGit 诡异的 Bad file number 问题
    7. 加入QQ群GitHub家园: 225932282
时间: 2024-09-25 07:52:12

创建GitHub技术博客全攻略的相关文章

ps图层小技巧大全:创建/新建/备份/合成/保存全攻略

   众所周知,Photoshop在工作中的运用十分广泛,无论是图片处理.网页设计还是图片设计,都能轻松搞定,这里小编介绍一些略显"偏门"的Photoshop小技巧,包括图层的合成等操作,可以帮助我们快速完成一些操作. 判断图层是否为空 做设计时往往会产生很多很多的图层,如果没有给图层分组.命名.及时整理的话,面对堆积如山的图层想要删去那些空白的图层,该怎么办呢? 这里介绍一个判断图层是否没有内容像素的小技巧:按住Ctrl键并单击图层缩略图,如果你看到"警告:没有像素被选中&

个人建站全攻略之博客篇

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 看到别人有自己的网站感到羡慕吗?因新浪.和讯等博客不能挂广告而感到苦恼吗?想以互联网为平台给自己打出一片天地吗?以为自己是网络菜鸟而失去信 心吗?其实做网站很简单,因为现在做网站不像早年(全部要自己处理),我们可以选择成熟的网站程序.今天小丹就一步步手把手地写出做网站的步骤给那些想拥 有自己网站的人分享! 写博客.交朋友可以选择博客程序: 现

微信公众帐号开发教程之图文消息全攻略_java

引言及内容概要 已经有几位读者抱怨"柳峰只用到文本消息作为示例,从来不提图文消息,都不知道图文消息该如何使用",好吧,我错了,原本以为把基础API封装完.框架搭建好,再给出一个文本消息的使用示例,大家就能够照猫画虎的,或许是因为我的绘画功底太差,画出的那只猫本来就不像猫吧-- 本篇主要介绍微信公众帐号开发中图文消息的使用,以及图文消息的几种表现形式.标题取名为"图文消息全攻略",这绝对不是标题党,是想借此机会把大家对图文消息相关的问题.疑虑.障碍全部清除掉. 图文消

再Docker中架设完整的WordPress站点全攻略_php技巧

1. 安装 Docker 在我们真正开始之前,我们需要确保在我们的 Linux 机器上已经安装了 Docker.我们使用的主机是 CentOS 7,因此我们用下面的命令使用 yum 管理器安装 docker. # yum install docker    # systemctl restart docker.service 2. 创建 WordPress 的 Dockerfile 我们需要创建用于自动安装 wordpress 以及其前置需求的 Dockerfile.这个 Dockerfile

微信公众帐号开发教程(13) 图文消息全攻略

引言及内容概要 已经有几位读者抱怨"柳峰只用到文本消息作为示例,从来不提图文消息,都不知 道图文消息该如何使用",好吧,我错了,原本以为把基础API封装完.框架搭建好,再给出一个文本消息的 使用示例,大家就能够照猫画虎的,或许是因为我的绘画功底太差,画出的那只猫本来就不像猫吧-- 本篇主要介绍微信公众帐号开发中图文消息的使用,以及图文消息的几种表现形式.标题取名为"图 文消息全攻略",这绝对不是标题党,是想借此机会把大家对图文消息相关的问题.疑虑.障碍全部清除掉.

《微店赚钱一册通 ——开店+营销+推广 实战全攻略》一一1.5 微店有哪些优势

1.5 微店有哪些优势 微店赚钱一册通 --开店+营销+推广 实战全攻略 打开互联网搜索引擎,输入关键词"微店"进行查找,与"微"字有关的商业平台不胜枚举.微店营销已成为一种新兴的商品经营模式.微店是未来发展的重要途径.无论传统实体店.网店.中小卖家.上班者,还是个人都适合开设微店,微店有哪些优势呢? (1)开店成本低. 传统电商保证金需要好几万,年服务费也要1万多,目前微店网的入驻费用远远小于传统电商. (2)先进的商业模式. 微店网独特的商业模式,引起了大批网民

Android中FoldingLayout折叠布局的用法及实战全攻略_Android

一.概述无意中翻到的FoldingLayout的介绍的博客,以及github地址.感觉很nice呀,于是花了点时间研究以及编写,本篇博客将带大家从最基本的原理分析,一步一步的实现我们的FoldingLayout,当然了,如果你能力过硬,可以直接下载github上的代码进行学习. 博客基本分为以下几个部分: 1.Matrix的setPolyToPoly使用 2.在图片上使用渐变和阴影 3.初步的FoldingLayout的实现,完成图片的折叠显示(可控制折叠次数.包含阴影的绘制) 4.引入手势,手

Angularjs中UI Router全攻略_AngularJS

首先给大家介绍angular-ui-router的基本用法. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvider.state(stateName, stateConfig) stateName是string类型 stateCon

SEO面试技巧全攻略

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 昨天在点石论坛闲逛,正巧看到几位SEO届的同行牛人说了他们的面试经历,在看了那些Boss的问题之后,倒是觉得自己比较幸运,因为我毕竟遇到一个真正能够知道SEO的同事给我面试,不管最终的结果如何吧,起码我知道他们迫切的需要SEO,而且他们并不是外行指挥内行的门外汉. 虽然文章的标题是SEO面试技巧全攻略,却的确是谈不出真正的SEO面试技巧,或许