用Hexo搭建个人博客网站（超详细教程包括配置你的网站）

不花一分钱使用Hexo搭建个人博客网站，从无到发表文章及更新教程

本文较长,也是楼主呕心沥血参考网上各种教程加上自己踩坑完成的,只希望能对你有所帮助。

另外文章长达两万字，大家可以则需阅读。

0.首先介绍一下hexo是怎么搭建的博客?

本地渲染好 HTML 后，上传到服务端，代表作品就是 hexo。
我们在本地写好 markdown 之后，在本地将 markdown 渲染成 HTML，然后将渲染好的 HTML 上传到服务端。

我这里采用hexo+icarus实现的

一、搭建

用 Hexo 搭建，要是有一点点前端 Node 的使用经验更佳，没有当然也没关系，因为与之相关的命令并不多。使用 Hexo 需要提前在电脑上安装好 Node 和 Git ，安装成功后，就可以开始 Hexo 的安装了。步骤如下：
1.安装hexo

npm install -g hexo-cli

2.在本地创建一个博客目录

hexo init blog

上面这个命令执行完后，会在本地创建一个 blog 目录，这里边就是独立博客所必须的一些文件，然后进入到这个目录中，执行 npm install 命令，安装相关的依赖。
3.安装完成后，会生成如下目录：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

这里几个文件/文件夹，我们先来关注其中两个 _config.yml 和 themes 目录， _config.yml 文件中，我们可以做网站的一些基本配置，例如网站的 title，描述，关键字、图标等，这些配置大都见名知意。如下：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: '王硕个人博客' 
subtitle: '王硕个人博客' 
description: '发表一些技术相关的文章以及自我反思等' 
keywords: 'java,王硕,wsuo,springboot' 
author: '王硕' 
language: zh-CN 
timezone: ''

配置完成后，定位到 blog 目录，执行 hexo s 就可以在本地启动项目了，启动成功后，浏览器中输入 http://localhost:4000 就可以看到网站了。

可以参考hexo命令

但是我在这里遇到了两个问题

1.命令行报错:YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 10, column 7:

解决方案: 由于是yml文件,在每一个冒号后面都要加空格,我有一个忘记加了没看到,所以报错

title: '王硕个人博客'

就是上面的冒号后面要加空格

2.登陆博客之后中文乱码

解决方案: 将那个yml文件的编码改成UTF-8格式
我用的是edit-plus打开的,右下角可以直接改,一般的编辑器都可以改的

好了,到目前为止算是有一个有模有样的博客网站了

二、修改主题

一般来说，主题都会自己配置一个，个人感觉 Hexo 的生态还是比较丰富的，有很多可选的主题，Hexo 默认使用的主题是 landscape 。博客在本地跑起来之后，接下来就是修改主题，主题修改的第一步就是先选一个自己认为好看的主题，选好之后，首先将之克隆到 ./themes 目录下，这个目录下原本有有一个 landscape 文件夹，里边放的默认的样式，当然开发者也可以直接将主题文件下载好拷贝进来，但是我还是建议使用 clone ，使用 clone ，假如有一天这个主题更新了，只需要 pull 一下就可以获取到最新样式了。

不会用git的可以参考我的另一篇文章git命令

以 hexo-theme-next 主题为例， clone 命令如下：

cd D:\develop\blog\blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

克隆成功后，修改 hexo 的 _config.yml 文件，将主题修改为 next，如下：

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

主题创建好之后，接下来就是对主题的配置了，这个比较容易，直接参考官方文档即可。配置完成后，执行如下命令，即可看到新的主题效果：

hexo clean
hexo g
hexo s

三、绑定到GitHub

绑定到 Github 步骤也很简单，首先以自己的GitHub ID.github.io 为名创建一个 public 仓库，例如我的 ID 为 wsuo，创建的仓库如下：

wsuo.github.io

创建成功之后，修改 hexo 的 _config.yml 文件，配置 GitHub 地址，如下：

deploy:
  type: git
  repo: git@github.com:wsuo/wsuo.github.io.git
  branch: master

这里根据自己的地址来配置即可，配置完成后，执行如下命令：
在站点目录下还要在 hexo init 的根目录下执行输入下面的插件安装：

npm install hexo-deployer-git --save
然后启动:
hexo g
hexo d

执行完成后，就可以将数据上传到 GitHub 了
上传成功后，访问 https://wsuo.github.io 就可以看到自己的个人站点了，这是 GitHub 默认给我们提供的域名。
如果你对 GitHub 提供的域名不满意，也可以自己申请一个域名，分分钟就配置好了。

