个人博客搭建（hexo+GitHub）

title: 个人博客搭建（hexo+GitHub）
date: 2018-10-19 21:47:44
categories: # 这里写的分类会自动汇集到 categories 页面上，分类可以多级

实用技术 # 一级分类
个人博客 # 二级分类
tags: # 这里写的标签会自动汇集到 tags 页面上
实用 # 可配置多个标签，注意格式
个人博客 # 可配置多个标签，注意格式

在使用hexo+GitHub搭建个人博客的时候可以参考这个链接，在这篇文章中作者详细介绍了搭建博客的详细过程，我写这片博客主要是以后迁移方便，以及还有一些需要设置的地方。下面详细介绍：

本地环境配置

需要软件

搭建博客首先需要基本的环境与软件，分别是:

Git

Node.js

hexo

网上关于这三种工具的安装有很多例子，并且在上面提到的连接里面也有介绍，本文就不多加叙说。

参考这个链接

主题配置

Next主题配置

hexo启动以后默认的主题是landscape，我这边选用Next主题，主要是因为这个主题看着美观大方。大部分的配置在参考文件中已经说明了，我这里只说一些需要注意的地方，以及高级的一些配置。

图片的存放于使用

图片的使用只在基本上在三个地方使用，a.头像，b.支付图片，c.文章图片。

因为主题的配置文件_config.yml是在注意文件夹里面的一级目录，与source文件夹属于同一级别。但是，在配置图片的时候，图片的配置路径与source里面的目录是一致的

将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在）配置为：

avatar: /uploads/avatar.png

或者放置在 source/images/ 目录下配置为：

avatar: /images/avatar.png

头像设置为圆形，且可以旋转

设置头像:
打开themes/next/_config.yml找到avatar: /uploads/images/avatar.jpg;其中images文件在themes/nextsource/uploads中,将你的头像图片放到images中,一般默认命名为avatar,记得改下后缀就可以了。

设置旋转效果:
打开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;

  /* 鼠标经过头像旋转时间 */
  -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);
}

为首页文章添加阴影边框效果

打开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);
  }

在每篇文章末尾统一添加“本文结束”标记

效果如下:

0.png

实现方法如下:

在\themes\next\layout\_macro下新建 passage-end-tag.swig 文件,并添加以下代码：

    
        {% if not is_index %}
            -------------本文结束感谢阅读-------------
        {% endif %}

打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer （post-footer之前有两个DIV）之前添加如下代码：
```
 
   {% if not is_index %}
     {% include 'passage-end-tag.swig' %}
   {% endif %}
 
```

1.png

图片](/uploads/images/0.png)

打开主题配置文件_config.yml在末尾添加以下字段：
```
 passage_end_tag:
   enabled: true
```

到此,就大功告成了.

实现文章字数统计和阅读预估时间