hexo系列教程

hexo系列教程来源： http://zipperary.com/2013/05/28/hexo-guide-1/

hexo系列教程：（一）hexo介绍

什么是hexo

hexo是一个基于Node.js的静态博客程序，可以方便的生成静态网页托管在github和Heroku上。作者是来自台湾的@tommy351。引用@tommy351的话，hexo：

快速、简单且功能强大的 Node.js 博客框架。
A fast, simple & powerful blog framework, powered by Node.js.

类似于jekyll、Octopress、Wordpress，我们可以用hexo创建自己的博客，托管到github或Heroku上，绑定自己的域名，用markdown写文章。本博客即使用hexo创建并托管在github上。

为什么要用hexo

还是引用下作者的话：

不可思议的快速 ─ 只要一眨眼静态文件即生成完成
支持 Markdown
仅需一道指令即可部署到 GitHub Pages 和 Heroku
已移植 Octopress 插件
高扩展性、自订性
兼容于 Windows, Mac & Linux

我再加几条：

• 易用。不仅部署简单，平时使用中仅需要hexo new hexo generate hexo server hexo deploy四个命令。不像Jekyll需要很多繁琐的git命令。
• 轻。文件少、小，易理解，方便自定义。
• 用户多。虽然赶不上Jekyll和Octopress，但遇到什么问题都能搜索到答案，或者找到同样使用hexo的用户进行参考和咨询。

谁能使用hexo

这是一个免费开源的博客程序，任何人都可以使用和修改。但是不同于wordpress，hexo由于需要使用Github,Git,Markdown,Node.js这样的工具，好多插件、widget都需要自己安装、设置。所以适合那些有一定计算机基础，喜欢折腾的人。但是，不要恐惧，只要跟着本教程走，就能很方便地让自己的博客”飞起来”。

怎样搭建hexo博客

正题来了，请期待下一节。

注意

本系列相关博客均根据hexo1.1.3版本，但更高版本也几乎完全适用。各版本所做更新修正，请参考这里。

---

hexo系列教程：（二）搭建hexo博客

上一节对hexo进行了简单介绍，本节来讲讲怎么搭建hexo博客。

注意：本节教程只针对Windows用户，Linux和Mac用户请移步hexo安装。

安装Git

下载 msysgit 并执行即可完成安装。

安装Node.js

在 Windows 环境下安装 Node.js 非常简单，仅须下载安装文件并执行即可完成安装。

安装hexo

利用 npm 命令即可安装。（在任意位置点击鼠标右键，选择Git bash）

1	npm install -g hexo

创建hexo文件夹

安装完成后，在你喜爱的文件夹下（如H:\hexo），执行以下指令(在H:\hexo内点击鼠标右键，选择Git bash)，Hexo 即会自动在目标文件夹建立网站所需要的所有文件。

1

hexo init

安装依赖包

1	npm install

本地查看

现在我们已经搭建起本地的hexo博客了，执行以下命令(在H:\hexo)，然后到浏览器输入localhost:4000看看。

1 2	hexo generate hexo server

好了，至此，本地博客已经搭建起来了，只是本地哦，别人看不到的。下面，我们要部署到Github。

注册Github账号

已有账号可以跳过，没有的，请在此进行注册，很简单，这里就不介绍了。

创建repository

在自己Github主页右下角，创建一个新的repository。比如我的Github账号是zippera，那么我应该创建的repository名字应该是zippera.github.io。

部署

编辑_config.yml(在H:\hexo下)。你在部署时，要把下面的zippera都换成你的账号名。

1 2 3 4

deploy: type: github repository: https://github.com/zippera/zippera.github.io.git branch: master

据说最新版本的hexo 中，这里的 type 要写成 git，而不是 github。

执行下列指令即可完成部署。

1 2	hexo generate hexo deploy

注意：有些新用户需要设置 ssh，否则上述命令会失败。ssh 的介绍和设置方法请看官方教程，不用担心，很简单。

