使用Hexo搭建个人博客

资源和皮肤

使用hexo进行博客搭建，选用cofess大佬开发的pure主题

• hexo中文官网
• hexo Github地址
  hexo pure主题中文文档
• hexo pure主题GitHub地址

安装

必须拥有nodejs环境

全局安装hexo

npm install hexo-cli -g

初始化一个文件夹存放你的博客内容

hexo init hexo-blog

启动博客

cd hexo-blog
hexo server

这时候访问http://localhost:4000就能看到博客页面了。 但里面还没有文章，样式也是默认的。

从gitlab上下载pure主题的源码，放到博客目录的themes/pure文件夹下，并修改博客目录下的_config.yml，将theme参数设置为pure。

主题安装后，博客的配置都在博客目录的_config.yml和主题目录的_config.yml文件中，配置项比较多，请参照官方文档和主题文档进行配置。

基本配置

博客目录下_config.yml常用配置：

配置名	说明
title	网站标题，主题的配置文件中也有此配置，会以主题的配置为准。
description	博客主页的网站描述信息，用于搜索引擎收录，只有主页会有
keywords	网站的关键字信息，用于搜索引擎收录，每个页面都会有
author	作者
language	网站语言，中文填：zh-CN
timezone	市区，一般填上海的时区：’Asia/Shanghai’
url	网站地址，填域名即可
permalink	页面路径生成规则，默认是日期加文件名，我这里改成了日期时间：:year:month:day:hour:minute:second/
theme	主题名称，要和themes下的主题文件夹名称相同

主题配置比较多，一定要看一下主题的中文文档

主题目录下（themes/pure）_config.yml常用配置：

配置名	说明
menu	配置菜单，不需要启用的菜单可以注释掉
site	网站信息，配置网站的标题、图标、公告
config	主题色、布局方式等配置
donate	打赏设置，可以配置打赏的名称、图片地址
share	分享信息配置，分为PC端和手机端两种
comment	评论系统配置，比较多下面单独介绍

文字相关的很多可以在themes/pure/languages文件夹下的yml文件中配置。

写博客

使用hexo new 'Hello world!'来新建一个文章，文章存放在source/_posts文件夹下。文章开头会有---的头部内容，表示文章一些属性。

配置名	说明
title	文章标题，会影响页面的标题和文章路径的生成
date	创建时间，也会影响文件路径的生成
categories	文章的分类
tags	文章的标签

配置评论系统

评论系统的选用从gitalk到disqus，最后选择了valine。优点是不需要登陆、样式修改简单。

首先需要在主题配置中comment.type配置为valine，然后在valine配置中设置leancloud的appid和appkey。valine的样式可以在themes/pure/layout/_script/_comment/valine.ejs中修改，本博客的配置如下：

#veditor {
    background-image: url(https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: rgba(255, 255, 255, 0);
    resize: vertical
}
#vcomments .vheader .vnick {
      width: 31%;
      border: 2px solid #dedede;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px
}

#vcomments .vheader .vmail {
      width: 31%;
      border: 2px solid #dedede;
      margin-left: 34px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px
}

#vcomments .vheader .vlink {
      width: 31%;
      border: 2px solid #dedede;
      margin-left: 34px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px
}
#vcomments .vcards .vcard {
    padding: 15px 20px 0 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12);
    transition: all .3s
}

#vcomments .vcards .vcard:hover {
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, .12)
}

#vcomments .vcards .vcard .vh .vcard {
    border: none;
    box-shadow: none;
}
#vcomments .vpanel .vwrap {
    border: 1px solid #2d2d2da3!important;
}
.v[data-class=v] .veditor{
    min-height: 6rem;
}
button.vsubmit.vbtn{
    background: #ce1b1b!important;
    color: #fff!important;
    border: none!important;
}
.v[data-class=v] .vrow{
    padding: 5px 0;
}
.v[data-class=v] .markdown{
    display: none;
}