基于 Hexo＋GitHub Pages 搭建个人博客（二）

在基于 Hexo + GitHub Pages 搭建个人博客这篇文章中，我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客，GitHub 为我们提供了免费的域名和服务器，非常方便，无需我们费心。

但是 Hexo 博客的原生主题并不符合大众的风格，那么如何为 Hexo 博客更换成我们喜欢的主题呢？下面这篇就来详细解答如何配置博客个人信息以及更换博客主题，以很多人都在使用的 NexT 主题为例。

一、配置博客个人信息

1、打开博客目录，如下图所示，打开 Hexo全局配置文件 _config.yml

2、在 Hexo全局配置文件中，具体配置和如下，配置后面有详细注解说明：

# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site 站点信息配置

title: compassblog #站点名

subtitle: 刻苦学习，解决眼前的苟且，追寻诗和远方... #站点副标题

description: 微信公众号：compassblog #站点信息简介

author: 孔乙己 #站点作者

language: zh-Hans #站点语言，default 默认是英文，zh-Hans 是中文

timezone: Asia/Shanghai #时区

avatar: /images/logo.jpg #站点 logo

# URL 博客地址

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: https://compassblog.github.io

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

future: true

highlight:

enable: true

line_number: true

auto_detect: false

tab_replace:

# Home page setting 主页设置

# path: Root path for your blogs index page. (default = '')

# per_page: Posts displayed per page. (0 = disable pagination)

# order_by: Posts order. (Order by date descending by default)

index_generator:

path: ''

per_page: 3#每页文章数量

order_by: -date

# Category & Tag 分类和标签

default_category: uncategorized

category_map:

tag_map:

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

# Deployment 站点部署到 GitHub 上，这里上一篇文章已经配置过

## Docs: https://hexo.io/docs/deployment.html

deploy:

type: git

repository: git@github.com:compassblog/compassblog.github.io.git

branch: master

message: hexo deploy

友情提示：如果真的想搭建一个博客，建议要动起手来，一步一步，只有真正行动了，才会发现自己错在哪里，真的是这样。

特别注意：配置 *.yml 文件有严格的格式要求，文件里所有的配置都是：冒号 空格 值，并且冒号是英文状态下的输入。而 *.yml 格式的文件是 Java 模板引擎 thymeleaf 文件，想了解的可以前往官网学习下：

https://www.thymeleaf.org/

3、到这里我们在博客目录右键点击 Git Bash命令，执行以下命令，本地启动服务器预览博客，然后去浏览器地址栏访问就会发现，Hexo 博客的基本站点信息已经配置完毕

hexoserver

注：如果想查看配置后的信息是怎样的，可访问我已经搭建好的博客查看，博客地址为：

https://compassblog.github.io/

二、将 Hexo 博客主题换为 NexT 主题

1、下载 NexT 主题：下载解压，命名为 next ，放置到博客目录的 themes 文件夹下，如下图所示：

NexT 主题官方下载地址：

https://github.com/iissnan/hexo-theme-next

Hexo 博客其他主题下载地址：

https://hexo.io/themes/

NexT 主题官方使用文档地址：

2、修改 hexo 文件夹下的主配置文件 _config.yml ，将 theme 属性修改为 next ，修改代码代码如下，具体如图所示：

#Extensions 扩展

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: next

3、到这里我们在博客目录右键点击 Git Bash命令打开窗口，执行以下命令，本地启动服务器预览博客，然后去浏览器地址栏访问就会发现，Hexo 博客的主题已经变成了 NexT 主题。

hexoserver

4、打开博客目录下的 themes 文件夹，进入我们刚刚配置的 next 文件夹，如下图所示，打开主题配置文件 _config.yml

5、在主题文件中配置 Hexo 博客演示外观，如下所示：默认的 Hexo 样式是 Muse 原生样式，我这里选的是 Pesces 样式

# ---------------------------------------------------------------

# Scheme Settings

# ---------------------------------------------------------------

