title: hexo 安装与配置
categories: 工具
tags: [Hexo,GitHub,多说评论]
总想弄个自己的博客，写一些东西（或感悟、或经验、或代码、或计划）。选择困难症的我纠结到底是用CSDN还是新浪抑或网易......还有很多，都挑花眼了，各有各的有点，也各有各的不足。那么到头来我为什么选择了Hexo + GitHub 来创建自己的博客呢？因为它没广告啊！！！当然还可以根据自己的喜好选择喜欢的主题，同时看着自己的作品是不是有一种满足感呢？最后，作为一个程序猿用别的博客怎么能体现程序猿的与众不同呢？
Hexo 简单介绍
hexo 是一个基于Node.js的静态博客框架，可以方便的生成静态网页并且托管在github 上。hexo是一个开源的博客框架，我们可以任意使用修改，但是很多功能要自己去实现，没有计算机基础的人使用起来可能比较困难。
前面提到hexo是基于Node.js的博客框架，所以安装Hexo之前需要先Node.js 和设置 github(托管代码)
GitHub 设置
首先你要注册一个github帐号
创建一个库（new repository）命名为YourSiteName.github.io/
根据自己的喜好简单设置一下github生成的静态网页
安装Node.js
下载Node.js 并安装
$ npm install -g hexo-cli
安装完成后，建一个文件夹（如hexo），执行以下指令(在hexo路径下)，Hexo 即会自动在目标文件夹建立网站所需要的所有文件
$ hexo init
然后在浏览器中输入localhost:4000 就可以看到你的博客了。
如果安装过程中出现错误可以尝试在命令行前加上 sudo
详情请参考
Hexo 基本使用
既然博客已经安装好了，那么怎么写博客呢？博客是基于MarkDown语法的，不了解MarkDown的请点击这里。
编辑器MAC环境下免费的有Mou 和MacDown 比较给力，其他的不熟悉。
$ hexo new "Hexo使用"
或者直接进入hexosource_posts路径下添加 xxx.md 类型的文件，然后打开文件编辑
title: Hexo使用
categories: hexo
tags: [hexo，blog]
//标签，多个用逗号隔开
#这里是正文，用markdown编写
$ 访问localhost:4000预览效果。（退出server用Ctrl+c）
编辑hexo_config.yml，把下面的 abc 换成你的用户名。
# Deployment
## Docs: https://hexo.io/docs/deployment.html
repository: /abc/abc.github.io
保存文件并运行
然后在浏览器输入abc.github.io 就能看到 Git 的博客发生了变化。
Hexo 的基本使用已经结束了，下面是怎样装饰你的博客了，如果你对默认的样式很满意，后面的可以跳过了。
我这里使用的主题是next
Hexo 有两个配置文件，在hexo路径下的 _config.yml 文件是 站点配置文件 ，在 hexothemeshexo-theme-next 路径下的 _config.yml 文件是主题配置文件。
站点配置文件
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: /hexojs/hexo/
这里的配置可以参考我的博客
title: Try、Try Again！The worst result is failure!
// 博客title
description: 以出以入，以就鲜絜，似善化。其万折也必东，似志。是故君子见大水必观焉。 --
荀子·宥坐
author: 东折
language: zh-Hans
// 使用语言
这里没有设置
## If your site is put in a subdirectory, set url as ’/child’ and root as ’/child/’
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:
这里没有设置
new_post_name: :title.md # File name of new posts
default_layout: post
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
max_open_file: 100
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
#archive: 1
#category: 1
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## /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-next
// 在这里设置想要的主题（主题对应的文件夹的名称）
duoshuo_shortname: yulncbd
// 这里添加多说评论
# Deployment
// 这里设置Git 的相关信息
## Docs: https://hexo.io/docs/deployment.html
repository: /YulncBd/YulncBd.github.io
// 这里将YulncBd替换成自己用户名
站点配置文件 主要配置了博客简介，git，多说评论等一些信息。自己可以尝试一下其他的设置，看看什么效果。设置完成后执行一下命令查看结果
到用浏览器打开 `localhost:4000` 查看效果，再到 `你的用户名.github.io` 查看Git 上你博客的变化。
主题配置文价
可以打开 zh-Hans.yml 文件查看对应的汉字设置
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico
# Set default keywords (Use a comma to separate)
keywords: "Hexo, NexT"
# 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: false
# Specify the date when the site was setup
since: 2016
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
// 这里设置导航栏（添加了分类 和 标签，具体设置后面在介绍）
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -& archives)
archives: archives
categories: categories
tags: tags
#about: about
#tags: /tags
#commonweal: /404.html
// 这里设置导航栏对应的图片
# 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. Key is case-senstive.
When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
search: search
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
// 这里设置主题的样式（可以都选择看一下效果）
#scheme: Muse
#scheme: Mist
scheme: Pisces
# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (/fonts)
# - All fonts set here will have the following styles:
light, light italic, normal, normal intalic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
enable: true
# Uri of fonts host. E.g. // (Default)
# Global font settings used on &body& element.
# external: true will load this font family from host.
external: true
family: Lato
# Font settings for Headlines (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
external: true
# Font settings for posts
# Fallback to `global` font settings.
external: true
# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
external: true
# Font settings for &code& and code blocks.
external: true
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
// 这里设置一些网站链接
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: /iissnan)
// 这里设置链接的图片
# Social Links Icons
# Icon Mapping:
Map a menu item to a specific FontAwesome icon name.
Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.
When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
enable: true
# Icon Mappings.
# KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
Twitter: twitter
Weibo: weibo
// 这里设置头像
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
directory(source/uploads): /uploads/avatar.jpg
avatar: /uploads/avatar.png
# Table Of Contents in the Sidebar
enable: true
# Automatically add list number to toc.
number: true
# 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 Position, available value: left | right
position: left
#position: right
# Sidebar Display, available value:
expand on posts automatically. Default.
expand for all pages automatically
expand only when click on the sidebar toggle icon.
Totally remove sidebar including sidebar toggler.
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
// 这里设置代码段的背景色
# Code Highlight theme
# Available value:
normal | night | night eighties | night blue | night bright
# /chriskempson/tomorrow-theme
highlight_theme: night bright
# Automatically scroll page to section which is under &!-- more --& mark.
scroll_to_more: true
// 这里设置博客显示信息
# Automatically Excerpt. Not recommand.
# Please use &!-- more --& in the post to control excerpt accurately.
auto_excerpt:
enable: true
// 博客能否收起
length: 200
// 博客收起后显示高度
excerpt_link: read_more #替换为中文
// 阅读全文
# Wechat Subscriber
wechat_subscriber:
enabled: false
qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
description: hello ex. subscribe to my blog by scanning my public wechat account
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# MathJax Support
enable: true
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# Swiftype Search API Key
#swiftype_key:
# Baidu Analytics ID
#baidu_analytics:
# Duoshuo ShortName
#duoshuo_shortname:
#disqus_shortname:
# Baidu Share
# Available value:
button | slide
#baidushare:
type: button
#add_this_id:
#duoshuo_share: true
# Google Webmaster tools verification setting
# See: /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
get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: false
user_id: 0
#admin_nickname: Author
Author: hello
// 设置Facebook信息
# Facebook SDK Support.
# /iissnan/hexo-theme-next/pull/410
facebook_sdk:
enable: false
#&user_id&
like_button:
webmaster:
# Show number of visitors to each article.
# You can visit
get AppID and AppKey.
leancloud_visitors:
enable: false
app_id: #&app_id&
app_key: #&app_key&
# Show PV/UV of the website/page with busuanzi.
# Get more information on //busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: false
# custom uv span for the whole site
site_uv: true
site_uv_header: &i class="fa fa-user"&&/i&
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: &i class="fa fa-eye"&&/i&
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: &i class="fa fa-file-o"&&/i&
page_pv_footer:
# 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: false
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------
use_motion: true
# Fancybox
fancybox: true
# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
jquery: /ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Internal path prefix. Please do not edit it.
_internal: vendors
# Internal version: 2.1.3
# Internal version: 2.1.5
# Internal version: 1.0.6
fastclick:
# Internal version: 1.9.7
# Internal version: 1.2.1
# Internal version: 1.2.1
velocity_ui:
# Internal version: 0.7.9
ua_parser:
images: images
# Theme version
version: 5.0.1
// 这里设置的是打赏的信息
# Donate 文章末尾显示打赏按钮
reward_comment: 如果觉得写的不错，那就打赏一下吧！ // 文字提示
wechatpay: /uploads/weixin.png
//微信图片(本地图片或网络图片)
#alipay: 此处为支付宝向我付款二维码图片的相对或者是绝对URL
分类和标签
// 进入博客路径
hexo new page categories
// 创建分类页面
然后进入到hexosource categories路径下打开index.md文件，编辑保存。
title: categories
type: "categories"
在主题配置文件里设置
archives: archives
categories: categories
// 如果有问题在前面加一个反斜杠
tags: tags
#about: about
#commonweal: /404.html
// 进入博客路径
hexo new page tags
// 创建分类页面
然后进入到hexosource tags路径下打开index.md文件，编辑保存。
title: tags
type: "tags"
在主题配置文件里设置
archives: archives
categories: categories
tags: tags
// 如果有问题在前面加一个反斜杠
#about: about
#commonweal: /404.html
最后发表一篇文章（设置好分类和标签），执行一下命令查看结果
要在 source 路径下创建文件夹 uploads ，然后将要设置的图片拷到这里，设置如下
avatar: /uploads/avatar.png
// 在主题配置文件里设置（也可以用网络链接）
在主题配置文件底部添加以下代码：
// 这里设置的是打赏的信息
# Donate 文章末尾显示打赏按钮
reward_comment: 如果觉得写的不错，那就打赏一下吧！ // 文字提示
wechatpay: /uploads/weixin.png
//微信图片(本地图片或网络图片)
#alipay: 此处为支付宝向我付款二维码图片的相对或者是绝对URL
图片的设置同头像设置一致。
额，以为很麻烦，所以一开始没有设置，后来有时间想设置一下，发现 so easy！
先到多说 去申请一个站点，步骤如下：
1.登录后在首页选择 我要安装。
2.创建站点，填写表格，多说域名这一栏填写的即是你的 duoshuo_shortname，如图：
3.创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段，值设置成上一步中的值。
不用别的操作，只有3步就搞定。
以上的设置只是一些基本的设置，先把博客用起来，后面在慢慢的去了解，去深入。关于404公益页面，域名，统计，搜索等功能暂未实现，感觉博客没必要弄那么多不必要的功能，如果你感兴趣可以去研究一下。
小主，按键盘右方向键 → 翻页可以跳过片头呢
本文标题：
原文链接：
和本文相似的内容：
编辑推荐 &
李巧林有一段相差19岁、让人惊诧也让人感动的“姐弟恋”。日，已经49岁的她，在内蒙古包头老家产下两男一女三胞胎，创造了“试管婴儿”一次成功诞生三胞胎的奇迹!玩转hexo博客之next - 推酷
玩转hexo博客之next
今天把jacman博客样式换成了next，主要是突然感觉jacman太过鲜艳了，像一个孩子，不够朴素，看久了感觉肤浅，之前用是因为一眼看上去有点android materials design的感觉，jacman博客用手机看或许有更好的体验。相反next，初看简约无华多看两眼又觉得厚重，像一个老者，符合技术博客的风格，虽说我的博客顶多只会一半用来技术笔记，更多想用来发展文学爱好，但还是先用来装装比吧！
博客，是站在巨人肩膀上搭建的，感谢开源，让我尽情享受拿来主义，但毕竟不是做前端的，有一些坑掉进去爬出来还是费了一些力气的，所以做个记录，利人利己。
总的来说，有了使用jacman的爬坑经验，这次更换next还是非常顺利的，几乎没有什么阻碍，一会就更换完毕了，虽然没啥技术含量，但是毕竟是自己一点一滴填充进去的，看到页面出来的时候，是很欣欣然滴，博客就像是自己的孩子，需要好好呵护，对，
我不为输赢，我就是认真
废话不多说了，开始吐辅
以next为例记录一下润色静态博客的方法，可能方法不止适用于next
next使用文档比jacman详尽清楚地多，基本看着手册一步一步来就能很顺利的搭建起来
这里只选择性记录下
添加云标签
添加分类也类似,其他基本跟jacman大同小异，有一些点统计之类的配置由主题配置移到了主目录配置。
hexo new page “tags”
编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下：
title: Tagclouddate:
12:39:04type: &tags&comments: false # 关闭这个页面的多说或者 Disqus 评论---
在菜单中添加链接。编辑 主题配置文件 ，添加 tags 到 menu 中，如下:
archives: /archives
tags: /tags
添加音乐播放器
以前觉得网页嵌入播放器很牛逼的感觉，原来就是一句代码的事儿！感谢外连接，感谢开源，让这个世界变得更美好。
markdown语法是完全兼容html代码的，直接把html代码扔进去就oook咯。
添加豆瓣音乐
复制下面代码到你的博文任意位置，然后Hexo s预览。
加入豆瓣音乐 歌曲是随机播放，游客可切歌，不能定制播哪首歌，而且不能按钮停止，只能音量调到0，无语，有利有弊的吧。
尽量放在最下面，如果你放在最上面，很有可能别人还未点击进入博文，你的博客就有了背景音乐了，要想赶紧播放音乐的另说。
&center& &iframe name=&iframe_canvas& src=&http://douban.fm/partner/baidu/doubanradio& scrolling=&no& frameborder=&0& width=&400& height=&200&&&/iframe& &/center&
添加网易云音乐
打开网页版网易云音乐。
如果只是加入单曲，只需要搜索歌曲，点开歌曲名，点击生成外链播放器，复制html代码（可以选择是否自动播放），将html代码无需任何修改放入markdown文章里就OK了。
如果想要加入歌单，就需要自己创建歌单，然后分享歌单，找到自己的分享动态，点进去可以看到有“生成外链播放器”这些字眼，其余操作就和上面一样了。不过，你的歌单有变化的话，这个外链的歌曲同样跟着变，这一点挺棒的。
例如，播放待你长发及腰这首歌，自动播放只需要嵌入一下代码
&iframe frameborder=&no& border=&0& marginwidth=&0& marginheight=&0& width=330 height=86 src=&/outchain/player?type=2&id=&auto=1&height=66&&&/iframe&
嵌入不自动播放只需要把以上代码中的auto改为=0即可，样子是这样的
类似方法还可以嵌入虾米播播
添加high一下
再次感谢开源
效果很赞，整个页面渐进式摇摆，摇摆，还有音乐
在 Hexo\themes\next\layout_partials\header.swig 中的 ul 标签加入如下 li 代码：
&li& &a title=&把这个链接拖到你的Chrome收藏夹工具栏中& href='javascript:(function() {
function c() {
var e = document.createElement(&link&);
e.setAttribute(&type&, &text/css&);
e.setAttribute(&rel&, &stylesheet&);
e.setAttribute(&href&, f);
e.setAttribute(&class&, l);
document.body.appendChild(e)
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t & e. t++) {
document.body.removeChild(e[t])
function p() {
var e = document.createElement(&div&);
e.setAttribute(&class&, a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
function d(e) {
height : e.offsetHeight,
width : e.offsetWidth
function v(i) {
var s = d(i);
return s.height & e && s.height & n && s.width & t && s.width & r
function m(e) {
var n = 0;
while (!!t) {
n += t.offsetT
t = t.offsetParent
function g() {
var e = document.documentE
if (!!window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
function y() {
if (window.pageYOffset) {
return window.pageYOffset
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
function E(e) {
var t = m(e);
return t &= w && t &= b + w
function S() {
var e = document.createElement(&audio&);
e.setAttribute(&class&, l);
e.addEventListener(&canplay&, function() {
setTimeout(function() {
setTimeout(function() {
for (var e = 0; e & O. e++) {
e.addEventListener(&ended&, function() {
e.innerHTML = & &p&If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.&/p& &p&&;
document.body.appendChild(e);
function x(e) {
e.className += & & + s + & & + o
function T(e) {
e.className += & & + s + & & + u[Math.floor(Math.random() * u.length)]
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp(&\\b& + s + &\\b&);
for (var n = 0; n & e. ) {
e[n].className = e[n].className.replace(t, &&)
var e = 30;
var t = 30;
var n = 350;
var r = 350;
var i = &///moovweb-marketing/playground/harlem-shake.mp3&;
var s = &mw-harlem_shake_me&;
var o = &im_first&;
var u = [&im_drunk&, &im_baked&, &im_trippin&, &im_blown&];
var a = &mw-strobe_light&;
var f = &///moovweb-marketing/playground/harlem-shake-style.css&;
var l = &mw_added_css&;
var b = g();
var w = y();
var C = document.getElementsByTagName(&*&);
for (var L = 0; L & C. L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
if (A === null) {
console.warn(&Could not find a node of the right size. Please try a different page.&);
var O = [];
for (var L = 0; L & C. L++) {
var A = C[L];
if (v(A)) {
'&High一下&/a& &/li&
多说自定义css
在多说后台 -& 设置 -& 基本设置 -& 自定义CSS -& copy上边资源拿来的代码
另外使用多说前需要先在 多说 创建一个站点。这点跟jacman有所不同，jacman不需要创建站点，只需要用户名就行了
jaman配置搜索失效了，我看很多其他jacman的博客搜索也没效果，我先后换了google，百度， Swiftype tinysou微搜都不好用，然而next一下就起效了，真的很赞Swiftype
注册Swiftype
注册完成后，创建一个新的搜索引擎，并按照提示完成创建步骤。
搜索引擎创建完成后，在菜单中选择 Integrate -& Install Search开启搜索定制，安装步骤完成定制。最后一步记得点击 Active 按钮。
返回定制引擎的第二个步骤 INSTALL CODE，复制出你的 swiftype_key。 install 和2.0.0之间的
关键！ 编辑站点配置文件，新增字段 swiftype_key，值设置成第四步中赋值出来的 key
# Swiftype Search Keyswiftype_key: xxxxxxxxx
呃呃，还有很多好玩的东西基本通过官方的手册都能成功，就不赘述了.总体感觉，next比jacman好用一点，也更有极客范儿。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致