使用HEXO搭建博客

简要介绍下Hexo搭建博客的相关知识，主要内容如下

Hexo的安装、使用、发布
NexT主题安装与配置
Hexo优化

详情文档参考请移步至 Hexo中文网

安装

环境

系统：Win8 64bit
Node版本: v0.12.0
Hexo版本：3.1.1
Git版本： 1.9.5.msysgit.1

安装HEXO

npm install hexo-cli -g //下载hexo包
hexo init blog //初始化一个博客项目，项目名称叫blog
cd blog
npm install //安装依赖
hexo server //启动http服务，预览项目

用浏览器打开 http://localhost:4000/ 或者 http://127.0.0.1:4000/就能看到网页了
推荐使用现代化浏览器(Chrome)获得最佳效果

按 Ctrl+C 停止本地预览服务

使用

hexo的目录结构

.
├── .deploy       #需要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局配置文件
└── package.json

全局配置 _config.yml

配置文件的冒号’:’后面有空格

# Site #站点信息
title: lmintlcx #标题
subtitle: 做人不卖萌跟咸鱼有什么区别 #副标题
description: lmintlcx lm lcx blog #描述
author: lmintlcx #作者
language: zh-Hans #语言
timezone: Asia/Shanghai #时区

# URL #链接格式
url: http://blog.lmintlcx.com #网址
root: / #根目录
permalink: post/:title.html #文章的链接格式
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 #新文章标题
default_layout: post #默认模板(post page photo draft)
titlecase: false #标题转换成大写
external_link: true #新标签页里打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #语法高亮
  enable: true
  line_number: false #显示行号
  auto_detect: true
  tab_replace:

# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:

# Date / Time format #日期时间格式
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination #分页
per_page: 20 #每页文章数, 设置成 0 禁用分页
pagination_dir: page

# Extensions #插件和主题
## 插件: http://hexo.io/plugins/
## 主题: http://hexo.io/themes/
theme: next

# Deployment #部署, lmintlcx是我的用户名, 同时发布在 GitHub 和 GitCafe 上面
deploy:
  type: git
  repo:
    github: https://github.com/lmintlcx/lmintlcx.github.io.git,master
    gitcafe: https://gitcafe.com/lmintlcx/lmintlcx.git,gitcafe-pages

# Disqus #Disqus评论系统
disqus_shortname:

plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap

命令行使用

常用命令

hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页, 可以在 public 目录查看整个网站的文件
hexo server #本地预览, 'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存, **强烈建议每次执行命令前先清理缓存, 每次部署前先删除 .deploy 文件夹**

复合命令

hexo deploy -g #生成加部署
hexo server -g #生成加预览

简写

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

安装插件

<plugin-name> 为插件名

npm install <plugin-name> --save #安装
npm update #升级
npm uninstall <plugin-name> #卸载

安装主题

<repository> 为主题的 git 仓库, <theme-name>为要存放在本地的目录名

git clone <repository> themes/<theme-name>

修改主题配置

theme: <theme-name>

编辑文章

hexo new "标题" 或者 hexo n 标题

在_posts目录下会生成文件标题.md

title: 标题
date: 2015-09-20 13:18:46
tags:
- 标签1
- 标签2
- 标签3
categories: [分类1,分类2,分类3]
---
正文, 使用 Markdown 语法书写

编辑完成后保存，hexo server 预览

发布

可以部署到GitHub或Coding
发布到GitHub 项目主页需要把 branch 设置为 gh-pages

deploy:
  type: github
  repo: https://github.com/git-lt/blog.git
  branch: master

或者发布到Coding

deploy:
  type: git
  repo: https://git.coding.net/coderlt/blog.git
  branch: master

发布

hexo deploy

出现以下提示说明部署成功

[info] Deploy done: github

NexT主题

安装

到hexo博客项目目录，从git上下载next主题

git clone https://github.com/iissnan/hexo-theme-next themes/next

全局配置文件中 _config.yml 中 theme 改成 next

目录结构

.
├── languages          #国际化
|   ├── default.yml    #默认
|   └── zh-CN.yml      #中文
├── layout             #布局
|   ├── _partial       #局部的布局
|   └── _widget        #小挂件的布局
├── script             #js脚本
├── source             #源代码文件
|   ├── css            #CSS
|   |   ├── _base      #基础CSS
|   |   ├── _partial   #局部CSS
|   |   ├── fonts      #字体
|   |   ├── images     #图片
|   |   └── style.styl #style.css
|   ├── fancybox       #fancybox
|   └── js             #js
├── _config.yml        #主题配置文件
└── README.md          #主题介绍

主题配置文件

主题 NexT 的配置

