使用Hexo+Github Pages 来搭建自己的专属博客(一)

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

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

一、简介

Hexo
Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Github
如果是程序员肯定知道,Github是开源代码库以及版本控制系统。在GitHub,用户可以十分轻易地找到海量的开源代码, 也可以方便的在远程和本地管理项目代码和文件资源。

Github Pages
Github Pages可以理解为用户编写的、托管在github上的静态网页,你只需将你的改动提交到Github,就可以实现更改你的网页。

二、基础环境配置

安装Node.js

  • Windows系统

    Node.js官方下载对应的版本安装即可。
    Node.js下载页面

  • Linux系统

    使用apt-get命令安装

    sudo apt-get install nodejs
    sudo apt-get install npm
    

安装Git

Git官网下载对应版本安装即可。
此处输入图片的描述

安装Hexo

Node和Git都安装完毕后

$ sudo npm install hexo-cli -g

通过apt-get安装npm的同学需要同时安装nodejs-legacy才可以成功使用npm安装hexo

$ sudo apt-get install nodejs-legacy

至此,搭建个人博客所需要的环境已经完备。

三、配置GitHub

首先你要到GitHub官网注册账号,并建立一个 username.github.io命名的仓库。其中username就是你的Github用户名。
此处输入图片的描述

配置SSH Key
首先查看本地是否已经有SSH Key, 终端输入如下命令:

cd ~/.ssh;ls

如果存在id_ras.pub,说明已经有SSH Key,否则需要重新创建。
使用如下命令生成密钥

ssh-keygen -t rsa -C "your_email@example.com"

添加SSH Key到GitHub账户

  • 复制ssh key内容

    pbcopy < ~/.ssh/id_rsa.pub
    
  • 点击GitHub账户头像,点击设置进入GitHub设置
    此处输入图片的描述
  • 点击左边的SSH and GPG Keys
    此处输入图片的描述
  • 添加SSH Key, 填写刚刚复制的密钥内容
    此处输入图片的描述

测试SSH连接

ssh -T git@github.com

如果有如下提示:

The authenticity of host 'github.com (192.30.252.1)' can't be established.
RSA key fingerprint is nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)?

输入yes即可

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

四、关联Hexo 和 Github

配置Hexo
进入博客根路径,打开_config.yml,拉到最后,修改如下:

//注意冒号后面有空格
deploy:
type: git
repository: git@github.com:ConnorLin/Connorlin.github.io.git
branch: master

安装Hexo git插件

npm install hexo-deployer-git --save

将博客部署到GitHub

hexo deploy

至此,在浏览器输入博客地址 http://username.github.io 就可以访问博客啦!

五、Hexo常用命令

  • 新建文章
hexo new [template] "Title"  //新建标题为Title的文章

其中template是可选参数,即文章模板,默认值为post。scaffolds路径下的文件就是模板文件,你可以新建或编辑现有模板。
执行命令后,在source/_posts/下会生成Title.md文件,当然,也可以手动创建后缀为“.md”的文件,并用喜欢的markdown编辑器编辑。
本文使用作业部落的Cmd MarkDown编写的。

  • 新建页面
heox new page "Page Title"  //新建页面
  • 生成静态页面至public目录
hexo generate   //生成静态页面
  • 本地预览
hexo server //启动本地服务,Ctrl+C关闭
  • 部署到Github
hexo deploy     //将博客部署到Github
  • 清理已经生成的静态文件
hexo clean

六、美化

美化自然离不开主题,Hexo主题花样繁多,可以在Hexo Themes找到你中意的主题。试过几种主题,个人比较中意YiliaNext这两款主题,本文主题使用的是Next。
Next有官方教程,讲解非常详细,包括添加评论、搜索等一应俱全,此处不再赘述。
至于如何应用其他主题,步骤大同小异,此处以Next为例:

//进入博客根目录
$ cd your-hexo-site
//从Github上克隆主题到你博客theme里
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

然后打开根目录下的_config.yml文件,搜索字段theme,将theme的值改为主题名字Next

theme: next

配置完毕,此时可以启动本地服务http://localhost:4000/ 来预览主题了。

七、写作

Markdown
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

Markdown有什么优点?

  • 专注你的文字内容而不是排版样式。
  • 轻松的导出 HTML、PDF 和本身的 .md 文件。
  • 纯文本内容,兼容所有的文本编辑器与字处理软件。
  • 可读,直观。适合所有人的写作语言。

我该用什么工具?

  • Windows下可以使用 MarkdownPad2。
  • 在 Mac OS X 上,我建议你用 Mou 这款免费且十分好用的 Markdown 编辑器。
  • Web 端上,我强烈推荐 简书 这款产品。

写完博文后,复制到_post文件夹再推送至Github仓库即可。

图床

这里使用GitHub作为图床,存储博文中用到的图片。
对熟悉GitHub基本操作的人来说太简单了,就是新建个repository,然后上传图片就结了。
具体步骤为:

  • 在GitHub上新建一个repository,使用下面的命令将其clone到本机你想要的目录中。
git clone git@github.com:himitty/images.git

这里以我的git地址作为例子,将其改为你自己新建的就好了。

  • 把图片放到本机你刚clone到的目录中。注意,是可以分目录来分类的,支持中文目录。然后,运行下面的命令

    git add . //不要忘记最后的 . 
    git commit -m "blog_img"    
    git push origin master 
    

    至此,你的图片已经在GitHub服务器上了。但是只有原图,没有其他的尺寸,以后传之前先调整一下大小吧。

  • 在你的images仓库中找到你需要的图片,如下图所示:
    此处输入图片的描述
    将网址中blob改为raw,即可使用。

    如果你像我一样比较懒觉得输入三行命令比较烦的话可以定义一个别名alias:

    alias tp='tp(){ cd E:/SkyDrive/img;git add .;git commit -m "blog_img";git push origin master;};tp'  
    

至此,一个简单明了的个人博客就已经搭建好啦!程序猿/媛们可以动手写自己的第一篇博文咯!

参考资料

  1. 小白独立搭建博客–Github Pages和Hexo简明教程
  2. [干货]如何在一天之内搭建以你自己名字为域名且具备cool属性的个人博客
  3. 5分钟 搭建免费个人博客
  4. Sublime插件:Markdown篇