Web

Hexo

Hexo

什么是hexo

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

hexo有大量的插件和主题。

plugins

themes

安装hexo

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

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

$sudo npm install hexo-cli -g

Next

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

原生的Next

作者的Next

快速使用

初始化

初始化一个hexo的目录：

$hexo init <folder>

安装依赖

进入hexo目录安装依赖：

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

默认安装下列依赖：

hexo
hexo-server
hexo-generator-index
hexo-generator-archive
hexo-generator-category
hexo-generator-tag
hexo-renderer-ejs
hexo-renderer-marked
hexo-renderer-stylus

查看文件和目录

安装完成后有下列

文件：

_config.yml
db.json
package.json

目录：

node_modules
scaffolds
source
themes

生成静态文件

$hexo g
$hexo generate

启动本地服务器

$hexo s
$hexo server

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

写博文

$hexo new post <article-name>

编辑这篇文章。

清理生成文件和缓存

$hexo clean

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

安装部署插件

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

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

部署到github

$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

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

   url: http://<your-github-name>.github.io/

   root: /

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

   permalink_defaults:

# Directory

   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

   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

   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/

   date_format: YYYY-MM-DD

   time_format: HH:mm:ss

# Pagination

## Set per_page to 0 to disable pagination

   per_page: 10

   pagination_dir: page

# Extensions

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

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

   theme: hexo-theme-canux

   Plugins:

   - hexo-deployer-git

# Extend plugins

## deploy

   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

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

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

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

部署

部署到github和coding(gitcafe)：

$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

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

配置hexo插件

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

# Extensions

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

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

   theme: next

   Plugins:

   - hexo-deployer-git

# Extend plugins

## deploy

   deploy:

   type: git

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

   branch: master

   message:

站点地图

$npm install hexo-generator-sitemap --save

## sitemap

   sitemap:

       path: sitemap.xml

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

RSS

$npm install hexo-generator-feed --save

## feed

   feed:

     type: atom

     path: atom.xml

     limit: 20

     hub:

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

SEO优化

$npm install hexo-generator-seo-friendly-sitemap --save

   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里面。

favicon: /favicon.ico

# SEO优化的关键字。

keywords: "Canux, CHENG, blog"

# 指定站点的起始日期。

since: 2013

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

# 菜单设置

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

# 顶部菜单栏

menu:

  home: /

  about: /about

  categories: /categories

  tags: /tags

  archives: /archives

  #commonweal: /404.html

# 菜单栏图标,使用fontawsome

menu_icons:

  enable: true

  home: home

  about: user

  categories: th

  tags: tags

  archives: archive

  #commonweal: heartbeat

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

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

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

scheme: Muse

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

# 捐赠设置

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

reward_comment: 您的支持是我创作的动力!

wechatpay: /images/myimages/wechatpay.jpg

alipay: /images/myimages/alipay.jpg

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

# 侧边栏设置

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

# 社交信息

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。

social_icons:

  enable: true

  GitHub: github

  LinkedIn: linkedin

  Stackoverflow: stack-overflow

  E-mail: envelope

# 友情链接

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

# 侧边栏图像

avatar: /images/myimages/avatar.jpg

# TOC(table of contents)设置

toc:

  enable: true

  number: true

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

creative_commons: zero

# 侧边栏位置: left | right

sidebar:

  position: left

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

display: post

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

# 其它设置

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

# 使用Custom Logo.

custom_logo:

  enabled: false

  image:

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

highlight_theme: night eighties

# 自动滚动页面

scroll_to_more: true

# 自动摘录

auto_excerpt:

  enable: true

  length: 150

# 使用Lato font

use_font_lato: true

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

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

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

# MathJax Support

mathjax: true

# Google Analytics - US

#google_analytics:

# Facebook sdk Analytics - US

facebook_sdk:

  enable: false

  app_id: #<app_id>

  fb_admin: #<user_id>

  like_button: #true

  webmaster: #true

# CNZZ Analytics - CN

cnzz_siteid: ******

# leancloud Analytics - CN

leancloud_visitors:

  enable: false

  app_id: #<app_id>

  app_key: #<app_key>

# Baidu Analytics

#baidu_analytics: ******

# Tencent Analytics

#tencent_analytics: ******

# Disqus - US

#disqus_shortname: ******

# Duoshuo - CN

duoshuo_shortname: ******

# Make duoshuo show UA

duoshuo_info:

  ua_enable: true

  admin_enable: false

  user_id:

  #admin_nickname: ROOT

# Make duoshuo show hot artical

duoshuo_hotartical: true

# AddThis - US

#add_this_id:

# JiaThis - CN

jiathis: true

# Baidu Share

#baidushare: true

# Duoshuo Share

#duoshuo_share: true

# Swiftype - US

swiftype_key: ******

# Tinysou - CN

#tinysou_Key

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

#! 谨慎编辑的主题信息

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

# 侧边栏移动插件 Motion

use_motion: true

# 图片弹出插件 Fancybox

fancybox: true

# Static files

vendors: vendors

css: css

js: js

images: images

# Theme version

version: 0.5.0
© 2013 - 2024 Morgoth
Designed by Canux