Hexo

什么是hexo

Hexo是用nodejs开发的快速、简洁且高效的博客框架, Hexo 使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

hexo有大量的插件和主题。

plugins

themes

安装hexo

需要安装依赖nodejs(包括npm)和git。

安装hexo命令行插件hexo-cli:

1
$sudo npm install hexo-cli -g

Next

Next是一种文雅的Hexo主题。 一个主题,三种外观,选您所好。 通过主题中的主题(亦称Scheme),您可以方便地改变您博客的外观,同时几乎所有配置同样适用。

原生的Next

作者的Next


快速使用

初始化

初始化一个hexo的目录:

1
$hexo init <folder>

安装依赖

进入hexo目录安装依赖:

1
2
$cd <folder>
$sudo npm install <package-name>

默认安装下列依赖:

1
2
3
4
5
6
7
8
9
hexo
hexo-server
hexo-generator-index
hexo-generator-archive
hexo-generator-category
hexo-generator-tag
hexo-renderer-ejs
hexo-renderer-marked
hexo-renderer-stylus

查看文件和目录

安装完成后有下列

文件:

1
2
3
_config.yml
db.json
package.json

目录:

1
2
3
4
node_modules
scaffolds
source
themes

生成静态文件

1
2
$hexo g
$hexo generate

启动本地服务器

1
2
$hexo s
$hexo server

用浏览器打开链接即可本地查看默认博客。

写博文

1
$hexo new post <article-name>

编辑这篇文章。

清理生成文件和缓存

1
$hexo clean

再次运行hexo g和hexo s查看。

安装部署插件

1
$sudo npm install hexo-deployer-git --save

修改全局配置文件,参考插件的github 针对github需要新建一个名字为<your-github-name>.github.io的仓库。

部署到github

1
2
$hexo d
$hexo deploy

在浏览器打开http://<your-github-name>.github.io/查看博客。


配置

全局配置

全局配置文件是<folder>/_config.yml

# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
   title:

   subtitle:

   description:

   author:

   language: zh-Hans

   timezone: Asia/Shanghai

# URL

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

1
2
3
4
5
6
7
   url: http://<your-github-name>.github.io/

   root: /

   permalink: :year/:month/:day/:title/

   permalink_defaults:

# Directory

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
   source_dir: source

   public_dir: public

   tag_dir: tags

   archive_dir: archives

   category_dir: categories

   code_dir: downloads/code

   i18n_dir: :lang

   skip_render:

# Writing

 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
   new_post_name: :title.md # File name of new posts

   default_layout: post # post | page | draft

   titlecase: false # Transform title into titlecase

   external_link: true # Open external links in new tab

   filename_case: 0

   render_drafts: false

   post_asset_folder: false

   relative_link: false

   future: true

   highlight:

   enable: true

   line_number: true

   auto_detect: true

   tab_replace: ''

# Category & Tag

1
2
3
4
5
   default_category: uncategorized

   category_map:

   tag_map:

# 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/

1
2
3
   date_format: YYYY-MM-DD

   time_format: HH:mm:ss

# Pagination

## Set per_page to 0 to disable pagination

1
2
3
   per_page: 10

   pagination_dir: page

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

1
2
3
4
5
   theme: hexo-theme-canux

   Plugins:

   - hexo-deployer-git

# Extend plugins

## deploy

1
2
3
4
5
6
7
8
9
   deploy:

     type: git

     repo:

        github: https://github.com/crazy-canux/crazy-canux.github.io.git,master

        coding: https://git.coding.net/Canux/Canux.git,master

主题配置

hexo官方默认主题是<folder>/themes/landscape。

主题配置文件是<folder>/themes/landscape/_config.yml

现在将默认主题替换成自己喜欢的主题:

1
2
cd <folder>/themes
git clone <github-url-of-your-favourite-theme>

然后将全局配置的 theme: landscape 改为 theme: <your-favourite-theme-name>


部署

部署到github和coding(gitcafe):

1
2
3
$hexo clean
$hexo g
$hexo d

github访问http://.github.io即可。

coding访问http://.coding.me/

绑定自己的域名: 1. 在域名供应商购买域名后添加解析,记录类型A或者CNAME,主机类型@或者www,记录值可以是http://.github.io或者通过ping获取的ip地址。 2. 在/source/新建文件CNAME,添加你购买的域名.com。 3. 正常部署到github。 4. 访问http://.com即可。


安装hexo插件

plugins

1
$sudo npm install <plugin-name> --save

配置hexo插件

全局配置文件是<folder>/_config.yml

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

1
2
3
4
5
   theme: next

   Plugins:

   - hexo-deployer-git

# Extend plugins

## deploy

1
2
3
4
5
6
7
8
9
   deploy:

   type: git

   repo: git@github.com:<your-github-name>/<your-github-name>.github.io.git

   branch: master

   message:

站点地图

1
$npm install hexo-generator-sitemap --save

## sitemap

1
2
3
   sitemap:

       path: sitemap.xml

https://github.com/hexojs/hexo-generator-sitemap

RSS

1
$npm install hexo-generator-feed --save

## feed

