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

零、个人博客

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

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

一、先看成果

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

  1. . 个人域名: wingjay.com
  2. . 无需购置服务器，本站同时挂载在Github Pages 和 GitCafe Pages上，免服务器费的同时还能做负载均衡，想想还有点小激动
  3. . 在GitHub上同时管理你的博客和相应代码，再也不用担心博客遗失
  4. . SSL支持，即"http://" -> "https://"，更安全也更高大上

二、再看兵器

  • 博客框架：Hexo 3，这是一款能快速、简洁且高效的博客框架，支持Markdown编辑，自动渲染出漂亮的静态页面。
  • 前端主题：Next，效果参考wingjay.com
  • 域名购买：类似万网的平台都可以，你可以选购自己名字的域名，一年几十元左右，两杯咖啡的钱。
  • SSL：CloudFlare

三、抄起家伙

本文写作方式是

  1. 安装流程主线
+ 
  1. 优质参考文章
。由于网络上关于Hexo搭建博客的教程玲琅满目，若读者完全自己动手则要一篇篇找，浪费时间走弯路；相反，若作者悉数摘抄进来，反倒未必符合各人情况，且不利阅读。

所以，

  1. 主线
讲解思路，
  1. 参考
深入阅读。

下文以搭建 wingjay.com 个人博客为例。

1. GitHub Pages

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

  1. 你需要拥有一个GitHub账号，去完成新手任务吧。
  2. 进入GitHub Pages，一步步做，完成后就能在浏览器打开wingjay.github.io了。

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

2. 安装Hexo博客框架

经过上面步骤，我们已经拥有了一个初步域名：username.github.io 加一个免费网络空间了。好比房间有了，但还没有任何家具。所以下面我们需要把空白的博客丰富起来。

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

i. 安装Hexo

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

ii. GitHub管理

为了让自己未来的博客和代码处在git管理之下，我们要把刚刚在Github上博客项目拉到本地。如本人创建的github.com/wingjay/win…，在本地创建文件夹，名字任意，此处设为

  1. myblog
，进入该文件夹，把项目代码clone下来。

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

好了，此时会自动在

  1. myblog
目录下创建子文件夹
  1. wingjay.github.io
,那里就是我们博客的代码，以后的操作都在git的管理之下了，此时默认的branch为
  1. master
。

iii. 初始化Hexo

请参考文档。init命令中的

  1. <folder>
就是文件夹
  1. wingjay.github.io
。初始化后，
  1. wingjay.github.io
里面就已经有完整的Hexo框架了。

iv. 熟悉Hexo

为了让读者快速了解

  1. Hexo
，我作几个简单介绍吧。当然，更多的还是需要仔细阅读文档才能了解更详细。

Hexo目录结构
    1. _config.yml
    是整体的配置文件，很多基础配置、插件配置等都需要在里面进行。要注意的是，该文件格式要求极为严格，缺少一个空格都会导致运行错误。小提示：不要用Tab缩进，用两个空格符。
    1. layout
    ，包括
    1. draft(草稿)、page(页面)、post(文章)
    。这个就是三种文件的基本格式，其中
    1. post
    是你发表的文章，会显示在你的网站里，一篇post会包括
    1. title标题、date日期、tags标签
    等信息；
    1. draft
    是草稿，只有你在本地能看到，必须要
    1. publish
    后才能成为
    1. post
    ，draft和post差别是date，因为draft没有发表，所以不需要指定日期。
    1. page
    是一个页面，对应一个新的html页面，比如博客内容展示页是一个页面，留言本也是一个页面。
    1. public文件夹
    ，这个文件夹是最终会发布到网站上的真实内容。怎么理解呢？我们可以把
    1. public
    文件夹当作是真正的被用户看到的，而其他的
    1. source、themes
    等都是为
    1. public
    服务的。Hexo里有一个很重要的指令
    1. hexo generate
    ，这个指令就是利用所有代码里的配置信息、source里写的文章、themes里的样式，共同生成最终的
    1. 静态html文件
    ，存入
    1. public
    文件夹内。在我们执行了发布指令
    1. hexo deploy
    后，就会把
    1. public
    的内容部署到
    1. GitHub Pages
    上。当用户在访问我们的博客时，他们会看到public里生成的html文件。这个概念非常重要，即
    1. 代码和真实静态页面是独立的
    。
    1. generate和deploy
    ，
    1. generate
    会把我们的配置、文章和主题结合起来生成一堆酷炫的html静态文件放在public里面。但此时用户还看不到
    1. 本地public文件
    里的页面，我们必须用后一个指令
    1. deploy
    才能把静态文件部署到
    1. GitHub Pages
    上。不过，在部署前，需要配置让它自动部署到我们前面创建的Github项目中。
    1. deploy
    相关配置。为了能够让项目自动把public文件夹的内容部署到GitHub项目中，我们可以按部署文档进行配置，其中选择的
    1. branch
    为
    1. master
    。此后，每次运行deploy后，项目就会自动把public文件夹内容全部覆盖到当前的GitHub项目master分支上。
    1. 代码
    和
    1. 静态文件
    分开管理。根据上面知道，每次部署后，public文件内容会
    1. 覆盖
    掉项目整个master分支。这样可以实现网站
    1. 静态文件
    的版本控制，但是，仔细对比这个master分支，我们会发现里面只剩下静态文件了，我们的代码比如source、themes统统没有了，这就导致无法对代码进行版本管理了。这意味着我换一台电脑，我就再也找不到
    1. 代码
    了，只剩下一堆之前编译出来的静态文件。所以，为了对代码也进行版本控制，我们创建一个新的分支：code，然后在这个分支里进行代码控制，master里则保存部署的新的静态文件。大家可以自行比对这两个branch的内容差异。

