[干货]如何在一天以内搭建以你本身名字为域名且具有cool属性的我的博客

对程序员而言，最好的简历就是我的博客和GitHub

我的博客

每一个优秀的程序员都会有我的独占的一方网络空间，那里是他我的的舞台，据说过他的人会逐渐汇聚进来，认识他，熟悉他，鼓励他，赞赏他。而对他我的而言，他有了一个能够畅所欲言的小房间，他能够专研学术，聊聊情怀。同时和喜好他的读者成为好友，共同成长。

这难道不是一件很cool的事情吗？

先当作果

教方法前先来看看最终的效果吧。http://wingjay.com是本人搭建的我的博客，可做为模版参照，主要特性有如下几点：

1. 我的域名: wingjay.com

2. 无需购置服务器，本站同时挂载在Github Pages 和 GitCafe Pages上，免服务器费的同时还能作负载均衡，想一想还有点小激动

3. 在GitHub上同时管理你的博客和相应代码，不再用担忧博客遗失

4. SSL支持，即"http://" -> "https://"，更安全也更高大上

再看兵器

• 博客框架：Hexo 3，这是一款能快速、简洁且高效的博客框架，支持Markdown编辑，自动渲染出漂亮的静态页面。

• 前端主题：Next，效果参考http://wingjay.com

• 域名购买：相似万网的平台均可以，你能够选购本身名字的域名，一年几十元左右，两杯咖啡的钱。

• SSL：CloudFlare

抄起家伙

本文写做方式是安装流程主线 + 优质参考文章。因为网络上关于Hexo搭建博客的教程玲琅满目，若读者彻底本身动手则要一篇篇找，浪费时间走弯路；相反，若做者悉数摘抄进来，反倒未必符合各人状况，且不利阅读。

因此，主线讲解思路，参考深刻阅读。

下文以搭建 http://wingjay.com 我的博客为例。

GitHub Pages

在不购买服务器的前提下，咱们的网站须要挂在GitHub Pages上。

1. 你须要拥有一个GitHub帐号，去完成新手任务吧。

2. 进入GitHub Pages，一步步作，完成后就能在浏览器打开http://wingjay.github.io了。

至此，咱们已经利用GitHub Pages搭建好了我的博客雏形了。下面要作的，就是个性化了。

安装Hexo博客框架

通过上面步骤，咱们已经拥有了一个初步域名：http://username.github.io 加一个免费网络空间了。比如房间有了，但尚未任何家具。因此下面咱们须要把空白的博客丰富起来。

放心，不须要你手写一大堆html、css文件，也不用找jQuery来实现酷炫的页面效果。Hexo是一款博客框架，它会帮咱们搭建。

安装Hexo

参考中文文档或英文文档。完成该步后，你的电脑便拥有了Git、Node.js和Hexo。

GitHub管理

为了让本身将来的博客和代码处在git管理之下，咱们要把刚刚在Github上博客项目拉到本地。如本人建立的https://github.com/wingjay/wingjay.github.io，在本地建立文件夹，名字任意，此处设为myblog，进入该文件夹，把项目代码clone下来。

git clone https://github.com/wingjay/wingjay.github.io

好了，此时会自动在myblog目录下建立子文件夹wingjay.github.io,那里就是咱们博客的代码，之后的操做都在git的管理之下了，此时默认的branch为master。

初始化Hexo

请参考文档。init命令中的<folder>就是文件夹wingjay.github.io。初始化后，wingjay.github.io里面就已经有完整的Hexo框架了。

熟悉Hexo

为了让读者快速了解Hexo，我做几个简单介绍吧。固然，更多的仍是须要仔细阅读文档才能了解更详细。

• _config.yml是总体的配置文件，不少基础配置、插件配置等都须要在里面进行。要注意的是，该文件格式要求极为严格，缺乏一个空格都会致使运行错误。小提示：不要用Tab缩进，用两个空格符。

• layout，包括draft(草稿)、page(页面)、post(文章)。这个就是三种文件的基本格式，其中post是你发表的文章，会显示在你的网站里，一篇post会包括title标题、date日期、tags标签等信息；draft是草稿，只有你在本地能看到，必需要publish后才能成为post，draft和post差异是date，由于draft没有发表，因此不须要指定日期。page是一个页面，对应一个新的html页面，好比博客内容展现页是一个页面，留言本也是一个页面。

• public文件夹，这个文件夹是最终会发布到网站上的真实内容。怎么理解呢？咱们能够把public文件夹看成是真正的被用户看到的，而其余的source、themes等都是为public服务的。Hexo里有一个很重要的指令hexo generate，这个指令就是利用全部代码里的配置信息、source里写的文章、themes里的样式，共同生成最终的静态html文件，存入public文件夹内。在咱们执行了发布指令hexo deploy后，就会把public的内容部署到GitHub Pages上。当用户在访问咱们的博客时，他们会看到public里生成的html文件。这个概念很是重要，即代码和真实静态页面是独立的。

