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停止。

image.png

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 目录下会生成一个tagscategories文件夹,里面包含一个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 主题不断更新,各项配置也在变化,建议直接根据官方文档配置。网上此类教程十分丰富,可多加参考。此文不免出现差错,有问题请留言。

延伸阅读