Github+Hexo一站式部署个人博客

发表于 | 更新于 | 分类于 | 阅读次数：

写在前面

注：本文出自博主 Chloneda：个人博客 | 博客园 | Github | Gitee | 知乎

本文档是Github + Hexo 的搭建个人博客教程，其中Hexo基于Hexo v3.8.0版本，themes主题基于为NexT v7.0.0版本。

搭建博客前置条件可参考 如何搭建个人独立博客？

个人博客地址： Chloneda’s blog

注： 点开侧栏浏览目录可快速定位内容

安装主题

在 Hexo 项目源码目录下，有两个重要的配置文件，其名称均为 _config.yml 。 其中，一份位于站点根目录下，主要包含 Hexo本身的配置；另一份位于主题目录下，主要用于主题相关的配置。为了描述方便，在以下说明中，将前者称为站点配置文件， 后者称为主题配置文件。

下载NexT主题

1
2
cd hexo
git clone https://github.com/theme-next/hexo-theme-next themes/next

启用NexT主题

修改站点配置文件，查找关键词theme，并修改为主题名字next：

1
2
3
4
# Extensions	#(注意冒号间的空格)
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。

主题设置

设置Scheme

在Hexo主题中，有四种不同的模式！进入主题配置文件，搜索关键词找到scheme属性，选择自己喜欢的模式：

1
2
3
4
5
6
7
8
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
# scheme: Muse    # 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
scheme: Mist     # Muse 的紧凑版本，整洁有序的单栏外观
# scheme: Pisces  # 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
# scheme: Gemini  # 类似 Pisces

设置语言

编辑站点配置文件，搜索关键词language，并设置成你所需要的语言：

1
language: zh-CN

设置菜单

进入主题配置文件，找到menu字段，菜单内容的设置格式是：item name: link || menu photo，其中item name 是一个名称，link时具体菜单分类，菜单的||后面是菜单的图标,具体菜单图标可参考Font Awesome网站。

1
2
3
4
5
6
7
8
# 菜单示例配置
menu:
  home: / || home
  reading: /reading/ || book
  archives: /archives/ || archive
  categories: /categories/ || th
  #tags: /tags/ || tags
  about: /about/ || user

头像设置

在主题配置文件，搜索字段avatar，值设置成头像的链接地址。

1
2
3
4
5
6
7
# 将头像放置主题目录下的 source/uploads/ （新建uploads目录若不存在） 配置为：
avatar: /uploads/avatar.png
# 放置在 source/images/ 目录下, 配置为：
avatar: /images/avatar.png
# 完整的互联网 URI
avatar: 
   url: http://example.com/avatar.png

设置侧边栏

在主题配置文件，搜索sidebar关键词，设置为hide模式，如下图所示：

1
2
3
4
5
sidebar:
  #display: post    // 默认显示方式
  #display: always  // 一直显示
  display: hide     // 初始隐藏
  #display: remove  // 移除侧边栏

各位可根据个人喜好进行设置。

设置站点描述

在站点配置文件中，搜索关键词Site，如下：

1
2
3
4
5
6
# Site
title: Chloneda		        #你的站点标题
subtitle: Less is more
description: Less is more	#你的站点描述
keywords: chloneda
author: chloneda	        #站点作者

进阶设定

添加标签页面

hexo根目录下，执行以下命令，新建标签页面。

1
hexo new page tags

修改站点目录source/tags的 index.md 文件：

1
2
3
4
5
6
---
title: 添加标签页面测试
tags: Test	#添加标签
categories: Test	#添加分类
comments: false
---

修改主题配置文件，搜索关键词menu，取消 #tags: /tags/ || tags注释，内容如下:

1
2
3
4
5
6
7
8
# 菜单示例配置
menu:
  home: / || home
  reading: /reading/ || book
  archives: /archives/ || archive
  categories: /categories/ || th
  tags: /tags/ || tags
  about: /about/ || user

新添菜单翻译对应的中文

打开 hexo>theme>next>languages>zh-CN.yml 文件，在menu下添加 tags: 标签：

1
2
3
4
5
6
7
8
9
10
11
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  resources: 资源

注：添加其他页面也类似。

首页显示预览

首页显示文章列表，列表里的每一篇文章只显示预览，不显示全文。

