Hexo - 快速、简洁且高效的博客框架
英文官网 https://hexo.io/
中文官网 https://hexo.io/zh-cn/
Hexo的安装
利用基于 Node.js 的 Hexo 可以快速搭建一个博客网站。搭建前必须安装 Node.js 和 Git。Node.js 是一款开源且跨平台的服务器端和网络应用，使用 JavaScript 开发。Git 是一款免费、开源的分布式版本控制系统。安装过程中全点下一步即可。之后，请参照官方中文文档进行 Hexo 的安装。
Hexo的使用
初始化
选择一个目录作为Hexo站点的根目录，执行初始化命令：
hexo init .
命令中的.表示的是当前目录，也可以指定到其他的目录。
启动服务
在站点的根目录中执行启动服务的命令：
hexo server
浏览博客
服务启动后在浏览器中输入博客的地址 http://localhost:4000/ 即可进行浏览。
Hexo的发布
绑定域名
绑定域名后，不能立即生效，需要等域名解析的服务器刷新缓存，刷新的时间视服务器而定，一般在48小时内。
github绑定域名
[1] 域名解析中添加如下配置：
@ A 192.30.252.153
@ A 192.30.252.154
www CNAME username.github.io
[2] 项目根目录添加 CNAME 文件，文件名大写无后缀，文件内容为自己的域名。
[3] 设置好后，等待域名生效。
coding绑定域名
coding绑定域名的详细操作见官方文档，已经很详细了。
Hexo发布
[1] 安装发布的插件，执行以下命令:
npm install hexo-deployer-git --save
如果不安装插件直接使用命令发布，会提示错误：
ERROR Deployer not found: git
[2] 修改站点配置文件_config.yml，设置发布的信息。配置信息如下：
Hexo发布到github
配置内容如下：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/lyyybz/blog.git
branch: gh-page
Hexo发布到coding
配置内容如下：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://git.coding.net/lyyybz/blog.git
branch: master
Hexo同时发布到github和coding
配置内容如下：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
coding: https://git.coding.net/lyyybz/blog.git,master
github: https://github.com/lyyybz/blog.git,master
[3] 文件配置好后，使用命令进行发布，如下：
hexo clean
hexo g
hexo d
[4] 发布成功，此时在github或者coding中就可以看到刚刚发布的博客。
Hexo的进阶
修改主题为Next
[1] 使用命令下载Next主题到themes目录中
git clone https://github.com/iissnan/hexo-theme-next themes/next
[2] 修改站点配置文件_config.yml中的theme标签：
theme: next
[3] 修改成功后，重新启动Server就能够看到修改后的效果。
[4] Next主题一共有三种样式，可以通过修改Next主题的配置文件_config.yml来修改：
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
显示阅读全文按钮
在文章中添加more标签即可，形式如下：
<!--more-->
标签以上的内容将以摘要的形式在首页显示，并出现阅读全文的按钮。
添加本地搜索
[1] 安装 hexo-generator-search，在站点根目录下执行以下命令：
npm install hexo-generator-search --save
[2] 在主题的配置文件themes/next/_config.yml中添加：
search:
path: search.xml
field: post
[3] 但是这个本地搜索只能搜英文，不能搜索汉字。
文章中添加图片
[0] 在 hexo 中使用本地图片是件非常让人纠结的事情，在 markdown 里的图片地址似乎永远无法和最后生成的网页保持一致。这些问题使得我一度放弃使用本地图片而选择用图床，但被移动运营商无耻的横条广告逼得打算上https，但是图床只支持http就成了问题。
hexo 下插入图片现在大概有2中方案：
- 放在根目录，早期大部分的方案是把图片放在 source/img 下，然后在 markdown 里写 ! [img] (/source/img/img.png)显然这样在本地的编辑器里完全不能正确识别图片的位置。
- asset-image,在 hexo 2.x 时出现的插件，后来被吸纳进 hexo 3 core，用法的介绍见资源文件夹 | Hexo 。比较尴尬的是，这种方法直接放弃了 markdown 原来的语法，使用类似的语法。markdown 本来有插入图片的语法不好好支持，专门用一个新的语法来插入本地图片，让我这种强迫症不太能接受。
本文推荐使用的是 CodeFalling/hexo-asset-image，使用方法如下：
[1] 修改站点配置文件_config.yml中post_asset_folder标签，该标签的值默认为false。
post_asset_folder: true
[2] 站点目录中执行命令。
npm install https://github.com/CodeFalling/hexo-asset-image --save
[3] 创建与文章文件同名的文件夹，将图片放到该文件夹中。
Hexo
├── 1.jpg
└── 2.jpg
Hexo.md
[4] 在Hexo.md中使用Hexo文件夹中的图片。
[5] 可以根据自己的需求修改图片的大小，修改主题目录下source\css_common\scaffolding\文件夹中的base.styl文件的第63行。
img {
display: block;
margin: left;
max-width: 50%;
height: auto;
}
[6] 图片添加成功，至于添加效果嘛，本文中随处可见，不是吗 _!
文章中添加音乐
[0] 添加音乐需要找一个在线音乐的网站，本站使用的是网易云音乐。
[1] 在网易云音乐，搜索想要的歌曲，点击歌曲名字进入播放器页面，点击生成外链播放器；复制代码，直接粘贴到博文中即可。
[2] 文章中插入的代码如下：
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=347230&auto=1&height=66"></iframe>
其中auto=0表示不自动播放，若需要进入页面后自动播放则设置为1即可。
[3] 添加成功，添加效果如下，有的时候添加上后显示正常，但是歌就是播放不了，可能是网易服务器的原因，只能等他自己好了。。
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=347230&auto=0&height=66"></iframe>
文章中添加视频
[1] 寻找视频，获取视频的代码。
[2] 插入视频的代码：
<iframe
height=249 width=255
src="http://player.youku.com/embed/XNjcyMDU4Njg0"
frameborder=0 allowfullscreen>
</iframe>
[3] 效果如下（广告也跟着过来了- -!）：
<iframe
height=498 width=510
src="http://player.youku.com/embed/XNjcyMDU4Njg0"
frameborder=0 allowfullscreen>
</iframe>
还有个问题是，发布到coding中，有时候视频不能显示，显示一片空白，可能是coding服务器的问题。
Hexo的定制
修改底部的logo栏
文件位置：\themes\next\layout_partials\footer.swig文件，可以根据自己的需求增删东西。
Hexo常用命令
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help #查看帮助
hexo version #查看Hexo的版本
Hexo常见问题
提示 fatal: Not a git repository (or any of the parent directories): .git
提示说没有.git这样一个目录，解决办法执行以下命令：
git init
部署后主题显示异常
本地Server主题正常，Deploy部署到github或者coding后，主题样式显示异常，图片都无法显示。如下图所示：
导致这种现象的原因是发布的时候项目的根目录设置错误。修改站点配置文件_config.yml中的root标签，值设置为github或coding中的项目名，如下：
root: /blog
错误 ERROR Plugin load failed: hexo-server
错误原因：Besides, utilities are separated into a standalone module. hexo.util is not reachable anymore . 解决方法，执行命令：
sudo npm install hexo-server
执行 hexo server，提示：Usage: hexo<Command> ....
错误原因可能是没有生成本地服务。解决方法，执行命令：
npm install hexo-server --save
执行命令后提示：hexo-server@0.1.2 node_modules/hexo-server .... 表示成功了。参考官方文档
站点配置文件详解
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 网站
title: 为学 #网站标题
subtitle: 天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。 #网站副标题
description: 天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。 #网站描述
author: lyyybz #您的名字
language: zh-CN #网站使用的语言
timezone: #网站时区。Hexo 默认使用您电脑的时区
# URL 网址
## 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
url: http://willxue.top
permalink: :year/:month/:day/:title/ #生成文件名字的格式我改成blog/:title:year:month:day/
permalink_defaults:
# Directory 目录配置
source_dir: source #源文件夹，这个文件夹用来存放内容。
public_dir: public #公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #nclude code 文件夹
i18n_dir: :lang #国际化（i18n）文件夹
skip_render: #跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。
# Writing 文章
new_post_name: :title.md # 新建文章默认文件名
default_layout: post # 默认布局
titlecase: false # Transform title into titlecase
external_link: true # 在新标签中打开一个外部链接，默认为true
filename_case: 0 #转换文件名，1代表小写；2代表大写；默认为0，意思就是创建文章的时候，是否自动帮你转换文件名，默认就行，意义不大。
render_drafts: false #是否渲染_drafts目录下的文章，默认为false
post_asset_folder: false #启动 Asset 文件夹
relative_link: false #把链接改为与根目录的相对位址，默认false
future: true #显示未来的文章，默认false
highlight: #代码块的设置
enable: true
line_number: true
auto_detect: false
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 #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page #分页目录
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
feed:
type: atom #feed 类型 (atom/rss2)
path: atom.xml #rss 路径
limit: 20 #在 rss 中最多生成的文章数(0显示所有)
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/imwillxue/imwillxue.github.com.git
branch: master
Next配置文件详解
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# Place your favicon.ico to /source directory.
favicon: /favicon.ico #站标 可以放在hexo文件夹下的/source里
# Set default keywords (Use a comma to separate)
keywords: "为学,willxue,willxue.top" #网站关键字
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: #rss这里不设置 引文站点配置文件已经配置了 需要安装插件
# Specify the date when the site was setup
since: 1990 #网站时间 从xx开始 类似 1990-2016
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu: #菜单路径设置 如果hexo在二级目录放置要去掉/
home: /
archives: /archives #归档
tags: /tags #标签
categories: /categories #分类
about: /about #关于我
commonweal: /404.html #公益404
# Enable/Disable menu icons.
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of menu item and value is the name of FontAwsome icon.
# When an question mask icon presenting up means that the item has no mapping icon.
menu_icons: #icon图标
enable: true
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes #next的三个scheme
#scheme: Muse
#scheme: Mist
scheme: Pisces
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social links #社交链接
social:
GitHub:
Weibo:
Others:
# Social Icons #社交的图标
social_icons:
enable: true
# Icon Mappings
GitHub: github
Twitter: twitter
Weibo: weibo
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
# default : /images/default_avatar.jpg
avatar: http://7xrz9n.com1.z0.glb.clouddn.com/logo.png #头像
# TOC in the Sidebar #文章自动显示目录
toc:
enable: true
# Automatically add list number to toc. #目录是否自动显示数字序号
number: false
# Creative Commons 4.0 International License.
# http://creativecommons.org/ #自由协议
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:
sidebar:
# Sidebar Position, available value: left | right
position: left
#position: right
# Sidebar Display, available value:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggle icon.
display: post
#display: always
#display: hide
#display: remove
# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------
# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
# enabled: [true/false] - Replace with specific image
# image: url-of-image - Images's url
custom_logo:
enabled: false
image:
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
# Automatically Excerpt
auto_excerpt:
enable: false
length: 150
# Use Lato font
use_font_lato: true
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# MathJax Support
mathjax:
# Swiftype Search API Key
#swiftype_key:
# Baidu Analytics ID
#baidu_analytics:
# Duoshuo ShortName
duoshuo_shortname: imwillxue
# Disqus
#disqus_shortname:
# Baidu Share
# Available value:
# button | slide
#baidushare:
## type: button
# Share
#jiathis:
#add_this_id:
# Share
duoshuo_share: true
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:
# Google Analytics
#google_analytics:
# CNZZ count
#cnzz_siteid:
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: true
user_id: 6262178932196377345
admin_nickname: 神
# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
enable: false
app_id: #<app_id>
fb_admin: #<user_id>
like_button: #true
webmaster: #true
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: QImiFijLSOHYufsazlBVlwLg-gzGzoHsz
app_key: AMcYaNHy9Y5OdH42k0d4uSED
# Tencent analytics ID
# tencent_analytics:
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
## 文章末尾是否显示打赏按钮
donate:
enable: true
text: Enjoy it ? Donate me ! 欣赏此文？求鼓励，求支持！
alipay:
wechat:
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------
# Motion
use_motion: true
# Fancybox
fancybox: true
# Static files
vendors: vendors
css: css
js: js
images: images
# Theme version
version: 0.5.0
扫一扫
3212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