如果你访问不了你的博客:

登陆GitHub查看仓库的setting,然后往下翻找到github pages,有一个蓝色的网址点击,那个就是了.

每次更新文章需要做:

 hexo clean // 清除
 hexo g (generate)
 hexo d (deploy)

四、配置博客

好了，到现在为止你已经可以正常的访问了，是不是挺开心的，但是有一点就是他看起来太丑了，下面我们呢就来优化一下界面，提升一下它的颜值。

1. blog配置

好了！准备进入正题！下面将带领各位怎么将一个空空如也的blog装饰成博主一样有那么一点起色的网站。博主将从零搭起，所有的操作都将在博主的笔记本上为大家做出示范。

1.1 next主题基本配置

首先我们先下载next主题在这里选择大家需要的版本进行下载。下载完成后，我们的blog便有了两个主要的配置文件，分别是hexo自带的_config.yml文件和next主题自带的_config.yml文件，为了方便，我们将hexo自带的_config.yml文件称为站点配置文件，next主题带的_config.yml文件称为主题配置文件。

首先，第一步我们来更换一下blog的主题，这一步又分为三个小步骤：

将下载下来的next主题文件夹重命名为 next 。
将next文件夹移入blog所在的文件夹的themes 文件夹中，在这里，本人是/blog/themes
修改站点配置文件，在配置文件中搜索theme，将其的值改为next。注意冒号：后面一定要有一个空格
// 站点_config.yml 文件

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

现在主题就已经配置好了，接下来我们优化一下：继续修改站点配置文件：
// 站点_config.yml 文件

# Site
title: Eternal_zttz #网站的名字
subtitle: Saty Hungry，Stay Foolish #网站的副标题
description: 个人blog网站 #个人的描述
keywords:
author: Eternal_zttz #博主的名字
language: zh-CN #blog的语言  zh-CN 代表中文
timezone:

然后我们修改主题配置文件：
// 主题_config.yml 文件，搜索Schemes可找到

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

这是next的基本页面布局，默认为Muse布局，在这里，我们选择第三个Pisces

很好，接下来，我们在终端命令行cd 进入blog所在目录，如我是直接命名为blog，所以cd blog:

接着运行：

hexo s

ok，我们的blog已经略有起色，样式已经离我们的最终样式八九不离十了，接下来，我们将对其的各个部分进行优化：

1.2 next主题侧边栏优化

1.2.1 next主题页面生成

我们可以看到，hexo默认生成的页面只有两个，即首页和归档 页面，那么接下来，我们来生成我们所需的页面：

1.2.1.1 页面的生成

首先，我们修改主题配置文件：
// 主题_config.yml 文件，搜索menu可找到

menu:
  home: / || home   #主页
  about: /about/ || user  #关于
  tags: /tags/ || tags   #标签
  categories: /categories/ || th  #分类
  archives: /archives/ || archive  #归档
  #schedule: /schedule/ || calendar  #日程表
  #sitemap: /sitemap.xml || sitemap   #站点地图
  #commonweal: /404/ || heartbeat    #公益404

可以看到，大部分的都是注释掉了的，这里我已经把我需要的页面注释解除了，大家可以自行考虑需要的页面。
在这里，**斜线//**之间的文字是该页面的名字，如／about／ ，说明我们要跳转的页面的名字为about , 而||后的文字是这个页面的图标名字.
这时候我们主页上就可以看到这几个页面，接下来实现页面的跳转：

1.2.1.2 生成about页面

终端回到blog的根目录.运行：

hexo new page "about"

ok,接下来关于页面的markdown自己编写就行。

1.2.1.3 生成tags页面

终端回到blog的根目录.运行：

hexo new page "tags"

1.2.1.4 生成categories页面:

终端回到categories的根目录.运行：

hexo new page "categories"

tags和categorise页面不用自己布局，会自动根据我们的blog的布局好

1.2.2 站内搜索的实现

文章写多了，想一篇篇的去寻找可不容易，这时候，我们便需要一个站内的搜索功能，即服务别人，也能方便自己。
首先，我们在终端进入blog的根目录下，执行以下命令：

$ npm install hexo-generator-searchdb --save

接着，我们进入站点配置文件_config.yml,在最后新增以下内容：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

最后，打开主题配置文件_config.yml,搜索local_search,其值改为true：

# Local search
local_search:
  enable: true

ok，现在站内搜索就大功告成了，一切准备就绪～