# Schemes

#scheme: Muse

#scheme: Mist

scheme: Pisces

#scheme: Gemini

注：# 表示注释，要启用那个样式就直接把 # 去掉即可。想体验各种样式的不同之处，可以动起手来，亲自测试，本地预览。

6、配置网站底部基本信息，具体配置代码如下：

footer:

# Specify the date when the site was setup.

# If not defined, current year will be used.

since: 2018#网站起始运营年份

# Icon between year and copyright info.

icon: user#声明图标

# If not defined, will be used `author` from Hexo main config.

copyright: 指南者工作室#版权所有

# -------------------------------------------------------------

# Hexo link (Powered by Hexo).

powered:false#是否显示驱动

theme:

# Theme & scheme info link (Theme - NexT.scheme).

enable:false#是否显示主题

# Version info of NexT after scheme info (vX.X.X).

version:false

7、配置菜单按钮，在主题配置文件中，找到 menu 属性，做如下配置：

# ---------------------------------------------------------------

# Menu Settings

# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).

# Usage: `Key: /link/ || icon`

# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.

# Value before `||` delimeter is the target link.

# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.

menu:

home:/||home#首页，后面的表示图标

categories:/categories/||th#分类

tags:/tags/||tags#标签

archives:/archives/||archive#归档

about:/about/||user#关于

#schedule: /schedule/ || calendar

#sitemap: /sitemap.xml || sitemap

#commonweal: /404/ || heartbeat

8、到这里，网站基本信息的配置基本完成，但这时候本地测试时我们会发现，打开分类、标签、关于几个页面时会显示 404 错误，找不到页面，这是因为我们还没有创建相应的页面。在 Git Bash 窗口执行下面的命令，创建相应的页面即可，这时候我们会发现博客目录的 source 文件夹下已经生成了跳转页面的生成，如图所示：

hexonewpage'categories'

hexonewpage'tags'

hexonewpage'about'

9、每一个分类菜单都生成了一个 index.md 初始文件，默认包含了 title 和 date 字段，我们需要给每一 index.md 文件添加上 type 字段，如下图所示：

10、配置搜索菜单：

（1）安装 hexo-generator-searchdb ，在 Git Bash 窗口执行一下命令

npminstallhexo-generator-searchdb--save

（2）打开全局配置文件，新增下面代码

search:

path: search.xml

field: post

format: html

limit:10000

（3）打开主题配置文件，找到 local_search 属性，开启本地搜索功能

local_search:

enable:true

#ifauto, trigger search by changing input

#ifmanual, trigger search by pressing enter key or search button

trigger:auto

# show top n results per article, show all results by setting to -1

top_n_per_article:1

11、到这里我们在 Git Bash窗口，执行以下命令，本地启动服务器预览博客，然后去浏览器地址栏访问就会发现，博客的主题更换和基本配置已经完成，如下图所示：

三、在 Hexo 博客发布文章并托管到 GitHub Pages

1、永远的 Hello Hexo ：在 Git Bash 命令窗口执行下面的命令，新建一篇文章 "Hello Hexo"，到博客目录的 /source/_posts/ 文件夹下可以发现，已经生成了标题为 Hello-Hexo.md 的博客文件，如图所示，我们直接编辑自己的文章即可。

hexonew"Hello Hexo"

特别提示：Hexo 发布的文章是 Markdown 格式的文件，如没使用过 Markdown 编辑器的同学，可以自行去学习一下 Markdown 语法，半小时基本可以掌握基本的语法了，推荐一个学习 Markdown 基本语法的网址：

http://wowubuntu.com/markdown/

2、给文章添加分类和标签：直接在所要编辑文章的头部添加如下代码即可

---

title:HelloHexo

date: 2018-03-2309:09:19

tags:[Hexo]

categories:[Hexo]

---

注：多个分类和标签可以使用英文状态下的句号分隔。

3、本地启动，浏览器测试预览文章，如图所示：