使用hexo搭建github个人博客小结

在GitHub上搭建静态站点依赖于官方提供的GitHub Pages机制,然而手动编写静态的html页面会因为布局和样式造成很多重复的工作,而如果是采用MarkDown语法来编写,能满足很多文档和博客编写的需求,却需要一种方式把MarkDown语法转成普通html,通过模板来定制生成的html样式。

MarkDown到html转换

GitHub官方推荐的方式,基于Ruby
jekyll是一个简单的免费的Blog生成工具,类似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务,例如Disqus。最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名。

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

实现步骤

1.安装NodeJs

我在Ubuntu系统使用了源码编译安装:下载源码解压后进去执行编译安装命令

1
2
3
4
$ make
$ sudo make install
$ node -v
v4.4.4

2.安装NPM

1
$ curl http://npmjs.org/install.sh | sudo sh

3.使用 npm 即可完成 Hexo 的安装

1
$ npm install -g hexo-cli

4.新建站点

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

5.命令

其他命令可参考官方网站,常用命令:

1
2
3
4
5
$ hexo n
$ hexo clean
$ hexo g
$ hexo s
$ hexo d

6.配置主题

默认的主题是landscape,可以自己选择修改
我使用的主题是raytaylorism

7.部署

部署之前需要先安装git插件:

1
$ npm install hexo-deployer-git --save

需要先在_config.yml中配置远程github地址例如:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/huzongyao/huzongyao.github.io.git
branch: master

部署命令:

1
$ hexo d

8.新建博客

博客系统搭建完成后,以后写博客就简单多了,使用命令行创建:

1
$ hexo n 博客标题

系统会在source/_post/目录生成 博客标题.md文件,头部的注释会指定博客的一些信息如标题,分类,标题

1
2
3
4
5
6
7
8
9
title: Hello World
date: 2016-06-14 09:53:09
categories:
- Sports
- Baseball
tags:
- Injury
- Fight
- Shocking

每次编辑完成后执行命令:

1
2
3
$ hexo clean
$ hexo g
$ hexo s

这时如果没有报错,就可以用浏览器打开http://localhost:4000/预览最终站点效果,确认无误后使用部署命令:

1
$ hexo d

大功告成了!

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器