1.2.3 个人头像设置

要设置自己的侧边栏头像，首先，准备一张头像的图片，命名为header.jpg，然后，将图片放在/blog/themes/next/source/images/文件夹下，接着修改主题配置文件，搜索avatar

avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
   - url: /images/avatar.gif
   + url: /images/header.jpg     #图片的地址
  # If true, the avatar would be dispalyed in circle. 
  rounded: false   #设置图片是否为圆形，当图片为正方形时为圆，否则为椭圆
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1 #图片的透明度
  # If true, the avatar would be rotated with the cursor.
  rotated: false  #设置鼠标移到图片上后头像是否转动

将url里面的值改为图片的地址就可以了

1.2.4 点击个人头像回到主页面

首先，我们打开文件/blog/themes/next/layout/_macro/sidebar.swig,然后，修改以下内容：

+ <a href="/">
    <img class="site-author-image" itemprop="image"
       src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
       alt="{{ author }}" />
+ </a>

ok，重新部署一下，就可以看到效果了

1.2.5 RSS订阅设置

首先，我们在终端命令行进入blog所在的目录，运行：

$ npm install --save hexo-generator-feed

接着，打开站点配置文件，在文件的末尾添加：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

然后打开主题配置文件，搜索rss，将其设置成如下所示，注意冒号后要加上一个空格

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

OK，all right

但是,你知道RSS是啥吗?

RSS全称为Really Simple Syndication（简易信息聚合），是站点用来和其他站点之间共享内容的一种简易方式
，RSS以其方便快捷的工作方式，为广大网编带了工作效率的跨越，但是也助长了信息高速重复
。这是百度百科对其解释，我们可以理解为它是一种描述和同步网站内容的格式，用于定制个性化的内容推送信息服务。在如今信息爆炸的时代，它最大的用处便是按照你自己的意愿，帮助你过滤调不需要阅读的信息，不会漫无目的地阅读。更灵活的一点是，rss订阅是跨平台的，可以按照自己的意愿去订阅不同网站和咨询平台，当然包括你所喜欢的某些个人博客。

在浏览器上使用rss订阅

这里我推荐一个chrome上的一个订阅插件，打开谷歌浏览器，进入谷歌应用商店，搜索rss;

添加安装即可，安装完成后会提示你注册一个账号，按照提示注册完成即可。完成插件安装之后，在浏览博客或者其他网站时，点击rss订阅图标，就可以正常订阅成功。

在浏览器订阅后，假如订阅的站点有更新，插件就会推送和提醒

除了在浏览器订阅的方式，还有在客户端上订阅的使用方式，而且订阅功能更为强大。rss订阅的客户端有很多，各个平台的也都有，Windows、Mac、Android、Ios都用有不少客户端。

1.2.6 社交栏设置

在主题配置文件中，搜索social，定位到如下代码段，把social的注释取消掉，接下来，就看你需要显示什么社交网站，写上网站名+网址就行。

social:
  GitHub: https://github.com/yourname || github   #网站名：网址 ||图标名
  简书: http://www.jianshu.com || heartbeat
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || 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

1.2.7 实现侧边栏页面的圆角

首先，我们打开/blog/themes/next/source/css/_variables/Pisces.styl文件，里面定义了一些常量，用来定义blog样式表的值。
然后，找到$border-radius

// Borders
// --------------------------------------------------
$box-shadow-inner                 = initial;
$box-shadow                       = initial;

$border-radius-inner              = initial;
$border-radius                    = initial;

可以看到默认为初始值，即为0
改变为$border-radius = 16px;
这时候，下面的一个侧边栏弧度就已经改好了

接着，打开/blog/themes/next/source/css/_schemes/Pisces/_layout.styl文件

.header-inner {
  position: absolute;
  top: 0;
  overflow: hidden;
  padding: 0;
  width: $sidebar-desktop;
  background: white;
  box-shadow: $box-shadow-inner;
 -border-radius: $border-radius-inner;
 +border-radius: $border-radius;//修改上面的侧边栏的弧度

.content-wrap {
  float: right;
  box-sizing: border-box;
  padding: $content-desktop-padding;
  width: $content-desktop;
  background: white;
  min-height: 700px;
  box-shadow: $box-shadow-inner;
 - border-radius: $border-radius-inner;
 + border-radius: $border-radius; //修改整个文章页面的弧度

ok 大功告成，到此为止，我们文章的侧边栏就已经优化完毕了，当然，还有更多操作，大家可以去尝试，不过，建议没有把握之前先做好blog的备份。

2. next主题主页面优化

在上面我们已经把侧边栏的优化都已经完成了，不得不说，刚完成这一部分时我还是有很大的成就感的，接下来，我们将对我们blog的主页面进行进一步的优化。

2.1 增加fork me on github 图标

在这里GitHub地址选择一款自己喜欢的图标，然后把图标旁的代码拷贝一份，放到

blog/themes/next/layout/_layout.swig

这个文件夹中，注意要放到<div class="headband"></div>的下方
OK,这就大功告成了。

2.2 文章背景出现阴影边框

这个效果实现起来很简单，打开blog\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);
  }