menu: #菜单
  home: / #首页
  archives: /archives #归档
  about: /about #关于
  #commonweal: /404.html #公益404
  #tags: /tags #标签
  #categories: /categories #分类

# 小图标
favicon: /favicon.ico

# 默认关键词
keywords: "-_^"

# 留空使用默认的, false 禁用, 也可以写指定的地址
rss:

# Icon fonts
# default | linecons | fifty-shades | feather
icon_font: default

# 代码高亮主题 https://github.com/chriskempson/tomorrow-theme
# normal | night | night eighties | night blue | night bright
highlight_theme: normal

# MathJax Support #数学公式
mathjax: true

# Schemes #启用主题中的主题Mist
scheme: Mist

# 侧边栏
#  - post    只在文章页面显示
#  - always  所有页面显示
#  - hide    隐藏
sidebar: always

# 自动滚动到"阅读更多"标记的下面
scroll_to_more: true

# 自动给目录添加序号
toc_list_number: true

# 自动截取摘要
auto_excerpt:
  enable: false
  length: 150

# Lato 字体
use_font_lato: true

# 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: ROOT

## DO NOT EDIT THE FOLLOWING SETTINGS
## UNLESS YOU KNOW WHAT YOU ARE DOING

# 动画
use_motion: true

# Fancybox 看图插件
fancybox: true

# Static files
vendors: vendors
css: css
js: js
images: images

# Theme version
version: 0.4.5.1

全局配置文件

blog/_config.yml 添加如下配置

favicon: /favicon.ico #网站图标
language: zh-Hans #繁体：zh-hk/zh-tw 英语：en
# 标题
links_title: 友情链接
# 链接
links:
  Hexo: http://hexo.io/

主菜单设置

menu:
  home: /
  archives: /archives
  categories: /categories   #手动新建
  tags: /tags               #手动新建
  commonweal: /404.html     #手动新建
  about: /about             #手动新建

标签云页面

命令

hexo new page tags

页面设置

title: tags
date: 2015-09-19 22:37:08
type: "tags"
comments: false
---

关于页面

命令

hexo new page about

页面设置

title: about
date: 2015-09-19 22:37:08
comments: false
---
About Me #这里编辑 '关于我' 的内容

分类页面

命令

hexo new page categories

页面设置

title: categories
date: 2015-09-19 22:37:08
type: "categories"
comments: false
---

文章摘录

NexT 支持三种方式来控制首页文章的显示方式

在文章中使用  手动进行截断
在文章的 front-matter 中添加 description, 内容为文章摘要

自动形成摘要, 在主题配置文件中添加

auto_excerpt:
  enable: true
  length: 150 #默认截取的长度为 150 字符

优化

多说评论和分享

全局中添加配置

# 启用多说
duoshuo_shortname: xxx
# 多说热评文章 true 或者 false
duoshuo_hotartical: true
# 多说分享服务
duoshuo_share: true

duoshuo_shortname 为在多说中创建的短域名

在文章开启和关闭评论
文章头部配置front-matter中添加

comments: false/true

百度统计

登录百度统计, 定位到站点的代码获取页面复制 hm.js? 后面那串统计脚本 id

baidu_analytics: xxxxxxxxxxxxxxxx

自定义404

在主题next/source目录下新建404.html 腾讯公益404页面

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="your-site-url" homePageName="回到我的主页"></script>

</body>
</html>

图片显示

把图片放到图床或source/images目录下

![test](images/xxx.jpg)

访问量统计与网站运行时间

这里使用不蒜子提供的服务
在 next/layout/_partials 中的 footer.swig 文件中添加

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div>
<span id="showDays"></span>
<span id="busuanzi_container_site_pv">
  总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span id="busuanzi_container_site_uv">
  访客数<span id="busuanzi_value_site_uv"></span>人次
</span>
</div>
<script>
var birthDay = new Date("11/20/2014");
var now = new Date();
var duration = now.getTime() - birthDay.getTime();
var total= Math.floor(duration / (1000 * 60 * 60 * 24));
document.getElementById("showDays").innerHTML = "本站已运行 "+total+" 天";
</script>

添加README.MD

把 README.MD 文件的后缀名改成 MDOWN, 放到 source 文件夹下, 这样 Hexo 不会将其解析成网页, GitHub 也会作为 MD 文件解析

安装

环境

安装HEXO

使用

hexo的目录结构

全局配置 _config.yml

命令行使用

常用命令

复合命令

简写

安装插件

安装主题

编辑文章

发布

NexT主题

安装

目录结构

主题配置文件

全局配置文件

主菜单设置

标签云 页面

关于 页面

分类 页面

文章摘录

优化

多说评论和分享

百度统计

自定义404

图片显示

访问量统计 与 网站运行时间

添加README.MD

标签云页面

关于页面

分类页面

访问量统计与网站运行时间