基於 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

掃描二維碼關注微信公衆號，瞭解更多