Hexo-GitHub搭建个人博客配置教程

摘要：创建一个自定义个人博客，即可以便于知识的记录，又可以分享知识。然而，诸多技术社区虽有便捷的优点，同时也存在限制性和专业化的问题。自己从头写网站成本较高，故而作者采用github建站，既可以支持markdown文档编写，又可以与github账号打通，便于资料上传保存。仅仅建站完成还是不够美观和功能扩展。这里github结合诸多插件可以实现，本文重点介绍Hexo的配置操作，具体以下实现可以根据需要选择。（本文原创，转载注明出处.）

前提准备

安装Node.js

Node.js下载地址：https://nodejs.org/en/download/

安装Git软件

Git软件下载地址：https://git-scm.com/download

安装hexo框架

初始化hexo

Hexo官方网站：https://hexo.io/zh-cn/
在电脑合适的位置新建一个文件夹存放博客。本文中取名为MyBlog文件夹。控制台命令行使用cd命令进入到Blog文件夹，输入以下命令进行初始化：

hexo init  # 初始化

安装依赖包:

hexo install # 安装依赖包

测试本地运行

hexo g   # 等同于hexo generate，生成静态文件
hexo s   # 等同于hexo server，在本地服务器运行

部署到Coding以及GitHub上

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    github: https://github.com/DimpleFeng/dimplefeng.github.io.git,master
    coding: https://git.coding.net/DimpleFeng/test.git,master

部署

部署之前需要安装git部署插件，否则会提示Deployer not found错误。

npm install hexo-deployer-git --save

安装完毕后控制台输入:

hexo g -d  
hexo s

随后访问你的以下网址（注意替换）：yourName.github.io

写一篇新的博文

两种方法：

在博文根目录的Source文件夹的post文件夹下直接新建一个md文件
在博文根目录打来PowerShell，然后输入hexo new ‘你的标题’回车在你的post文件夹下就新建了一个博文，打开编辑即可。然后使用hexo g -d部署到线上。

$ hexo clean
$ hexo g -d

修改主题

主题官网：https://hexo.io/themes/

Administrator@PC-20160724ASED MINGW64 /e/MyBlog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

修改站点配置文件_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

next四种主题选择，打开主题配置文件找到Scheme Settings

# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

设置语言

修改站点配置文件_config.yml:language: zh-Hans

目录

新建一个页面，命名为tags。命令如下：hexo new page “tags”。在myBlog/source下会新生成一个新的文件夹tags，在该文件夹下会有一个index.md文件

---
title: 标签测试文章
date: 2018-09-17 20:31:20
type: tags
tags: 
    - Test
    - Tag
---

新建一个页面，命名为categories。命令如下：hexo new page “categories”。在myBlog/source下会新生成一个新的文件夹categories，在该文件夹下会有一个index.md文件

---
title: categories
date: 2018-09-17 20:31:40
type: categories
---

新建一个页面，命名为comments。命令如下：hexo new page “comments”。在myBlog/source下会新生成一个新的文件夹comments，在该文件夹下会有一个index.md文件

---
title: comments
date: 2018年9月18日16:16:39
type: "comments"
comments: true
---

在菜单中添加链接。编辑主题的 themes/next/_config.yml ，添加tags到menu中，如下:

menu:
home: /
archives: /archives/
categories: /categories/
tags: /tags/

高级设置

设置现在更多

<!--more-->

头像设置

打开主题配置文件_config.yml 找到Sidebar Avatar字段

# Sidebar Avatar
url: ../images/header.jpg

这是头像的路径，只需把你的头像命名为header.jpg（随便命名）放入themes/next/source/images中，将avatar的路径名改成你的头像名就OK啦！

设置RSS

1、先安装 hexo-generator-feed 插件

$ npm install hexo-generator-feed --save

2、打开站点配置文件找到Extensions在下面添加

# RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

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

rss: /atom.xml

添加搜索功能

1、安装 hexo-generator-searchdb 插件

$ npm install hexo-generator-searchdb --save

2、打开站点配置文件找到Extensions在下面添加

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3、打开主题配置文件找到Local search，将enable设置为true

修改文章内链接文本样式

打开文件 themes/next/source/css/_common/components/post/post.styl，在末尾添加
.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;
  }
}

其中选择 .post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

设置网站缩略图标

把logo图片（png或jpg格式，不是favicon.ico）放在themes/next/source/images里，然后打开主题配置文件找到favicon，将small、medium、apple_touch_icon三个字段的值都设置成/images/图片名.jpg就可以了，其他字段都注释掉。

favicon:
  small: /images/logo.png
  medium: /images/logo.png
  apple_touch_icon: /images/logo.png

添加评论

添加站点访问计数

去掉文章目录标题的自动编号

我们自己写文章的时候一般都会自己带上标题编号，但是默认的主题会给我们带上编号，很是别扭，如何去掉呢？
打开主题配置文件，找到

# Table Of Contents in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: false

  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false

设置Fork me on Github

第一步选取适合自己的样式代码:https://github.com/blog/273-github-ribbons

<a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

在主题中进行配置
/root/blog/themes/next/layout/_layout.swig文件中进行配置 /root表示的是根目录. next表示的是当前你使用的主题的样式.

具体的配置直接图片中展示:

注意的是: href 后面是自己的github的地址,记得修改哦!

文章的输入密码访问

第一步修改主题下面的文件,主要的是修改的主题下面的文件:themes->next->layout->_partials->head->head.swig

<script>
(function(){
    if('{{ page.password }}'){
        if (prompt('请输入文章密码') !== '{{ page.password }}'){
            alert('密码错误！');
            history.back();
        }
    }
})();
</script>

放置位置

实现点击的桃心效果

添加打js代码地址: http://7u2ss1.com1.z0.glb.clouddn.com/love.js
新建js代码放置,在/theme/next/source/js/src这个路劲下面,新建love.js,将上面的代码复制进去.
配置 _layout.swig文件,在 themes/next/layout/_layout.swig 文件, 最后部分添加:

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

在_layout.swig位置的设置展示:

Hexo之站点地图的搭建sitemap.xml

创建sitemap站点：hexo new page sitemap

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

如上设置,出现,sitemap.xml和baidusitemap.xml 表示站点文件生成.

之后就是百度站点地图的验证
百度站长平台进行验证: https://ziyuan.baidu.com/dashboard/index

第一次会输入一些信息,姓名,职位等信息.

后面就是添加站点:网站的根目录在那里呢？

在你的博客的本地根目录的Source文件夹内。

具体参照：https://blog.csdn.net/qq_32454537/article/details/79482914

以下功能配置及其参照文章

设置代码高亮主题
设置字体
侧边栏社交链接
开启打赏功能
友情链接
订阅微信公众号
具体配置参照文章：http://theme-next.iissnan.com/theme-settings.html

修改文章后面标签的图标
在主题下: themes/next/layout/_macro/post.swig文件:
修改模板 /themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成
Hexo的个性化配置(一) https://blog.csdn.net/kunkun5love/article/details/79130956

配置文章分享功能
https://blog.csdn.net/lanuage/article/details/78991798

配置访问统计

主题中查找 busuanzi_count

如果你使用的是NexT主题（其他主题类似），打开/theme/next/layout/_partial/footer.swig文件，拷贝下面的代码至文件的开头。