• generate和deploy，generate会把咱们的配置、文章和主题结合起来生成一堆酷炫的html静态文件放在public里面。但此时用户还看不到本地public文件里的页面，咱们必须用后一个指令deploy才能把静态文件部署到GitHub Pages上。不过，在部署前，须要配置让它自动部署到咱们前面建立的Github项目中。

• deploy相关配置。为了可以让项目自动把public文件夹的内容部署到GitHub项目中，咱们能够按部署文档进行配置，其中选择的branch为master。此后，每次运行deploy后，项目就会自动把public文件夹内容所有覆盖到当前的GitHub项目master分支上。

• 代码和静态文件分开管理。根据上面知道，每次部署后，public文件内容会覆盖掉项目整个master分支。这样能够实现网站静态文件的版本控制，可是，仔细对比这个master分支，咱们会发现里面只剩下静态文件了，咱们的代码好比source、themes通通没有了，这就致使没法对代码进行版本管理了。这意味着我换一台电脑，我就再也找不到代码了，只剩下一堆以前编译出来的静态文件。因此，为了对代码也进行版本控制，咱们建立一个新的分支：code，而后在这个分支里进行代码控制，master里则保存部署的新的静态文件。你们能够自行比对这两个branch的内容差别。

配置Hexo

作一些基础配置便可，请参考配置文档

小结

到这里，咱们已经完成了hexo的配置，咱们能够分别管理代码和静态文件。执行deploy操做后，刷新你的网页 http://username.github.io 你就能看到默认的内容了。

但此时仍是默认主题，不够美观，因此下一步要配置Next主题。

配置主题Next

Hexo主题很是多，能够参考丰富多彩的Hexo主题，本文选Next为主题，样式参考个人博客。

进入配置阶段，最好的文档仍是官方文档，简单得不能再细致了。下面只提几点注意：

• 第三方评论系统。评论系统很重要，你能够与读者进行更多交流，配置也简单，建议采用DISQUS，更国际化一点，配置见此。另外，前期建议开启不登录评论，即在Disqus的Comment Rule里容许Guest comment。

• 建立留言板。熟悉page的建立与使用，参考这里

• 给本身博客作SEO。有好的SEO便于搜索引擎索引你的网站，随着之后读者增多，他们能够更好搜索到你的网站。具体方法见此

替换本身的域名

好了，通过上面的步骤，博客已经拥有了一个全新的主题啦。

下面，咱们要对域名 http://wingjay.github.io 下手啦。

购买域名

速速前往万网或相关域名购买网站，按本身名字挑选一个闪闪发光的我的域名吧！

域名解析_1

以购买的域名wingjay.com为例，咱们但愿在访问这个域名时能自动进入Github Pages，因此咱们要在万网创建一个CNAME纪录来帮咱们作一个域名跳转：wingjay.com -> wingjay.github.io，www.wingjay.com -> wingjay.github.io。添加方法参考这里，添加后能够看到两条记录：

而后万网会在世界各地的DNS服务器上添加这两条记录，当用户访问wingjay.com时会自动去访问wingjay.github.io。

域名解析_2

可是，此时并不能成功访问，由于Github Pages是有限制的，它不容许任意域名都跳转过来，而是只限制一个域名，并且这个域名必须声明在CNAME文件中。

因此，咱们须要添加一个CNAME文件到项目的master中才行，参考这里。读者能够参考本人的CNAME文件内容。

不过，对于Hexo 3，这里有一个坑要注意：你们应该还记得上文说的，master分支里的内容都是自动生成的，并且会彻底覆盖以前的内容。若是咱们直接建立一个新文件CNAME，填好域名。但会发如今下一次部署后这个文件就消失了。不用惊讶，由于hexo并不会自动生成CNAME文件，因此在部署时被覆盖删除了。

因此，咱们就须要这个CNAME工具hexo-generator-cname，这时会自动在public里生成一个CNAME文件，把你的域名加进去再部署一下吧！

HTTP -> HTTPS

HTTPS是安全版的HTTP协议，它在http协议与TCP之间加入SSL层，采用端口443，不只会对传输数据加密，还会进行身份验证。固然我的博客并无强制性要求采用该协议，这也只是本人的好奇而为。

目前Github Pages已经支持https了，可是不支持自定义证书。不过咱们能够利用CloudFlare来实现。具体实现能够参考这里。

说明：po主网站的https正处在申请中

总结

通过上面的步骤，咱们已经可以经过访问本身的域名进入本身酷炫的博客了。本文的任务也就告一段落。

除了上面的功能，本人还完成了支持双域名同时登录，其中，支持双域名的解决思路是考虑到Github Pages的CNAME纪录只容许添加一个域名，因此本人又在Gitcafe上部署了一套。不过考虑到这点你们不必定能用的上，就没有作介绍，有须要的话能够看下文的联系方式联系我。

关于做者wingjay

欢迎各位关注
个人Github https://github.com/wingjay
和
个人我的博客 http://wingjay.com
若是有问题，能够给我留言或发邮件:yinjiesh@126.com

感谢！