個(gè)人博客搭建（hexo+GitHub）

title: 個(gè)人博客搭建（hexo+GitHub）
date: 2018-10-19 21:47:44
categories: # 這里寫的分類會(huì)自動(dòng)匯集到 categories 頁面上戳粒，分類可以多級(jí)

實(shí)用技術(shù) # 一級(jí)分類
個(gè)人博客 # 二級(jí)分類
tags: # 這里寫的標(biāo)簽會(huì)自動(dòng)匯集到 tags 頁面上
實(shí)用 # 可配置多個(gè)標(biāo)簽，注意格式
個(gè)人博客 # 可配置多個(gè)標(biāo)簽侈净，注意格式

在使用hexo+GitHub搭建個(gè)人博客的時(shí)候可以參考這個(gè)鏈接膜赃，在這篇文章中作者詳細(xì)介紹了搭建博客的詳細(xì)過程险胰，我寫這片博客主要是以后遷移方便捌臊，以及還有一些需要設(shè)置的地方豁鲤。下面詳細(xì)介紹：

本地環(huán)境配置

需要軟件

搭建博客首先需要基本的環(huán)境與軟件或链，分別是:

Git

Node.js

hexo

網(wǎng)上關(guān)于這三種工具的安裝有很多例子惫恼，并且在上面提到的連接里面也有介紹，本文就不多加敘說澳盐。

參考這個(gè)鏈接

主題配置

Next主題配置

hexo啟動(dòng)以后默認(rèn)的主題是landscape祈纯，我這邊選用Next主題，主要是因?yàn)檫@個(gè)主題看著美觀大方叼耙。大部分的配置在參考文件中已經(jīng)說明了腕窥，我這里只說一些需要注意的地方，以及高級(jí)的一些配置筛婉。

圖片的存放于使用

圖片的使用只在基本上在三個(gè)地方使用簇爆，a.頭像，b.支付圖片倾贰，c.文章圖片冕碟。

因?yàn)橹黝}的配置文件_config.yml是在注意文件夾里面的一級(jí)目錄，與source文件夾屬于同一級(jí)別匆浙。但是安寺，在配置圖片的時(shí)候，圖片的配置路徑與source里面的目錄是一致的

將頭像放置主題目錄下的 source/uploads/ （新建 uploads 目錄若不存在）配置為：

avatar: /uploads/avatar.png

或者放置在 source/images/ 目錄下配置為：

avatar: /images/avatar.png

頭像設(shè)置為圓形首尼，且可以旋轉(zhuǎn)

設(shè)置頭像:
打開themes/next/_config.yml找到avatar: /uploads/images/avatar.jpg;其中images文件在themes/nextsource/uploads中,將你的頭像圖片放到images中,一般默認(rèn)命名為avatar,記得改下后綴就可以了挑庶。

設(shè)置旋轉(zhuǎn)效果:
打開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;

  /* 鼠標(biāo)經(jīng)過頭像旋轉(zhuǎn)時(shí)間 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;


}

 img:hover {
  /* 鼠標(biāo)經(jīng)過停止頭像旋轉(zhuǎn) 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠標(biāo)經(jīng)過頭像旋轉(zhuǎn)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);
  }

在每篇文章末尾統(tǒng)一添加“本文結(jié)束”標(biāo)記

效果如下:

0.png

實(shí)現(xiàn)方法如下:

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

    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結(jié)束<i class="fa fa-heart"></i>感謝閱讀-------------</div>
        {% endif %}
    </div>

打開\themes\next\layout\_macro\post.swig文件，在post-body 之后软能， post-footer （post-footer之前有兩個(gè)DIV）之前添加如下代碼：
```
 <div>
   {% if not is_index %}
     {% include 'passage-end-tag.swig' %}
   {% endif %}
 </div>
```

1.png

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

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

到此,就大功告成了.

實(shí)現(xiàn)文章字?jǐn)?shù)統(tǒng)計(jì)和閱讀預(yù)估時(shí)間

效果如下:

2.png