记住：每次修改本地文件后，需要hexo generate才能保存。每次使用命令时，都要在H:\hexo目录下。

Okay,我们的博客已经完全搭建起来了，在浏览器访问zippera.github.io就能看到你的成就了！

bugs

1. 有网友反应右键菜单中没有git bash选项，可以进入开始菜单找到git bash，然后通过cd进入相应目录执行命令。
2. 在github部署完成之后，马上访问可能出现404错误，这是正常的，（最多）等待十分钟左右就可以访问了。如果还不行，那很可能是 github 发送给你的验证邮件你没有打开看，据多方反映，验证后就没问题了。
3. 如果在hexo d之后出现fatal: 'username.github.io' does not appear to be a git repository，一是检查 repo 的名字是否合乎规范、是否含有大写字母、config.yml 中的 deploy 配置是否正确，二是把 git bash 关掉，重新打开再执行命令。
4. 有的同学可能不是 IT 界的，或者对shell 命令不太了解。在要求输入密码时，你输入之后密码是不显示的，这是为了安全，并非是你没输上。
5. 出现乱码的，不要使用 windows 中的「记事本」打开并编辑文件，推荐使用 sublime text，很简单。如果已经在「记事本」中编辑过，需要使用 sublime text 转码为「utf8」。
6. 安装 hexo 时卡在那儿不动，很可能是网络不给力，能全局 break wall 就好了。
7. 遇到什么其他的问题，不妨删除.deploy 和db.json 再重新生成试一试。

tips

hexo现在支持更加简单的命令格式了，比如：

hexo g == hexo generate

hexo d == hexo deploy

hexo s == hexo server

hexo n == hexo new

在下一节中，我们会介绍如何配置自己的网站，如何撰写和发表文章。

---

hexo系列教程：（三）hexo博客的配置、使用

在上一节中，我们在本地和github搭建起了自己的hexo博客站点，但是还未发表过文章，站点的配置还是原来的默认值。在本节，我们来进行个性化的设置，将站点打造成自己的，同时介绍下怎么撰文和发表。

站点配置用到两个文件，一个是对整站的配置H:\hexo\_config.yml，另一个是对主题的配置H:\hexo\themes\light_config.yml，我们来分别介绍。

H:\hexo\ _config.yml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

# Hexo Configuration ## Docs: http://zespia.tw/hexo/docs/configure.html ## Source: https://github.com/tommy351/hexo/ # Site 这里的配置，哪项配置反映在哪里，可以参考我的博客 title: Zippera's blog #站点名，站点左上角 subtitle: Walk steps step by step #副标题，站点左上角 description: Walk steps step by step #给搜索引擎看的，对站点的描述，可以自定义 author: zippera #在站点左下角可以看到 email: #你的联系邮箱 language: zh-CN #中国人嘛，用中文 # URL #这项暂不配置，绑定域名后，欲创建sitemap.xml需要配置该项 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://zipperary.com root: / permalink: :year/:month/:day/:title/ tag_dir: tags archive_dir: archives category_dir: categories # Writing 文章布局、写作格式的定义，不修改 new_post_name: :title.md # File name of new posts default_layout: post auto_spacing: false # Add spaces between asian characters and western characters titlecase: false # Transform title into titlecase max_open_file: 100 filename_case: 0 highlight: enable: true backtick_code_block: true line_number: true tab_replace: # Category & Tag default_category: uncategorized category_map: tag_map: # Archives 默认值为2，这里都修改为1，相应页面就只会列出标题，而非全文 ## 2: Enable pagination ## 1: Disable pagination ## 0: Fully Disable archive: 1 category: 1 tag: 1 # Server 不修改 ## Hexo uses Connect as a server ## You can customize the logger format as defined in ## http://www.senchalabs.org/connect/logger.html port: 4000 logger: false logger_format: # Date / Time format 日期格式，不修改 ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: MMM D YYYY time_format: H:mm:ss # Pagination 每页显示文章数，可以自定义，我将10改成了5 ## Set per_page to 0 to disable pagination per_page: 5 pagination_dir: page # Disqus Disqus插件，我们会替换成“多说”，不修改 disqus_shortname: # Extensions 这里配置站点所用主题和插件，暂默认，后面会介绍怎么修改 ## Plugins: https://github.com/tommy351/hexo/wiki/Plugins ## Themes: https://github.com/tommy351/hexo/wiki/Themes theme: light exclude_generator: plugins: - hexo-generator-feed - hexo-generator-sitemap # Deployment 站点部署到github要配置，上一节中已经讲过 ## Docs: http://zespia.tw/hexo/docs/deploy.html deploy: type: github repository: https://github.com/zippera/zippera.github.io.git branch: master

