hexo是一款基于github的博客系统，使用markdown编写文章内容。在此记录一次博客搭建主要工作。

1.安装环境

1.1 git

git --version查看git版本

1.2 node

node -v查看node版本

2.初步安装Hexo

安装Hexo脚手架

npm install -g hexo-cli

初始化站点
新建一个文件加，并使用命令行进入。执行以下命令

hexo init 
cd 
npm install

一个本地博客系统就构建好了

.
├── _config.yml //博客配置，名称、关键词、作者、语言、主体等内容设置。
├── package.json//应用信息，插件等内容。
├── scaffolds//脚手架，有三个模板：文章(posts)、博客页(page)、草稿页(draft)。
├── source//博客存放处，之后通过命令可以新建tags(标签)、categories(分页)
|   ├── _drafts//草稿(初始)
|   └── _posts//文章(初始)
└── themes//主题存放处

常用命令
hexo n 新建文章
hexo clean清除缓存
hexo g生成静态页面
hexo s启动本地服务器，本地查看效果
hexo d部署到网站上

3.站点优化

3.1分类

新建分类页面

hexo new page categories

给页面添加类型
进入source->categories->index.md

---
title:文章分类
date: 2019-04-22 12:25:30
type: "categories"   #添加
---

模板添加分类
打开scarffolds->post.md

---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

这样新建文章后就会有这个属性，填写分类就可以实现文章分类功能。

3.2 标签

新建标签

hexo new page tags

给页面添加标签属性
打开 source->tags->index.md

---
title: tags
date: 2019-04-23 00:13:22
type: "tags" #新添加的内容
---

3.3使用分类和标签

layout: posts
title: 我的第一篇博客
date: 2019-04-23 00:17:41
categories: 学习笔记
tags: [node.js, java]

4.部署到GitHub

github中：

创建用户名.github.io的仓库
setting里添加GitHub Pages选项
本地同步打开 . ->config.yml，添加部署路径

deploy:
    type: git
    repo: [email protected]:yourName/yourName.github.io.git
    branch: master

注意：

冒号后有一个空格
需要先关联仓库，配置ssh

使用命令hexo g hexo d 完成生成并推送
yourName.github.io就是博客网址

注：报错

error deployer not found:github

时，执行

npm install --save hexo-deployer-git

然后再试一次。

主题篇

1.安装NEXT

next是hexo的一款主题，也可以点击官网查看跟多（even主题也不错）

安装主题只用将next的项目clone到根目录下themes/next里

git clone https://github.com/theme-next/hexo-theme-next themes/next

然后修改配置启用next主题
修改根目录下 _config.yml

theme: next

在next的_config.yml中可以修改next的样式，共有四个。可以在官网看到案例

Muse (默认)
Mist
Pisces
Gemini
注释其他的，留下想要的样式

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

2.设置Menu(最上面的按钮)

themes/next/_config.yml

menu:
  home: / || home #首页
  about: /about/ || user #关于我
  tags: /tags/ || tags  #标签
  categories: /categories/ || th #分类
  archives: /archives/ || archive #归档

3.github挂饰

点击fork me on github的按钮，在GitHub Corners选择挂饰，复制代码添加到themes/next/layout/_layout.swig的
下方。将代码里的https//your-url 换成自己的git主页。

4.修改超链接css样式

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; //底部分割线颜色
  }
}

5.设置头像以及动画

主题目录_config.yml中添加（找Sidebar Avatar）

//添加头像地址
avatar: [ http://....]

头像圆角旋转/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;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -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);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

6.代码块样式

themes\next\source\css\_custom\custom.styl添加

code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

7.社交网站图标

next/_config.yml的Social

[社交平台名]: [社交地址] || [图标名称]
//github 、heartbeat(心)、spinner(圈)...（图标）

图标在Font Awesome Icon

8.RSS

根目录下
npm install --save hexo-generator-feed
全局_config.yml末尾添加

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

打开Next的_config.yml中的rss:
配置rss: /atom.xml

9.搜索功能

根目录下npm install hexo-generator-search --save
根目录_config.yml中

# Search 
search:
  path: ./public/search.xml
  field: post #搜索那个文件夹(page、all)
  format: html
  limit: 10000 #限制条数

next_config.yml

local_search:
  enable: true #改为true
  trigger: auto
  top_n_per_article: 1 #字段表示在每篇文章中显示的搜索结果数量，设成 -1 会显示每篇文章的所有搜索结果数量。

首页隐藏部分（点击显示更多）

next配置文件

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

简易化搭建

HEXO Portable一分钟搭建博客

hexo个人博客搭建