Hexo 安装与添加 NexT 主题

原来发了一个关于 Hexo 搭建博客系列的总纲，想要搭建个人博客的同学，建议直接根据官方文档 (https://hexo.io/zh-cn/docs/) 搭建博客，本文针对 Windows 系统补充讲解一些个人设置。

Hexo 是一个开源的博客框架，是一位台湾小哥 (tommy351) 在大学时开发出来的。我们可以直接基于这个框架，选择一个自己喜欢的主题，修改一些配置，就搭建出一个博客了。我使用的是 NexT 主题，最终效果可看我的博客：https://depp.wang。个人博客是也通过 Jekyll 和 WordPress 搭建，但是 Hexo 简单免费，建议使用 Hexo。

Hexo 搭建的博客是静态的，没有后台代码，所以速度很快。

安装 Git+NodeJS 环境

Hexo 是基于 Node.js 的静态博客生成器，所有需要提前安装 Node.js，可使用命令行下载 (详见官方文档教程)，最好下载长期维护版，地址：

https://nodejs.org/zh-cn/

Hexo 是在本地使用 MarkDown 语法写博客，再使用 Git 发布到远程代码托管平台上，如 GitHub。

需要安装 Git，一个代码管理工具。以下所有命令均是在 Git Bash(Git 命令行窗口) 中执行的。下载地址：

https://git-scm.com/downloads  // 官方地址，速度应该比较慢
https://github.com/waylau/git-for-win//github 下载地址

推荐一个廖雪峰大神的 Git 经典入门教程，讲得非常好，学完肯定对 git 原理了然于胸。

http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

Hexo 配置使用

Hexo 安装

当 Node.js 安装完毕后，在任意文件夹鼠标右击选择Git Bash Here打开 Git 命令行，执行如下命令安装 Hexo：

$ npm install -g hexo-cli

初始化博客

新建一个文件夹（如 E:\Hexo，以下教程都以这个目录为博客根目录），在博客根目录下点击鼠标右键，选择 Git Bash Here，执行如下命令，如果以下命令执行失败，说明你 Hexo 没有安装成功。

$ hexo init

在博客根目录下会生成以下文件

/source：/_post 中存放 MarkDown 编写的博文等源文件
/themes：存放主题文件，每个主题包含主题配置文件（_config.yml）
_config.yml：站点配置文件，用于配置博客信息，如网站信息，主题设置

在博客根目录可执行如下命令用于启动服务器，主要用来本地预览：

hexo g    #完整命令为 hexo generate，用于生成静态文件 (即 public 文件夹)  
hexo s    #完整命令为 hexo server，将上面的文件部署到本地服务

浏览器访问 http://localhost:4000，你会看见一个默认主题是 landscape 的博客，可以在 Git Bash 中按Ctrl+C停止。

NexT 主题配置使用

NexT 比较简洁耐看，几乎大多数人都喜欢。主题的官方文档

NexT 主题安装

在博客根目录下运行以下命令，将下载 NexT 主题。

$ cd themes // 切换到主题文件夹
$ git clone https://github.com/iissnan/hexo-theme-next next // 将其克隆的 hexo-theme-next 重命名为 next

Hexo 有两份主要的配置文件（_config.yml）：一份位于站点根目录下，称为 站点配置文件，关键字站点；另一份位于主题目录下，称为 主题配置文件，关键字主题。

建议使用 Notepad++ 打开配置文件，它内存比较小、免费。下载地址：

https://notepad-plus-plus.org/download/v7.5.9.html

修改站点配置文件

主要包含以下内容：
1、新增网站的信息

# Site
title: DeppWang's Blog    #网站标题
subtitle: 这是副标题    #网站副标题
description: 坚持分享知识，坚持留言支持    #网站描述
author: DeppWang    #你的名字
language: zh-Hans   #网站使用的语言
timezone:

2、修改博客文章的 URL，默认显示英文，避免中文过长乱码，需要在新建文章中的 Front-matter（顶部 - 线包裹区域）中新增一个字段 english_title 配合使用，方生效。此项可暂时跳过

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://depp.wang    #你网站的 URL
root: /
permalink: :year/:month/:day/:english_title/   #此处将文字 url 改为英文，避免中文乱码。
permalink_defaults:

3、将标签和分类名在此处对应设置，这样 URl 的中文改为对应英文，此项可暂时跳过

# Category & Tag
default_category: uncategorized
category_map:
  设计模式: Design Pattern    #为避免分类名称为中文造成 URL 过于冗长，将中文转换成对于英文
  数据库: Database
  
tag_map:
  单例模式: Singleton Pattern    #为避免标签名称为中文造成 URL 过于冗长，将中文转换成对于英文
  排序算法: Sort Algorithms

4、主题更改 next

# Extensions
# Plugins: -hexo-generator-sitmap
## Themes: https://hexo.io/themes/
theme: next    #主题设置，改为 next

5、设置 GitHub 仓库托管路径

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
       github: [email protected]:yourname/yourname.github.io.git,master  // 博客文件存储位置；注意格式

修改主题配置文件

主要修改以下内容：
1、修改网址图标，可在 http://tool.lu/favicon/ 上设计自己的网址图标，替换 themes/next/source/images/ 文件下对应文件

favicon:
  small: /images/favicon-16x16-next.png             
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

2、新增页面标签、分类选项

menu:
  home: / || home                         #主页
  #about: /about/ || user                 #关于页面
  tags: /tags/ || tags                    #标签页
  categories: /categories/ || th          #分类页
  archives: /archives/ || archive         #归档页
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap       #搜索引擎抓取
  #commonweal: /404/ || heartbeat         #公益 404
  #about: /about                          #关于页面（需手动创建）
  #search: /search                        #搜索页面（需手动创建）

3、根据个人喜好切换主题，以下切换为 Mist 主题

# Schemes
#scheme: Muse
scheme: Mist    #切换为 Mist 主题
#scheme: Pisces

4、设置博客头像，将头像（如：deppwang.jpg）放在站点下的 /themes/next/source/images 文件夹下

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: /images/deppwang.jpg    #设置头像

5、设置博客友链

# Blog rolls
links_title: Links
#links_layout: block
#links_layout: inline
links:    #链接
  阿里中间件团队博客: http://jm.taobao.org/
  Jark's Blog: http://wuchong.me/
  廖雪峰个人网站: http://www.liaoxuefeng.com/

6、设置文章中代码主题

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night   #代码主题

生成标签、分类页面

主题文件修改第 2 条，已经在页面上显示出标签和分类页选项，但此时还未完全成功配置。需要在站点下打开 Git Bash 运行分别以下命令生成标签和分类页面

hexo new page "tags"

hexo new page "categories"

在 /source 目录下会生成一个tags和categories文件夹，里面包含一个index.md文件。
可用有道云笔记或其他 MarkDown 编译器打开，修改 title 为中文名标签、分类

常用 hexo 命令

hexo g ：完整命令为 hexo generate，用于生成或更新静态文件 (即 public 文件夹，也就是整个博客网站的静态文件)
hexo d : 完整命令为 hexo deploy，用于将 public 文件夹发布到远程代码托管网站中 (如 GitHub)
hexo clean ：用于清除静态文件 (public 文件夹)。当 hexo g 命令更新文件失败时，可先清除文件
hexo g -d ：同时生成静态文件，并发布，最实用

总结

Hexo 主题不断更新，各项配置也在变化，建议直接根据官方文档配置。网上此类教程十分丰富，可多加参考。此文不免出现差错，有问题请留言。