概述

Hexo是一款基于node.js的博客框架,使用MarkDown语法进行内容编辑,与传统的wordpress等动态网站相比,博客的渲染生成均在本地完成,所生成的静态页面可以部署到GithubPages等网站,无需数据库,甚至主机主机支持。目前,hexo在github已拥有7000多start,并拥有许多实用插件以及主题元素,足以见得其受欢迎程度,本来网上已有足够多的教学帖,但大多使用的版本较老或者过为冗余,本文秉承快速入门的初衷,记录了下我在安装部署hexo的经过以及踩过的那些坑。

note:很多童鞋因为SSHkey的关系弄了很久没有成功便放弃了,本文介绍的方法是脱离SSHkey利用https的方式的部署,如需ssh部署的请自行参阅官方文档
Reference:[项目地址] [官方文档]

安装过程

1.github

①登录github帐号,新建一个版本仓库。仓库名字为USER_NAME.github.com 这个仓库名称既为你的pages访问链接->PAGES_URL

②我选择了https的方式进行项目部署,每次部署需要输入github帐号密码进行认证,当然你也可以选择ssh的方式,已经有很多人写过了类似的教程,如若需要请自行查阅,我就不再赘述了。
进入主页,copy到Http的Clone地址CLONE_URL(即后缀为.git的地址)


准备完成。

2.本地

1)git
根据系统版本到git下载页下载并安装.

2)nodejs
根据系统版本到nodejs下载页下载并安装.

3)配置环境变量,将git nodejs npm配入环境变量。配置成功后确认能执行git node npm指令


3)hexo 包
①安装hexo

> npm install -g hexo

②初始化hexo路径

> hexo init *DIR_NAME* //FLOD_NAME为你创建给hexo的目录名字
> cd DIR_NAME;

③早期的hexo包是全家桶,我找了很多之前的教学攻略都是只安装了一个hexo导致组件不全无法预览、部署,查阅了官方的文档发现了解决方案

> npm install hexo-renderer-ejs --save //ejs
> npm install hexo-renderer-stylus --save
> npm install hexo-renderer-stylus --save
> npm install hexo-server //服务器模块
> npm install

consle得到如下输出即为成功

