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 <folder>
cd <folder>
npm install
一个本地博客系统就构建好了
- 2.3站点目录
.
├── _config.yml //博客配置，名称、关键词、作者、语言、主体等内容设置。
├── package.json//应用信息，插件等内容。
├── scaffolds//脚手架，有三个模板：文章(posts)、博客页(page)、草稿页(draft)。
├── source//博客存放处，之后通过命令可以新建tags(标签)、categories(分页)
| ├── _drafts//草稿(初始)
| └── _posts//文章(初始)
└── themes//主题存放处
- 常用命令
hexo n <filename>新建文章
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: git@github.com: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的<div class="headband"></div>下方。将代码里的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(圈)...（图标）
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 <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
简易化搭建
HEXO Portable一分钟搭建博客