现在可以hexo generate，hexo server，打开localhost:4000查看效果了。

H:\hexo\themes\light_config.yml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

menu: #站点右上角导航栏，暂时默认，后面介绍修改 首页: / 存档: /archives 关于: /about ToDo: /todolist widgets: #站点右边栏，暂时默认，后面介绍修改和添加 - search - category - tagcloud - weibo - blogroll excerpt_link: 阅读全文 #替换为中文 plugins: twitter: #右边栏要显示twitter展示的话，需要在此设置 username: moxie198 show_replies: false tweet_count: 5 addthis: #SNS分享，身在天朝，当然用“百度分享”，暂时默认，后面会介绍 enable: true pubid: facebook: true twitter: true google: true pinterest: true fancybox: true #图片效果，默认 google_analytics: #要使用google_analytics进行统计的话，这里需要配置ID，暂时默认，后面介绍 rss: #生成RSS，需要配置路径，暂时默认，后面介绍

上面改动的不多，更多的是介绍了下功能，后面会相继介绍具体的修改方法。

好了，站点配置好了，我想发表一篇文章，怎么做呢？

1. hexo new "my new post"
2. 在H:\hexo\source\_posts中打开这个文件（打开方式用“记事本”即可），配置开头。

1 2 3 4 5 6

title: my new post #可以改成中文的，如“新文章” date: 2013-05-29 07:56:29 #发表日期，一般不改动 categories: blog #文章文类 tags: [博客，文章] #文章标签，多于一项时用这种格式 --- #这里是正文，用markdown写，使用方法参照我原来的博客[Introduction to markdown](http://zipperary.com/2013/05/22/introduction-to-markdown/)

1. hexo server，访问localhost:4000预览效果。（退出server用Ctrl+c）
2. hexo deploy，同步到github。访问网站看看效果。

现在为止，我们已经搭建起博客，进行一些基本配置，并学会了怎么发表文章。后面会陆续介绍一些高级点的个性化设置，不过在此之前，你可以正常发表博客了。后面的文章你可以不看，有意者请跟随。

---

hexo系列教程：（四）hexo博客的优化技巧

上一节中我们已经学会了用hexo发布博客，这里再介绍一些小技巧对博客站点进行优化，实现更加丰富的功能。

后面的修改优化主要是针对 theme/light 的，如果你想偷懒直接使用配置好的主题，欢迎使用我的Lightum。如果你想使用其他主题，可以去Wiki挑选一款喜欢的。

添加“多说”评论

hexo默认使用国外比较流行的disqus，不过，按照“因地制宜”的原则，我们修改为国内用的多又好用的“多说”评论系统。步骤非常简单：

1. 在多说进行注册，获得通用代码。
2. 将通用代码粘贴到themes\light\layout\_partial\comment.ejs里面，如下：

1 2 3 4 5

<% if ( page.comments){ %> <section id="comment"> 通用代码 </section> <% } %>

很多网友反映自己使用的非 light 主题中找不到相应的文件。我的这些修改都是在 light主题中，其他主题请参考《Hexo使用多说教程》。

