Hexo一个超赞的基于node.js的github pages博客系统

最近一直在留意基于github pages的站点系统,个人比较懒惰,所以就没怎么关注官方推荐的jekyll。到了官方推荐,自然会很赞!但是这货是基于ruby的,不会ruby怎么破。想想,还是自己搞一套出来。其实,即便是自己搞也是不难的。

明白以下这几点,就可以动手写了:

1,github pages只支持纯静态,即站点只能放.js,.css,.html等类型的文件;

2,如果写一个纯静态的页面,放到github pages上是绝对没问题的;

3,如果不想写纯静态页面,那么就得动态生成,比如用java,php等生成静态文件;

4,即便是静态,但是必要的“动态”内容还是有必要存在的,比如评论。事实上,动态评论是需要存数据库得,所以这块得用第三方服务来调用,推荐使用多说评论框、搜狐畅言等等来解决问题

以PHP为例,首先我们得有一套简易的CMS系统,其次我们的CMS系统得有一个生成html的功能。事实上,失眠上有这样的cms存在,比如国内的织梦和PHPcms,都是没有问题的。

既然生成了静态html文件,那么我们就可以将静态文件上传到github,放到pages就可以了。

做了这么多铺垫,我只想说,基佬们,坐等我的基于PHP的github pages系统出现吧!


好了,上面的内容貌似有些跑题。接下来,我们就准备步入正轨吧。

今天推荐的github pages站点系统(或者叫博客系统),估计大家应该玩过或者听说过—HEXO。

其官网地址为http://hexo.io/zh-cn/ 居然支持中文,所以不用担心玩不转。

1,hexo是基于nodejs的,所以在开始之前,请在电脑上面安装一下nodejs,并且把node命令加入系统path。这里就不罗嗦细节了。具体大家自行Google~

2,如果你在天朝,那么还推荐你安装一下淘宝的npm–cnpm。使用npm命令安装。至于为什么安装,你该懂的。如果你想安装,也不是说不行,要么速度慢,要么需要翻墙。cnpm干神马的,自行Google,简单的说它是npm在中国的镜像。

$ npm install cnpm -g –registry=https://registry.npm.taobao.org
3,接下来,就准备安装hexo了(开始之前请事先用cmd进入到某个你认为可以放网站的文件夹目录)。
$ cnpm install hexo-cli –g #安装了cnpm之后,npm就完全可以代替啦。

$ hexo init blog #初始化hexo

$ cd blog #进入到blog目录

$ hexo server #启动hexo服务
4,打开浏览器,输入网址http://localhost:4000/ 神奇的一幕发生了!真是不可思议。

image

对了,千万不要关闭hexo server的窗口,否则站点就被关闭了。

5,博客系统有了,自然得写一篇试试,新开一个cmd,进入到blog系统的根目录

$ hexo new “这里是博客名字”
这行命令会在blog目录下的source/_posts下面生成一个名字对应的”.md”文件。

这个文件是一个markdown文件,这个文件对应的就是博客系统中的一篇博客。

image

6,如果单单是这样,自然是不能上传到github pages的,因为它还不是一个静态资源。所以,接下来你需要执行以下命令

$ hexo generate
这个命令会让hexo生成博客系统对应的静态文件,文件目录为:blog/public/

只要把这里的文件上传到github pages就可以成为站点访问了!

github的上传请使用git push命令–具体使用方法请查看本博客之前的文章或者Google。

7,部署。

事实上,hexo可以一键部署到很多地方,配置_config.yml文件即可,该文件路径为blog/_config.yml

更多的细节,请查看这里:http://hexo.io/zh-cn/docs/deployment.html

8,配置。部署配置也在配置文件中,所以文件为blog/_config.yml

配置站点基本信息

Site

title: 网站标题

subtitle:网站子标题

description:网站描述

author: 作者

language:语言

timezone:时区
URL配置

URL

If your site is put in a subdirectory, set url as ‘http://yoursite.com/child’ and root as ‘/child/‘

url: 站点基本URL ##填写你站点的带http://的地址

root: / #站点根目录,如果你的站点在子目录,请写子目录的地址,比如”/blog/”

permalink: :year/:month/:day/:title/ #链接格式

permalink_defaults: #默认链接
其他配置不是太重要,基本可以不用配置。如果需要,这个文件写的很详细。