进入主题配置文件，搜索关键词auto_excerpt，把enable对应的false改为true。

1
2
3
4
5
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

友情链接

打开主题配置文件,搜索关键字 Blog rolls,添加自己需要的链接：

1
2
3
links: #连接
  baidu: https://www.baidu.com/
  google: https://www.google.com/

本地搜索

在Hexo的根目录下执行以下命令。

1
$ npm install hexo-generator-searchdb --save

打开主题配置文件,搜索关键字local_search,将enable的值设置为 true：

1
2
3
4
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true

打开站点配置文件，搜索关键词search，修改为如下内容：

1
2
3
4
5
6
# 本地搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

添加RSS

在Hexo根目录执行安装指令，安装 hexo-generator-feed 插件：

1
npm install hexo-generator-feed --save

打开站点配置文件，追加feed信息:

1
2
3
4
5
6
7
# 设置RSS
feed:
  type: rss2
  path: rss2.html
  limit: 5
  hub:
  content: 'true'

打开主题配置文件，找到rss，设置为:

1
rss: /atom.xml

添加社交链接

在主题配置文件中，找到social属性，添加社交链接，步骤如下：

1
2
3
4
5
social:
  E-Mail: mailto:yourname@gmail.com || envelope
  Google: https://plus.google.com/yourname || google
  Twitter: https://twitter.com/yourname || twitter
  Facebook: https://www.facebook.com/yourname || facebook

格式为： 社交平台名称：链接

设置代码高亮

首先需要改动的地方有：

  • 站点配置文件_config.yml。
  • 主题配置文件_config.yml。

在站点配置文件中，搜索highlight关键词:

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

文字自动检测默认不启动，改成true使其起作用。

再到主题配置文件，搜索highlight_theme关键词，修改代码主题样式：

1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

添加复制按钮

在主题配置文件中，搜索关键词codeblock，将copy_button的enable值修改为true。

1
2
3
4
5
6
7
codeblock:
  # Manual define the border radius in codeblock
  # Leave it empty for the default 1
  border_radius:
  # Add copy button on codeblock
  copy_button:
    enable: true

添加阅读次数统计

主题配置文件中，搜索关键词busuanzi_count，设置文章阅读次数统计及网站访客量:

1
2
3
4
5
6
7
8
9
10
# Show Views/Visitors of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

添加 README.md

每个项目README.md文件可以简单说明这个项目的用途。在Hexo目录下的 source 根目录下添加一个 README.md 文件，修改站点配置文件，将 skip_render 参数的值设置为：

1
skip_render: README.md

再次使用hexo d命令部署博客的时候就不会在渲染 README.md 这个文件。

进阶配置

自定义网站头像

自定义头像可以使用 比特虫 网站制作！

在主题配置文件中，按以下修改：

1
2
3
4
5
6
7
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
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

添加自定义页面[友链]

设置菜单项的显示中文文本，打开themes/next/languages/zh-CN.yml文件,搜索 menu 关键字，修改对应中文或者新增。

1
2
3
4
5
6
7
8
9
10
11
12
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  # schedule: 日程表
  # sitemap: 站点地图
  # commonweal: 公益404
  # 新增menu
  links: 友链	# 新增该选项表示新增“友链”菜单

在主题配置文件，搜索menu，新增links: /links/ || link：

1
2
3
4
5
6
7
8
9
# 菜单示例配置
menu:
  home: / || home
  reading: /reading/ || book
  archives: /archives/ || archive
  categories: /categories/ || th
  #tags: /tags/ || tags
  about: /about/ || user
  links: /links/ || link

hexo根目录下，执行以下命令，新建友链页面。

1
hexo new page links

修改站点目录下source/links的 index.md 文件：

1
2
3
4
5
6
---
title: 友链
tags: links
categories: links
comments: false
---

注：其它自定义菜单也是类似步骤

增加背景音乐

在本博客的侧边栏增加网易云音乐，生成音乐外链可参考链接 ，复制链接，将外链插入到Hexo根路径的侧边栏文件中：/themes/next/layout/_macro/sidebar.swig，即侧边栏友情链接theme.links这一项之后。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.links %}
    <div>
      <div class="links-of-blogroll-title">
       ....省略部分代码
      </div>
      <ul class="links-of-blogroll-list">
        ....省略部分代码
      </ul>
    </div>
{% endif %}

    <div id="music163player">
	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
		src="//music.163.com/outchain/player?type=2&id=5239700&auto=0&height=66">
	</iframe>
    </div>