添加『页面导航』

在刚才添加「多说」评论的文件中，加入一段代码，如下：

1 2 3 4 5 6 7 8 9 10 11 12 13

<% if ( page.comments){ %> <nav id="pagination" > <% if (page.prev) { %> <a href="<%- config.root %><%- page.prev.path %>" class="alignleft prev" ><%= __('prev') %></a> <% } %> <% if (page.next) { %> <a href="<%- config.root %><%- page.next.path %>" class="alignright next" ><%= __('next') %></a> <% } %> <div class="clearfix"></div> </nav> <section id="comment">

添加“百度分享”

到百度分享获得代码，在themes/light/layout/_partial/article.ejs中，将<%-partial('post/share')%>删掉，替换为百度分享的代码。

添加小图标

在themes/light/layout/_partial/head.ejs里将<link href="<%- config.root %>favicon.png" rel="icon">替换为<link href="<%- config.root %>favicon.ico" rel="icon" type="image/x-ico">。将favicon.ico图标文件放在source目录下。制作图标的网站，http://www.faviconer.com。

添加分类、标签云widget

很简单，在themes/light/_config.yml中，添加如下：

1 2 3

widgets: - category - tagcloud

添加友情链接widget

1. 在themes/light/layout/_widget中新建名为blogroll.ejs的文件，编辑内容如下：

1 2 3 4 5 6

<div class="widget tag"> <h3 class="title">友情链接</h3> <ul class="entry"> <li><a href="http://zipperary.com/" title="Zippera's Blog">Zippera</a></li> </ul> </div>

1. 在themes/light/_config.yml中，添加如下：

1 2	widgets: - blogroll

生成post时默认生成categories配置项

在scaffolds/post.md中，添加一行categories:。同理可应用在page.md和photo.md。

添加新浪微博widget(微博秀)

1. 去新浪微博开放平台设置和生成微博秀代码。
2. 在themes/light/layout/_widget中新建名为weibo.ejs的文件，将刚才的代码直接保存到这里。
3. 在themes/light/_config.yml中，添加如下：

1 2	widgets: - weibo

导航栏添加”关于”

1. hexo new page "about"
2. 到source/about/index.md编辑内容。
3. 在themes/light/_config.yml中，添加如下：

1 2	menu: 关于: /about

主页文章显示摘要

编辑md文件的时候，在要作为摘要的文字后面添加<!--more-->即可。

优化是无止境的，今天先写这些。

速度优化

由于 Google 被大陆屏蔽，Github 从大陆访问也比较慢，且不太稳定。所以一方面可以把 Blog 迁移到国内，比如我现在使用的Gitcafe提供的免费 Page 服务，又快又好用，赞一个，可以参考我写的《托管博客到gitcafe》 。另一方面，建议把 google 提供的 jquery 和 fonts api 全换掉。由于不同的主题其位置不同，最好是搜索一下。

Unix/Linux 用户在 shell 中切换到自己的主题目录下面；Windows 用户用 Git Bash 切换到主题目录下面。然后用grep 'jquery' -r ./搜索使用 jquery 的位置，如果是用的 google 的，则替换成国内的，我用的是百度，//libs.baidu.com/jquery/2.0.3/jquery.min.js，//libs.baidu.com/jquery/1.8.0/jquery.min.js，替换后如图（我的是 light 主题）：

然后替换google fonts，同样的方法，grep 'fonts' -r ./，找到后替换为//fonts.useso.com/css?family=Lato:400,400italic即可。

以上只是针对我的版本我的主题，读者根据自己的情况适当调整吧，比如 jquery 的版本号，你现在的是哪个版本就用 baidu 的哪个版本。把地址输入浏览器地址栏看能正确打开嘛，如果可以，说明是可用的。

全部替换完，更新自己的博客，然后查看源代码，看看是否全换成国内的了。