重新部署一下即可实现。

2.3 “ 阅读全文 ” 按钮改弧度

这个功能和侧边栏改弧度的操作是差不多的，进入文件/blog/themes/next/source/css/_variables/Pisces.styl中，把以下代码修改一下：

// Button
 1. $btn-default-radius           = 2px
 2. $btn-default-radius           = 16px
$btn-default-bg               = white
$btn-default-color            = $text-color
$btn-default-border-color     = $text-color
$btn-default-hover-color      = white
$btn-default-hover-bg         = $black-deep

2.4 为文章内容添加统计功能，文字总数+阅读时长

$ npm install hexo-symbols-count-time --save

进入站点配置文件，为blog配置统计功能，将以下代码复制到最后：

symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true

进入主题配置文件，搜素symbols_count_time,然后把要显示的改为true.
更深入的操作大家可以看github上的说明。
PS：如果大家配置完成，然后检查无误后，打开页面依旧没有显示，不要着急，第一次显示可能会比较慢，可以休息一会。

2.5 为文章中的代码块增加一键复制功能

在next v6.3.0 版本中，这个功能已经是集成了的，我们进入站点配置文件，搜索copy_button。把它的值改为true即可：

# Add copy button on codeblock
  copy_button:copy
    enable: true  #是否开启复制功能
    # Show text copy result
    show_result: true #是否显示提示的复制结果

接着，将鼠标移动到代码块中，便可以看到结果。默认按钮是中文“复制”，若是想改为英文“copy”，可进入blog/themes/next/languages/zh-CN.yml文件中，将下面部分改了即可：

copy_button: copy
copy_success: succeed
copy_failure: failed
copyright:
   author: 本文作者

这个文件夹中保留了所有的中英部分的对应关系，大家想改各标签名字的话，可以将这个文件中对应的部分改了即可。

2.6 增加版权信息

博文写好了，怎么说也是作者的一番心血，我们不去抄袭别人的作品，也不希望别人什么都不说带走我们的作品，所以，我们需要在底部做一个版权申明：
next主题中现在已经是集成了这个功能的了，我们只在主题配置文件中搜索copyright,并把enable的值改为true即可.

3. next主题底部优化

3.1为文章增加评论功能

next主题的6.x版里面已经集成了很多评论了，包括Gitment和Valine，大家有兴趣可以去试一试。
安装 utterances
utterances 的安装相当简单，因为出品了一个 Github App。

首先安装这个 App ，选择要关联评论的仓库。可以选择所有仓库，也可以只选择一个仓库。选择一个仓库比较安全。

新建仓库
不过 utterances 没有集成在 NexT 主题中，需要手动添加。

打开主题文件夹，在 layout/_third-party/comments/ 中新建文件 utterances.swig，并添加下面的内容：

{% if theme.utterances.enable %}
  <script src="https://utteranc.es/client.js"
    repo="{{ theme.utterances.repo }}"
    issue-term="{{ theme.utterances.issue_term }}"
    theme="{{ theme.utterances.theme }}"
    crossorigin="anonymous"
    async>
  </script>
{% endif %}

