基于 Hexo + GitHub Pages 搭建我的博客（二）

在 基于 Hexo + GitHub Pages 搭建我的博客（一） 这篇文章中，咱们已经知道如何使用 Hexo + GitHub Pages 搭建一个我的博客，GitHub 为咱们提供了免费的域名和服务器，很是方便，无需咱们费心。可是 Hexo 博客的原生主题并不符合大众的风格，那么如何为 Hexo 博客更换成咱们喜欢的主题呢？下面这篇就来详细解答如何配置博客我的信息以及更换博客主题，以不少人都在使用的 NexT 主题为例。

1、配置博客我的信息

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

二、在 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 文件，想了解的能够前往 官网 。

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

hexo server
复制代码

注：若是想查看配置后的信息是怎样的，可前往我已经搭建好的博客 点击前往个人我的博客 查看，这里就不截图了。

2、将 Hexo 博客主题更换为 NexT 主题

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

• NexT 主题下载地址：官方下载地址
• Hexo 博客其余主题下载地址：官网下载地址
• NexT 主题使用文档： 官方使用文档

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

# Extensions 扩展
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
复制代码

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

hexo server
复制代码

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

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

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
复制代码

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

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

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
复制代码

七、配置菜单按钮，在主题配置文件中，找到 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
复制代码

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

hexo new page 'categories'
hexo new page 'tags'
hexo new page 'about'
复制代码

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

十、配置搜索菜单：

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

npm install hexo-generator-searchdb --save
复制代码

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

search:
  path: search.xml
  field: post
  format: html
  limit: 10000
复制代码

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

local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, 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
复制代码

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

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

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

hexo new "Hello Hexo"
复制代码

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

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

---
title: Hello Hexo
date: 2018-03-23 09:09:19
tags: [Hexo]
categories: [Hexo]
---
复制代码

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

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

四、添加阅读全文按钮：在文章的任意位置添加下面命令便可

<!--more-->
复制代码

五、所要发表的文章在本地预览无误后，在 Git Bash 命令窗口执行如下命令，发布到 GitHub Pages 上

hexo clean && hexo g && hexo d
复制代码

六、上传成功后，在浏览器地址栏直接访问本身的域名： 直接访问，便可看到本身编写的文章已经发布到了 GitHub 上。而且每次发布文章到 GitHub 都须要执行下面的流程：

• Hexo clean
• Hexo g
• Hexo d

扫描二维码关注微信公众号，了解更多