> npm install
npm WARN optional dep failed, continuing fsevents@0.3.8
npm WARN optional dep failed, continuing fsevents@1.0.5
|
> dtrace-provider@0.6.0 install *HEXO_HOME*\node_modules\hexo\node_modules\buny
an\node_modules\dtrace-provider
> node scripts/install.js
hexo-generator-category@0.1.3 node_modules\hexo-generator-category
├── object-assign@2.1.1
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)
hexo-generator-index@0.1.3 node_modules\hexo-generator-index
├── object-assign@2.1.1
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)
hexo-generator-tag@0.1.2 node_modules\hexo-generator-tag
├── object-assign@2.1.1
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)
hexo-generator-archive@0.1.3 node_modules\hexo-generator-archive
├── object-assign@2.1.1
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)
hexo-server@0.1.2 node_modules\hexo-server
├── object-assign@2.1.1
├── open@0.0.5
├── mime@1.3.4
├── bluebird@2.10.2
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-colo
r@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── morgan@1.6.1 (on-headers@1.0.1, basic-auth@1.0.3, depd@1.0.1, on-finished
@2.3.0, debug@2.2.0)
├── serve-static@1.10.0 (escape-html@1.0.2, parseurl@1.3.0, send@0.13.0)
├── connect@3.4.0 (parseurl@1.3.0, utils-merge@1.0.0, debug@2.2.0, finalhandl
er@0.4.0)
└── compression@1.6.0 (bytes@2.1.0, vary@1.1.0, on-headers@1.0.1, compressibl
e@2.0.6, debug@2.2.0, accepts@1.3.0)
hexo-renderer-stylus@0.3.0 node_modules\hexo-renderer-stylus
├── stylus@0.52.4 (css-parse@1.7.0, debug@2.2.0, mkdirp@0.5.1, source-map@0.1
.43, glob@3.2.11, sax@0.5.8)
└── nib@1.1.0 (stylus@0.49.3)
hexo-renderer-marked@0.2.5 node_modules\hexo-renderer-marked
├── object-assign@2.1.1
├── marked@0.3.5
├── strip-indent@1.0.1 (get-stdin@4.0.1)
└── hexo-util@0.1.7 (ent@2.2.0, bluebird@2.10.2, highlight.js@8.9.1)
hexo@3.1.1 node_modules\hexo
├── hexo-front-matter@0.2.2
├── pretty-hrtime@1.0.1
├── abbrev@1.0.7
├── archy@1.0.0
├── titlecase@1.0.2
├── text-table@0.2.0
├── strip-indent@1.0.1 (get-stdin@4.0.1)
├── tildify@1.1.2 (os-homedir@1.0.1)
├── chalk@1.1.1 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-style
s@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── hexo-i18n@0.2.1 (sprintf-js@1.0.3)
├── minimatch@2.0.10 (brace-expansion@1.1.2)
├── through2@1.1.1 (xtend@4.0.1, readable-stream@1.1.13)
├── bluebird@2.10.2
├── swig-extras@0.0.1 (markdown@0.5.0)
├── moment-timezone@0.3.1
├── js-yaml@3.4.6 (inherit@2.2.2, esprima@2.7.0, argparse@1.0.3)
├── warehouse@1.0.3 (graceful-fs@4.1.2, cuid@1.2.5, JSONStream@1.0.7)
├── nunjucks@1.3.4 (chokidar@0.12.6, optimist@0.6.1)
├── cheerio@0.19.0 (entities@1.1.1, dom-serializer@0.1.0, css-select@1.0.0, h
tmlparser2@3.8.3)
├── moment@2.10.6
├── hexo-cli@0.1.9 (minimist@1.2.0, bluebird@3.0.6)
├── lodash@3.10.1
├── swig@1.4.2 (optimist@0.6.1, uglify-js@2.4.24)
├── hexo-util@0.1.7 (ent@2.2.0, highlight.js@8.9.1)
├── bunyan@1.5.1 (safe-json-stringify@1.0.3, dtrace-provider@0.6.0, mv@2.1.1)
└── hexo-fs@0.1.5 (escape-string-regexp@1.0.3, graceful-fs@4.1.2, bluebird@3.
0.6, chokidar@1.3.0)

④生成页面

> hexo generate //生成静态网页 hexo g也可以
> hexo server //启动预览服务器 hexo s也可以

note: hexo 启动的时候如果修改了markdown文件会自动生成,也就是说静态页面在启动服务器之后保存修改的文件内容会自动生成,不需要重复④步骤,直接刷新在浏览器中刷新即可查看效果,如果效果不对很有可能是markdown语法错误,这时候查看下console的输出信息。

⑤ 访问http://localhost:4000/ 你就发现新的大陆了。

写文章

>>hexo new "*POST_NAME*" //新建文章
//hexo new page "*PAGE_NAME*" 新建页面

执行之后则会在/HEXO_HOME/source/_posts/POST_NAME.md生成一个markdown文件。


打开后已经具有了一个基础模版,在这里加入一个hello wold。

启动服务器,新建的post便出现了

PUSH内容到github

①打开/HEXO_HOME/_config.yml
在中间找到 deploy内容修改并保存

deploy:
type: git
repository: *CLONE_URL* //gitclone地址
branch: master

②部署

> hexo deploy

输入自己的github帐号密码等待push成功即可

使用浏览器中访问http://USER_NAME.github.io/ (既PAGES_URL) 整个部署过程就完成了,是不是简单到没朋友?

关于Markdown[wiki]

Markdown 是一种轻量级标记语言,语法也十分简单易学。

关于Markdown的语法学习推荐一个我无意中发现的网站Cmd Markdown,左边代码右边效果同步预览上手很快!
坑就填到这里,enjoy!