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 并安装
Hexo 安装
- 安装
$ npm install -g hexo-cli
- 初始化
安装完成后，建一个文件夹（如hexo），执行以下指令(在hexo路径下)，Hexo 即会自动在目标文件夹建立网站所需要的所有文件
$ hexo init
- 查看博客
$ hexo g
$ hexo s
然后在浏览器中输入localhost:4000 就可以看到你的博客了。
如果安装过程中出现错误可以尝试在命令行前加上 sudo
Hexo 基本使用
既然博客已经安装好了，那么怎么写博客呢？博客是基于MarkDown语法的，不了解MarkDown的请点击这里。
编辑器MAC环境下免费的有Mou 和MacDown 比较给力，其他的不熟悉。
- 创建文件
$ hexo new "Hexo使用"
或者直接进入hexo\source\_posts路径下添加 xxx.md 类型的文件，然后打开文件编辑
title: Hexo使用 // 标题
categories: hexo // 分类
tags: [hexo，blog] //标签，多个用逗号隔开
---
#这里是正文，用markdown编写
- 预览
$ hexo g
$ hexo s
$ 访问localhost:4000预览效果。（退出server用Ctrl+c）
- 提交到git
编辑hexo\_config.yml，把下面的 abc 换成你的用户名。
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/abc/abc.github.io
保存文件并运行
$ hexo g
$ hexo s
$ hexo d
然后在浏览器输入abc.github.io 就能看到 Git 的博客发生了变化。
Hexo 配置
Okay
Hexo 的基本使用已经结束了，下面是怎样装饰你的博客了，如果你对默认的样式很满意，后面的可以跳过了。
我这里使用的主题是next
Hexo 有两个配置文件，在hexo路径下的 _config.yml 文件是 站点配置文件 ，在 hexo\themes\hexo-theme-next 路径下的 _config.yml 文件是主题配置文件。
配置文件
-
站点配置文件
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site 这里的配置可以参考我的博客 title: Try、Try Again！The worst result is failure! // 博客title subtitle: // 副标题 description: 以出以入，以就鲜絜，似善化。其万折也必东，似志。是故君子见大水必观焉。 -- 荀子·宥坐 // 描述 author: 东折 // 作者 language: zh-Hans // 使用语言 timezone: email: zhd_dong@163.com // 邮箱 # URL 这里没有设置 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com 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 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: tag_map: #archive: 1 #category: 1 #tag: 1 # 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-next // 在这里设置想要的主题（主题对应的文件夹的名称） duoshuo_shortname: yulncbd // 这里添加多说评论 # Deployment // 这里设置Git 的相关信息 ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repository: https://github.com/YulncBd/YulncBd.github.io // 这里将YulncBd替换成自己用户名
站点配置文件 主要配置了博客简介，git，多说评论等一些信息。自己可以尝试一下其他的设置，看看什么效果。设置完成后执行一下命令查看结果
hexo g
hexo s
hexo d
到用浏览器打开 `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)
menu:
home: /
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
# ---------------------------------------------------------------
// 这里设置主题的样式（可以都选择看一下效果）
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/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
# ---------------------------------------------------------------
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host:
# Global font settings used on <body> element.
global:
# 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.
headings:
external: true
family:
# Font settings for posts
# Fallback to `global` font settings.
posts:
external: true
family:
# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
logo:
external: true
family:
size:
# Font settings for <code> and code blocks.
code:
external: true
family:
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
// 这里设置一些网站链接
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
简书: http://www.jianshu.com/
GitHub: https://github.com/
知乎: http://www.zhihu.com
豆瓣: https://www.douban.com/
// 这里设置链接的图片
# 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
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: /uploads/avatar.png
# Table Of Contents in the Sidebar
toc:
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:
# 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 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
image:
// 这里设置代码段的背景色
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/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
mathjax:
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
#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: false
user_id: 0
#admin_nickname: Author
Author: hello
// 设置Facebook信息
# 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: false
app_id: #<app_id>
app_key: #<app_key>
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/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
#! ---------------------------------------------------------------
# Motion
use_motion: true
# Fancybox
fancybox: true
# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
# jquery: https://ajax.googleapis.com/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.
vendors:
# Internal path prefix. Please do not edit it.
_internal: vendors
# Internal version: 2.1.3
jquery:
# Internal version: 2.1.5
fancybox:
# Internal version: 1.0.6
fastclick:
# Internal version: 1.9.7
lazyload:
# Internal version: 1.2.1
velocity:
# Internal version: 1.2.1
velocity_ui:
# Internal version: 0.7.9
ua_parser:
# Assets
css: css
js: js
images: images
# Theme version
version: 5.0.1
// 这里设置的是打赏的信息
# Donate 文章末尾显示打赏按钮
reward_comment: 如果觉得写的不错，那就打赏一下吧！ // 文字提示
wechatpay: /uploads/weixin.png //微信图片(本地图片或网络图片)
#alipay: 此处为支付宝向我付款二维码图片的相对或者是绝对URL
分类和标签
- 添加分类
cd hexo // 进入博客路径
hexo new page categories // 创建分类页面
然后进入到hexo\source\ categories路径下打开index.md文件，编辑保存。
---
title: categories
date: 2016-04-26 16:17:21
type: "categories"
---
在主题配置文件里设置
menu:
home: /
archives: archives
categories: categories // 如果有问题在前面加一个反斜杠
tags: tags
#about: about
#commonweal: /404.html
- 添加标签
cd hexo // 进入博客路径
hexo new page tags // 创建分类页面
然后进入到hexo\source\ tags路径下打开index.md文件，编辑保存。
---
title: tags
date: 2016-04-26 16:17:21
type: "tags"
---
在主题配置文件里设置
menu:
home: /
archives: archives
categories: categories
tags: tags // 如果有问题在前面加一个反斜杠
#about: about
#commonweal: /404.html
最后发表一篇文章（设置好分类和标签），执行一下命令查看结果
hexo g
hexo s
hexo d
头像
要在 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公益页面，域名，统计，搜索等功能暂未实现，感觉博客没必要弄那么多不必要的功能，如果你感兴趣可以去研究一下。
