什么是hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
本文采用最新的Hexo版本和炫酷的Next主题，在github上运行搭建的Hexo博客（github提供服务器），并绑定自己的腾讯云域名。
文章分两个部分，第一部分基础篇主要讲解搭建基础的Hexo博客（基本的Hexo博客样式），第二部分主要是进阶篇，实现各种炫酷的功能。
线上预览效果为： www.zxcoding.cn
基于Hexo和Github的炫酷个人博客（基础篇）
基于Hexo和Github的炫酷个人博客（进阶篇）
实现功能
- Next主题安装
- 切换主题
- 设置Menu
- 初始化对应Menu菜单
- 设置动态背景
- 在右上角或者左上角实现Fork me on github
- 添加RSS
- 修改文章链接文本样式
- 修改底部标签样式
- 在文章末尾添加文章结束标记
- 设置头像并设置动画效果
- 修改代码块自定义样式
- 主页文章添加阴影效果
- 添加热度
- 网站底部字数统计
- 设置网站的图标Favicon
- 实现文章统计功能
- 添加网页顶部进度加载条
- 底部隐藏由Hexo强力驱动、主题–NexT.Mist
- 去掉底部重复字数统计
- 添加jiathis分享
- 博文置顶
- 修改字体大小
- 添加DaoVoice在线联系
- 添加底部桃心
- 添加侧栏推荐阅读
- 在文章底部增加版权信息
- Hexo博客添加站内搜索
- 添加外链网易云音乐
- Seo优化
- 搜索引擎关键词优化
安装hexo
安装Node.js和配置好Node.js环境，打开cmd命令行，成功界面如下
安装Git和配置好Git环境。安装成功的象征就是在电脑上任何位置鼠标右键能够出现如下两个选择
Github账户注册和新建项目，项目必须要遵守格式：账户名.github.io，不然接下来会有很多麻烦。并且需要勾选Initialize this repository with a README。账户名就是访问地址中www.github.com/[你的账户名]。
在建好的项目右侧有个settings按钮，点击它，向下拉到GitHub Pages，你会看到那边有个网址，访问它，你将会惊奇的发现该项目已经被部署到网络上，能够通过外网来访问它。
注：在Custom domain（可选）中可以填写自己的域名，后面会讲到配置。这里可以不填。图中已填好作者的域名。
安装hexo
在自己合适的地方建立文件夹，用于安装hexo博客的本地文件夹。本文在D盘工作目录下建立了HexoBlog目录，并在dos下用命令建立。注：建立的位置可以任意。
安装hexo
npm install hexo -g
输入hexo -v ，检查hexo是否安装成功
输入hexo init ，初始化该文件夹。生成静态页面。
输入npm install，安装所需要的组件。因为我已经安装过了，图片目录名可能不对，不影响阅读。
测试
输入 hexo g，首次体验Hexo
输入hexo s，开启服务器，访问该网址，正式体验Hexo
问题：假如页面一直无法跳转，那么可能端口被占用了。此时我们ctrl+c停止服务器，接着输入“hexo server -p 端口号”来改变端口号
那么出现下图就成功了。
功能实现
搭建主题Next
- 在项目目录下，右键点击Git Base Here。输入命令：git clone https://github.com/iissnan/hexo-theme-next themes/next。
查看themes会多出一个next文件夹，这就是主题文件夹。
- 查看标签列表（git命令行）
- 切换到最新版本5.14，
git checkout tags/v5.1.4
输出：
HEAD is now at 4f75fe5… 2018 NY update. - 更新主题Next
cd themes/next
git pull
- 切换成NexT主题，在hexo根文件夹下，编辑_config.yml文件（根目录配置文件）
theme: next
然后在dos下进入根目录（HexoBlog）输入命令测试效果。
- 切换主题风格，修改主题目录配置文件（/themes/next/_config.yml）,在下图中选出最喜欢的主题风格。
配置Github，修改根目录配置文件
修改成以下信息
deploy:
type: git
repository: git@github.com:用户名/用户名.github.io.git
branch: master
测试输入以下命令就可以实现，本地推送到github中。
hexo d -g
然后通过 用户名.github.io
就可以访问线上地址。
绑定域名
在github项目中setting中配置域名，如图设置zxcoding.cn.(图中www.zxcoding.cn应改为zxcoding.cn)
设置本地Hexo中CNAME在如下位置新建CNAME文件，不加后缀。
文件内容就是你的域名
这些全部设置完成后，此时你并不能要申请的域名访问你的博客。接着你需要做的是在hexo根目录的source文件夹里创建CNAME文件，不带任何后缀，里面添加你的域名信息，如：penglei.com。实践证明如果此时你填写的是www.penglei.top那么以后你只能用www.penglei.top访问，而如果你填写的是penglei.top。那么用www.penglei.top和penglei.top访问都是可以的。重新清理hexo,并发布即可用新的域名访问。
zxcoding.cn
登录你的域名商，本文是腾讯云。设置如下三个域名解析，图中两个ip都是github提供的ip，可以通过ping codingzhangxin.github.io得到一个，另一个是官网ip（有很多个）。192开头的是github官方提供的，另一个是自己的项目ip。可以自己ping出来
然后在本地dos下输入hexo d -g 重新生成发布博客，就可以通过域名访问你的博客了。
显示的效果可能不同，下面加入关于，标签，分类等功能。
加入分类，关于，标签等
- 编辑themes/next/_config.yml，Ctrl+F查找到menu标签，加入自己想要的功能：
menu:
home: / || home //首页
about: /about/ || user //关于
tags: /tags/ || tags //标签
categories: /categories/ || th //分类
archives: /archives/ || archive //归档
schedule: /schedule/ || calendar //日程表
sitemap: /sitemap.xml || sitemap //站点地图
然后在dos下，用命令创建功能页面
hexo new page "tags"
hexo new page "about"
hexo new page "categories" #....不列举了
hexo new page “” 是创建页面，和_post是平级关系
hexo new “” 是创建文章，在_post下。
- 然后输入描述信息，在tags目录下编辑index.md文件
其他的功能页面的index.md均修改成类似形式。
---
title: tags
date: 2018-12-04 10:48:44
type: "tags"
---
再重新hexo s 就可以预览效果，hexo d -g 远程查看github上效果或者绑定域名效果。
设置动态背景
-主题配置文件中找到canvas_nest，设置成ture就OK啦。
# Canvas-nest
canvas_nest: ture
在右上角或者左上角实现fork me on github，效果如下
-
在GitHub Ribbons或GitHub Corners选择一款你喜欢的挂饰，拷贝方框内的代码：
-
将刚刚复制的挂饰代码，添加到Blog/themes/next/layout/_layout.swig文件中，添加位置如下图所示(放在
下方)：
添加添加RSS
-进入博客主目录下，安装Hexo插件
npm install --save hexo-generator-feed
- 安装成功之后，编辑Blog/_config.yml文件，在文件末尾添加
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
- 配置主题_config.yml文件，command+f搜索rss，在后面加上/atom.xml
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml //注意：有一个空格
之后，终端输入hexo s查看效果
修改文章内链接文本样式
- 修改Blog/themes/next/source/css/_common/components/post/post.styl，在末尾添加CSS样式：
// 文章内链接文本样式
.post-body p a{
color: #0593d3; //原始链接颜色
border-bottom: none;
border-bottom: 1px solid #0593d3; //底部分割线颜色
&:hover {
color: #fc6423; //鼠标经过颜色
border-bottom: none;
border-bottom: 1px solid #fc6423; //底部分割线颜色
}
}
设置后，效果是博客链接点击前后都会有颜色变化。
修改底部Hexo，Next标签样式
修改Blog\themes\next\layout_macro\post.swig中文件，command+f搜索rel=“tag”>#，将#替换成。输入以下命令，查看效果：
hexo clean
hexo s
在文章末尾添加“文章结束”标记
- 在路径Blog\themes\next\layout_macro文件夹中新建passage-end-tag.swig文件,在passage-end-tag.swig添加以下内容，直接用文本编辑器打开，粘贴以下内容后保存
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>
- 打开\themes\next\layout_macro\post.swig，在post-body之后，post-footer之前（post-footer之前两个DIV），添加以下代码：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
添加位置如图所示
- 修改主题配置文件_config.yml，在末尾添加：
`# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true`
配置完成之后，效果如下：
注意Hexo s启动后，hexo可以热部署，实时查看效果。但是有些功能可能需要重启才能查看效果。
设置头像并设置动画效果
- 在/_config.yml中添加头像链接地址：
//添加头像地址
avatar: [ http://....]
- 设置头像圆角并旋转，打开/themes/next/source/css/_common/components/sidebar/sidebar-author.styl，添加以下代码：
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
修改代码块``自定义样式
- 打开\themes\next\source\css_custom\custom.styl，添加以下代码：
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
侧边栏社交小图标设置
- 打开主题配置文件_config.yml（themes/next/_config.yml），command+f搜索Social，将你有的社交账号前面的#号去掉。格式为：
- [社交平台名]: [社交地址] || [图标名称]
social:
GitHub: https://github.com/codingzhangxin || github
CSDN: https://blog.csdn.net/qq_35180973?t=1 || envelope
Google: https://plus.google.com || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
-
效果图如下：
-
图标可以去Font Awesome Icon网站去找，找到后复制名字到相应的位置即可。
主页文章添加阴影效果
- 打开\themes\next\source\css_custom\custom.styl，添加以下代码
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
基础篇设置完成，下面进入进阶篇，实现各种高大上的Hexo应用。
基于Hexo和Github的炫酷个人博客（基础篇）
基于Hexo和Github的炫酷个人博客（进阶篇）
1921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