然后在 layout/_partials/comments.swig 中添加下面的内容：

   {% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
     <div class="comments" id="comments">
     </div>
+
+  {% elseif theme.utterances.enable %}
+    <div class="comments" id="comments">
+      {% include '../_third-party/comments/utterances.swig' %}
+    </div>
   {% endif %}

最后在主题配置文件中添加如下配置：

utterances:
  enable: true
  repo: # owner/repo
  issue_term: # pathname, url, title, og:title [ISSUE NUMBER] or [SPECIFIC TERM]
  theme: # github-light or github-dark

三个配置选项都是必填的，第一个是配置 issue 所在的 repo，第二个是如何决定如何寻找对应的 issue，第三个决定采用亮或暗的主题。

然后可以愉快的使用了～

3.2增加在线联系Daovoice

链接
注册完成后会得到一个 app_id

daovoice(‘init’, {
app_id: “*******”
});
daovoice(‘update’);

记下这个app_id的值，然后打开/blog/themes/next/layout/_partials/head/head.swig文件，在如下位置插入代码：

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

接着打开主题配置文件，在最后写下如下代码：

# Online contact 
daovoice: true
daovoice_app_id: 这里填你的刚才获得的 app_id

3.3 增加站点访问人数和总访问量

打开主题配置文件，搜索busuanzi，将enable的值改为true即可。

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

五、发表博客

发表文章
注意：如果自己直接新建文件，一定要记得加上文件最上方的参数，即下面的相关内容，还有编码请用 UTF-8。

关于文件最上方的参数，参见 Hexo 官方文档的 Front-matter 和页面变量，下面是我的总结：

# ！！！！！！！！！！
# 每一项的 : 后面均有一个空格
# 且 : 为英文符号
# ！！！！！！！！！！

title:
# 文章标题，可以为中文

date:
# 建立日期，如果自己手动添加，请按固定格式
# 就算不写，页面每篇文章顶部的发表于……也能显示
# 只要在主题配置文件中，配置了 created_at 就行
# 那为什么还要自己加上？
# 自定义文章发布的时间

updated:
# 更新日期，其它与上面的建立日期类似
# 不过在页面每篇文章顶部，是更新于……
# 在主题配置文件中，是 updated_at

permalink:
# 若站点配置文件下的 permalink 配置了 title
# 则可以替换文章 URL 里面的 title（文章标题）

categories:
# 分类，支持多级，比如：
# - technology
# - computer
# - computer-aided-art
# 则为 technology/computer/computer-aided-art
# （不适用于 layout: page）

tags:
# 标签
# 多个可以这样写 [标签1,标签2,标签3]
# （不适用于 layout: page）

description:
# 文章的描述，在每篇文章标题下方显示
# 并且作为网页的 description 元数据
# 如果不写，则自动取 <!-- more -->
# 之前的文字作为网页的 description 元数据

keywords:
# 关键字，并且作为网页的 keywords 元数据
# 如果不写，则自动取 tags 里的项
# 作为网页的 keywords 元数据

comments:
# 是否开启评论
# 默认值是 true
# 要关闭写 false

layout:
# 页面布局，默认值是 post，默认值可以在
# 站点配置文件中修改 default_layout
# 另：404 页面可能用到，将其值改为 false

type:
# categories，目录页面
# tags，标签页面
# picture，用来生成 group-pictures
# quote？
# https://io-oi.me/tech/hello-world/

photos:
# Gallery support，用来支持画廊╱相册，用法如下：
# - photo_url_1
# - photo_url_2
# - photo_url_3
# https://io-oi.me/tech/hello-world/

link:
# 文章的外部链接
# https://io-oi.me/tech/hello-world/

image:
# 自定义的文章摘要图片，只在页面展示，文章内消失
# 此项只有参考本文 5.14 节配置好，否则请勿添加！

sticky:
# 文章置顶
# 此项只有参考本文 5.15 节配置好，否则请勿添加！

password:
# 文章密码，此项只有参考教程：
# http://shenzekun.cn/hexo的next主题个性化配置教程.html
# 第 24 节，配置好，否则请勿添加！
# 发现还是有 bug 的，就是右键在新标签中打开
# 然后无论是否输入密码，都能看到内容

六、还有一些问题

1.Hexo之next主题设置首页不显示全文(只显示预览)

next是Hexo的一个博客主题，这个主题，首页显示的文章列表，每一遍都是全文，不方便概览。

进入hexo博客项目的themes/next目录
用文本编辑器打开_config.yml文件
搜索"auto_excerpt",找到如下部分：

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

2.头像设置

打开/blog/themes/next/source/images,找到你想设置为头像的图片,然后打开主题配置文件,我的是在154行的位置

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/header.jpg

修改为你头像的路径就好了

后话：后来还是没有显示出来，我费尽周折想起了一个解决方案：

我是这样解决的，既然他总是显示默认的头像图片，那他肯定有路径，我不需要知道路径在哪里配置，只需要找到那个默认头像然后用我想要的图片把它给替换掉，同名同路径肯定能显示，于是我照做了，成功了！！！自底向上解决问题，另外默认头像的位置是themes\next\source\images\avatar.gif

3.侧边栏社交小图标设置

图标库,将名字复制在配置文件的相关位置即可

social:
  GitHub: https://github.com/wsuo || github	#网站名：网址 ||图标名
  E-Mail: mailto:ws2821@yeah.net || envelope
  #Google: https://plus.google.com/yourname || 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

social_icons:
  enable: true
  icons_only: false
  transition: false

4.设置网站的图标 Favicon

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

favicon:
  small: /images/header.jpg
  medium: /images/header.jpg
  apple_touch_icon: /images/header.jpg
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

5.侧边栏推荐阅读

打开 主题配置文件 修改成这样就行了 (links 里面写你想要的链接):

# Blog rolls
links_icon: link
links_title: 联系我
links_layout: block
#links_layout: inline
links:
  wsuo的CSDN博客: https://blog.csdn.net/weixin_43941364

6.在网站底部加上访问量

第一种方法：
打开\themes\next\layout\_partials\footer.swig文件, 在 copyright 前加上这句话，我是在文章的开头也就是第一行添加的：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#

然后再合适的位置添加显示统计的代码，我是在45行左右：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
-->
{% endif %}

如果你使用了上面的方法就不要在使用下面的这个方法了，因为两个都用会出错，下面介绍第二种方法。

第一种引入脚本的方法适用于任何类型的个人站点，如果你使用的主题是NexT，那么你可以很方便的进行不蒜子的访客统计设置，仅仅只需要一步：

打开主题的配置文件/theme/next/_config.yml，找到如下配置：

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 访客数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>  阅读数
  page_pv_footer:

将enable的值由false改为true，便可以看到页脚出现访问量

7.增加本站运行时间

<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("02/02/2020 20:02:02");//修改为自己的blog建站时间
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
    if (i<10)
    {i="0" + i};
    return i;
}
show_date_time();
</script>

