使用hexo搭建静态博客

使用hexo搭建静态博客

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。

Aseoe wechat
欢迎您扫一扫上面的微信公众号(aseoev),订阅我的博客!