如何在一天之内搭建以你自己名字为域名且具备 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 个人博客为例。

1. GitHub Pages

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

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

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

2. 安装Hexo博客框架

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

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

i. 安装Hexo

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

ii. 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

iii. 初始化Hexo

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

iv. 熟悉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文件。这个概念非常重要,即代码和真实静态页面是独立的
top Created with Sketch.