在原next主题版本信息的下方增加上面的代码，代码在不同的位置会有不同的效果。

8.next主题如何添加动态背景

如果next主题在5.1.1以上的话就不用我这样设置，直接在主题配置文件中找到canvas_nest:
false，把它改为canvas_nest: true就行了（注意分号后面要加一个空格）

打开 next/layout/_layout.swig
在 < /body>之前添加代码(注意不要放在< /head>的后面)

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打开 /next/_config.yml,在里面添加如下代码：(可以放在最后面)

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

七、补充内容

博客截图
到目前为止如果你跟着我一步一步的做的话我们的博客已经很棒了，但是并不是说不能继续优化了，追求完美是每个人的目标，所以我们继续

1.增加网易云音乐

音乐是不应该被辜负的，所以，我们可以在侧边栏加上网易云的音乐外链，具体方法为：

打开网易云音乐网页版，选择自己想要放上去的音乐。
在播放页面选择外链播放器，选择一个自己喜欢的样式。
复制其中的代码
打开/blog/themes/next/layout/_macro/sidebar.swig 文件，将代码复制到适合的位置，例如，我是在约161-162行增加

{% endif %}
         {% include custom_sidebar %}
       </div>
     </section>

 +  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=5079881&auto=0&height=32"></iframe>

     {% if display_toc and toc(page.content).length > 1 %}
     <!--noindex-->
       <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
         <div class="post-toc">

就只用加带加号的那一行

如果你去网易云发现大部分的歌都有版权不让你使用外链的话，也可以直接使用我的代码，就是我的歌。

2.修改界面宽度

之后我发现主页太短了，以至于两边有大量的空白区域，这里让他们更宽一些，看起来更美观，因为现在很多显示屏都是宽屏的，尤其是台式机配的屏幕，比例比横宽比例比笔记本要大很多，这样一来就导致了next主题默认的配置中，文章的两侧留白太多，阅读体验不好。可以通过修改next主题的文章页面宽度来解决。

解决方案：
请看我的另一篇文章，里面还有很多问题：传送门

八、结语

第一篇两万字的博客，终于码完了，虽然最后很多功能我自己也没有实现，因为很多用不到来的功能，但是为了方便大家也都列出来了，如果你对我的文章感兴趣，欢迎留言或者私信我.

我的Github地址:
https://github.com/wsuo
我的个人网站地址:
https://wsuo.top

参考文章：
1.hexo高阶教程next主题优化
2.hexo的next主题个性化教程:打造炫酷网站
3.Hexo搭建博客的个性化设置
4.打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化
5.hexo next主题优化，打造个人精致网站

今天吃香菇酱

发布了25 篇原创文章 · 获赞 20 · 访问量 5703

私信关注