Hexo 是一款基于Node.js、快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。作者是来自台湾的@tommy351 官网

hexo是一个博客程序，拥有一个简单的服务器（可以用来当简单的动态博客使用），也有生成器，生成的静态文件可以一键部署到Github Pages上，也可以部署到任意静态文件服务器上面。

下面一步一步地说怎么用hexo搭建一个博客。

搭建环境

安装Node

作用：用来生成静态页面的
到Node.js官网下载相应平台的最新版本，一路安装即可。

安装Git（必须）

作用：把本地的hexo内容提交到github上去.

安装Xcode(自带有Git)

申请GitHub

作用：是用来做博客的远程创库、域名、服务器之类的。

安装Hexo

Node和Git都安装好后,首先创建一个文件夹,如hexo,用户存放hexo的配置文件,然后进入hexo里安装Hexo。

执行如下命令安装hexo

sudo npm install -g hexo

然后，执行init命令初始化hexo：

hexo init

至此，全部安装工作已经完成！blog就是你的博客根目录，所有的操作都在里面进行。

生成静态页面

hexo generate ( hexo g 亦可)

本地启动

启动本地服务，进行文章预览调试，命令：

hexo server

浏览器输入http://localhost:4000

请使用高级浏览器，否则可能…你懂的！

写文章

1
2
3

hexo n #写文章
hexo g #生成
hexo d #部署 # 可与hexo g合并为 hexo d -g

执行new命令，生成指定名称的文章至hexo\source_posts\postName.md。

hexo new [layout] “postName” #新建文章

其中layout是可选参数，默认值为post。有哪些layout呢，请到scaffolds目录下查看，这些文件名称就是layout名称。当然你可以添加自己的layout，方法就是添加一个文件即可，同时你也可以编辑现有的layout，比如post的layout默认是hexo\scaffolds\post.md

1
2
3
4

title: { { title } }
date: { { date } }
tags:
---

请注意，大括号与大括号之间我多加了个空格，否则会被转义，不能正常显示。

我想添加categories，以免每次手工输入，只需要修改这个文件添加一行，如下：

1
2
3
4
5

title: { { title } }
date: { { date } }
categories: 
tags: 
---

postName是md文件的名字，同时也出现在你文章的URL中，postName如果包含空格，必须用”将其包围，postName可以为中文。 ( 注意，所有文件：后面都必须有个空格，不然会报错。)

看一下刚才生成的文件hexo\source_posts\postName.md，内容如下：

1
2
3
4
5
6

title: postName #文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2016-10-18 20:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: #文章分类目录，可以为空，注意:后面有个空格
tags: #文章标签，可空，多标签请用格式[tag1,tag2,tag3]，注意:后面有个空格
---
这里开始使用markdown格式输入你的正文。

接下来，你就可以用喜爱的编辑器尽情书写你的文章。关于markdown语法，可以参考Markdown简明语法

fancybox
可能有人对这个Reading页面中图片的fancybox效果感兴趣，这个是怎么做的呢。
很简单，只需要在你的文章*.md文件的头上添加photos项即可，然后一行行添加你要展示的照片：

1
2
3
4
5
6
7

layout: photo
title: 我的阅历
date: 2016-10-18 21:00:50
tags: [hexo]
photos:
- http://www.aseoe.com/uploadfile/2016/0619/20160619011343311.jpg
- http://www.aseoe.com/uploadfile/2016/0619/20160619012200629.jpg

经过测试，文件头上的layout: photo可以省略。

不想每次都手动添加怎么办？同样的，打开您的hexo\scaffolds\photo.md

1
2
3
4
5
6
7

layout: { { layout } }
title: { { title } }
date: { { date } }
tags: 
photos: 
- 
---

然后每次可以执行带layout的new命令生成照片文章：

hexo new photo "photoPostName" #新建照片文章

description
markdown文件头中也可以添加description，以覆盖全局配置文件中的description内容，请参考下文_config.yml的介绍。

1
2
3
4
5
6

title: hexo你的博客
date: 2016-10-18 21:30:22
categories: default
tags: [hexo]
description: 你对本页的描述
---

hexo默认会处理全部markdown和html文件，如果不想让hexo处理你的文件，可以在文件头中加入layout: false。

文章摘要
在需要显示摘要的地方添加如下代码即可：

以上是摘要
<!--more-->
以下是余下全文
more以上内容即是文章摘要，在主页显示，more以下内容点击『> Read More』链接打开全文才显示。

hexo中所有文件的编码格式均是UTF-8。

本文主要讲述了什么是前端开发以及前端开发学什么，旨在分享一些前端学习教程及一些相关的前端知识资料等，如有不当之处，还请指教。

什么是前端开发

前端开发是协调前端设计师、后端程序员实现网站页面或程序界面，优化交互体验的一个职位，详情查看什么是前端开发专题。

前端开发学什么

一般来说，前端开发入门必须要要掌握html、css、javascript、jquery等，之后学习html5、css3以及一些框架如bootstrap、nodejs、angularjs等，这里只要简要概述，详情查看前端开发学什么专题。

前端知识点概述

主要是对javascript、jquery的一些核心知识点进行概述，如javascript的语句、函数、数组、字符串、对象模型、作用域等，由于篇幅较长，还是通过专题的形式。javascript与jquery知识点

前端一些资源分享

这里总结一些前端学习要用到的资料，前端api在线手册（也有离线手册下载地址）、前端书籍集锦 、前端面试题 、前端工具箱 、前端问答社区可以互动交流。

前端技术专题

为了方便学习，收集整理了一些技术专题与大家分享，内容涵盖较多，请耐心学习。专题地址:http://www.aseoe.com/special/ 专题内容会不断持续更新，敬请关注。

分享一些前端好文章

1. Web前端开发学习路径图
2. 写给想成为前端工程师的同学们
3. 前端开发人员必须了解的七大技能图谱
4. 网页前端学习总结分享
5. 如何科学合理得运用一天的时间
6. Web前端性能优化

写在最后

前端的东西比较多而杂，入门容易，要想学好必须下足功夫，多写多练多做。
更多前端学习资料，请关注爱思资源网，专注Web前端开发

爱思资源网：http://www.aseoe.com/
前端交流千人群：立即加入