Aitter's Blog

使用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 支持三种方式来控制首页文章的显示方式

  • 在文章中使用 <!-- more --> 手动进行截断
  • 在文章的 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 文件解析