1
2
3
4
5
6
7
8
9
   feed:

     type: atom

     path: atom.xml

     limit: 20

     hub:

https://github.com/hexojs/hexo-generator-feed

SEO优化

1
$npm install hexo-generator-seo-friendly-sitemap --save
1
2
3
   sitemap:

       path: sitemap.xml

https://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap


Next

以hexo主题next为例

中文文档:

http://theme-next.iissnan.com/

英文文档:

https://github.com/iissnan/hexo-theme-next/blob/master/README.en.md

主题配置文件

主题配置文件在:

<folder>/themes/next/_config.yml

主题配置

# —————————————————————

# 站点信息设置

# —————————————————————

# 将制作好的favicon图标放到/source里面。

1
favicon: /favicon.ico

# SEO优化的关键字。

1
keywords: "Canux, CHENG, blog"

# 指定站点的起始日期。

1
since: 2013

# —————————————————————

# 菜单设置

# —————————————————————

# 顶部菜单栏

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

  home: /

  about: /about

  categories: /categories

  tags: /tags

  archives: /archives

  #commonweal: /404.html

# 菜单栏图标,使用fontawsome

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
menu_icons:

  enable: true

  home: home

  about: user

  categories: th

  tags: tags

  archives: archive

  #commonweal: heartbeat

# —————————————————————

# 主题方案设计: Must | Mist | Pisces

# —————————————————————

1
scheme: Muse

# —————————————————————

# 捐赠设置

# —————————————————————

1
2
3
4
5
reward_comment: 您的支持是我创作的动力!

wechatpay: /images/myimages/wechatpay.jpg

alipay: /images/myimages/alipay.jpg

# —————————————————————

# 侧边栏设置

# —————————————————————

# 社交信息

1
2
3
4
5
6
7
8
9
social:

  GitHub: https://github.com/crazy-canux

  Stackoverflow: http://stackoverflow.com/

  LinkedIn: http://www.linkedin.com/profile/preview?locale=zh_CN&trk=prof-0-sb-preview-primary-button

  E-mail: mailto:canuxcheng@gmail.com

# 社交信息图标,使用fontawsome。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
social_icons:

  enable: true

  GitHub: github

  LinkedIn: linkedin

  Stackoverflow: stack-overflow

  E-mail: envelope

# 友情链接

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
links_title: Links

links:

  CSDN: http://bbs.csdn.net/home

  51CTO: http://bbs.51cto.com/

  ChinaUnix: http://bbs.chinaunix.net/

  ITPUB: http://www.itpub.net/forum.php

# 侧边栏图像

1
avatar: /images/myimages/avatar.jpg

# TOC(table of contents)设置

1
2
3
4
5
toc:

  enable: true

  number: true

# 设置 4.0 International 许可证: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero

1
creative_commons: zero

# 侧边栏位置: left | right

1
2
3
sidebar:

  position: left

# 侧边栏显示方式: post | always | hide | remove

1
display: post

# —————————————————————

# 其它设置

# —————————————————————

# 使用Custom Logo.

1
2
3
4
5
custom_logo:

  enabled: false

  image:

# 代码高亮主题: normal | night | night eighties | night blue | night bright

1
highlight_theme: night eighties

# 自动滚动页面

1
scroll_to_more: true

# 自动摘录

1
2
3
4
5
auto_excerpt:

  enable: true

  length: 150

# 使用Lato font

1
use_font_lato: true

# —————————————————————

# 第三方插件: 一般都需要去插件的官网注册使用。

# —————————————————————

# MathJax Support

1
mathjax: true

# Google Analytics - US

1
#google_analytics:

# Facebook sdk Analytics - US

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
facebook_sdk:

  enable: false

  app_id: #<app_id>

  fb_admin: #<user_id>

  like_button: #true

  webmaster: #true

# CNZZ Analytics - CN

1
cnzz_siteid: ******

# leancloud Analytics - CN

1
2
3
4
5
6
7
leancloud_visitors:

  enable: false

  app_id: #<app_id>

  app_key: #<app_key>

# Baidu Analytics

1
#baidu_analytics: ******

# Tencent Analytics

1
#tencent_analytics: ******

# Disqus - US

1
#disqus_shortname: ******

# Duoshuo - CN

1
duoshuo_shortname: ******

# Make duoshuo show UA

1
2
3
4
5
6
7
8
9
duoshuo_info:

  ua_enable: true

  admin_enable: false

  user_id:

  #admin_nickname: ROOT

# Make duoshuo show hot artical

1
duoshuo_hotartical: true

# AddThis - US

1
#add_this_id:

# JiaThis - CN

1
jiathis: true

# Baidu Share

1
#baidushare: true

# Duoshuo Share

1
#duoshuo_share: true

# Swiftype - US

1
swiftype_key: ******

# Tinysou - CN

1
#tinysou_Key

#! —————————————————————

#! 谨慎编辑的主题信息

#! —————————————————————

# 侧边栏移动插件 Motion

1
use_motion: true

# 图片弹出插件 Fancybox

1
fancybox: true

# Static files

1
2
3
4
5
6
7
vendors: vendors

css: css

js: js

images: images

# Theme version

1
version: 0.5.0