v. 配置Hexo

做一些基础配置即可，请参考配置文档

vi. 小结

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

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

3. 配置主题Next

Hexo主题非常多，可以参考丰富多彩的Hexo主题，本文选Next为主题，样式参考我的博客。

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

  • 第三方评论系统。评论系统很重要，你可以与读者进行更多交流，配置也简单，建议采用DISQUS，更国际化一点，配置见此。另外，前期建议开启
    1. 不登陆评论
    ，即在Disqus的
    1. Comment Rule
    里允许
    1. Guest comment
    。
  • 创建留言板。熟悉
    1. page
    的创建与使用，参考这里
  • 给自己博客做
    1. SEO
    。有好的SEO便于搜索引擎索引你的网站，随着以后读者增多，他们可以更好搜索到你的网站。具体方法见此

4. 替换自己的域名

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

下面，我们要对域名 wingjay.github.io 下手啦。

i. 购买域名

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

ii. 域名解析_1

以购买的域名

  1. wingjay.com
为例，我们希望在访问这个域名时能自动进入Github Pages，所以我们要在万网建立一个CNAME纪录来帮我们做一个域名跳转：
  1. wingjay.com
-> 
  1. wingjay.github.io
，
  1. www.wingjay.com
-> 
  1. wingjay.github.io
。添加方法参考这里，添加后可以看到两条记录：

域名解析

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

iii. 域名解析_2

但是，此时并不能成功访问，因为Github Pages是有限制的，它不允许任意域名都跳转过来，而是

  1. 只限制一个域名，而且这个域名必须声明在CNAME文件中
。

所以，我们需要添加一个CNAME文件到项目的master中才行，参考这里。读者可以参考本人的CNAME文件内容。

不过，对于

  1. Hexo 3
，这里有一个坑要注意：大家应该还记得上文说的，master分支里的内容都是自动生成的，而且会完全覆盖之前的内容。如果我们直接创建一个新文件CNAME，填好域名。但会发现在下一次部署后这个文件就消失了。不用惊讶，因为hexo并不会自动生成CNAME文件，所以在部署时被覆盖删除了。

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

5. HTTP -> HTTPS

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

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

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

四、总结

经过上面的步骤，我们已经能够通过访问自己的域名进入自己酷炫的博客了。本文的任务也就告一段落。

除了上面的功能，本人还完成了

  1. 支持双域名同时登陆
，其中，支持双域名的解决思路是考虑到Github Pages的CNAME纪录只允许添加一个域名，所以本人又在Gitcafe上部署了一套。不过考虑到这点大家不一定能用的上，就没有做介绍，有需要的话可以看下文的联系方式联系我。

五、一天变cool系列文章

如何在一天之内完成一款具备cool属性的Android产品<简诗>

如何在一天之内搭建以你自己名字为域名且具备cool属性的个人博客

谢谢！

wingjay

欢迎加入【阿里求职付费群】：

  1. 及时推送集团内最新岗位空缺信息
  2. 定期分享针对阿里的最新Android面试题及相关面试经验
  3. 长期提供阿里集团内各岗位的内推。
    详情：www.jianshu.com/p/655af849a…