添加打赏功能

如今已进入知识付费时代，打赏是读者对笔者创造的最大支持，更是对劳动者的尊重。打赏功能具体步骤为：
获取二维码

  • 微信二维码的获取（可百度）。
  • 获取支付宝收款二维码（可百度）。

添加二维码图片资源
得到二维码图片资源后，读者们可将二维码图片放到NexT根目录/source/images/文件夹下。

开启打赏功能
打开主题配置文件，搜索reward关键词，添加打赏的配置信息。

1
2
3
4
5
6
7
8
# Reward
# If true, reward would be displayed in every article by default.
# And you can show or hide one article specially through add page variable `reward: true/false`.
reward:
  enable: true  //默认是false，改为true
  comment: 您的支持是对我最大的鼓励
  wechatpay: /images/wechatpay.jpg	#图片链接或图片相对路径
  alipay: /images/alipay.jpg	  #图片链接或图片相对路径

开启版权声明

打开主题配置文件,搜索关键字 creative_commons , post 改为 true：

1
2
3
4
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true

优化及设置

优化url

seo搜索引擎优化认为，网站的最佳结构是三层，但是默认hexo编译的站点打开文章的url是：sitename/year/mounth/day/title四层的结构，url不利于搜索引擎搜索。

因此，我们可以将url直接改成sitename/blog/title的形式，同时title最好是用英文，在站点配置文件搜索permalink关键词，并修改如下。

1
2
3
4
url: https://chloneda.github.io/
root: /
permalink: /blog/:title.html
permalink_defaults:

Hexo博客备份

利用github分支功能进行博客备份，思路说明:

  • master分支：存放博客的静态网页(默认分支)。
  • hexo分支：存放Hexo博客的源码文件。

master分支部署
进入站点配置文件编辑，搜索deploy关键词：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/你的github用户名/你的github用户名.github.io.git
  branch: master

  • 修改更新博客内容并保存。
  • 执行hexo clean清除本地旧代码。
  • 执行hexo g -d生成静态网站并部署到GitHub的master分支上。

hexo分支配置

  • hexo分支，该分支为博客源码分支。
  • 使用git clone -b hexo 你的github仓库路径， 拷贝源码仓库。
  • 修改hexo主配置_config.xml的deploy部分配置，设置静态页面的发布分支为master。
  • 添加.gitignore文件，将静态网页的目录及其他无需提交的源文件及目录排除掉。

博客源码更新
在本地对博客进行修改后，提交hexo源代码：

1
2
3
4
git checkout hexo
git add .
git commit -m 'Code update'
git push origin hexo

发布hexo静态文件
hexo根目录依次执行以下命令：

1
2
3
hexo clean
hexo generate	或者   hexo g
hexo deploy	或者   hexo d

本地资料丢失或其他主机搭建博客步骤：

  • 拷贝hexo分支源码到本地：git clone -b hexo github项目地址.git。
  • 安装hexo及各类插件。
  • 本地安装调试。

Hexo部署脚本

Hexo修改后利用deploy.sh脚本一键部署，提高部署效率。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#!/bin/bash
DIR=`dirname $0`

# Generate blog
hexo clean
hexo generate
sleep 5

# Deploy
hexo deploy
sleep 5

# Push hexo code
git add .
current_date=`date "+%Y-%m-%d %H:%M:%S"`
git commit -m "Blog updated: $current_date"

sleep 2
git push origin hexo

echo "=====>Finish!<====="

把该脚本存放至 hexo根目录中，并附加脚本执行权限:

1
chmod 775 deploy.sh

在hexo目录根执行脚本:

1
./deploy.sh

可一键部署博客及备份博客源码至github的分支hexoCode上。

提升你的博客

更多提升NexT主题的方法请参考以下网页。

结束小语

本文采用Github + Hexo搭建的个人博客，在搭建过程优化总结，及时记录，希望对各位有所帮助！本文如有错误，欢迎在 Github 的issue中提出，非常感谢！！！

更多详情请参考：

您的支持是对我最大的鼓励
0%