1.安装 Node.js
打开官方网站
安装步骤非常简单，一直next，下一步就可以了，默认安装就行（也可以自定义目录，但需要配置环境变量）。
2.安装 Git
打开官方网站
https://git-scm.com/downloads
然后我们选择windows版本的下载
安装也是一直点下一步，安装官方默认的就行，之后，在开始菜单可以看到
3.安装hexo
如果是windows环境下，以管理员的方式打开git bash(开始菜单中)；
1）安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2）cnpm install -g hexo-cli
3）hexo -v
4.在合适的位置创建一个新的文件夹blog，比如桌面上
tip:windows环境下，一直以管理员身份在git bash操作即可。
5.hexo init
通过git bash操作，完成对项目的初始化；
看到提示：start blogging with hexo! 即表示成功；
ls -l 查看hexo自动生成的内容
6.hexo s/hexo server 启动
至此，启动成功
8.访问
地址： localhost:4000
至此，搭建完成！
可能出现的问题
ERROR Local hexo not found in ~\Desktop\blog
解决方案：npm install
hexo基本操作
生成文章：hexo n "my first blog..."
在_posts目录下（文章目录）
编辑文章
清理：hexo clean
生成：hexo g
所处目录：cd /c/Users/ASUS/Desktop/blog
重新启动：hexo s
部署到github
安装部署插件：cnpm install --save hexo-deployer-git
打开配置文件：vim _config.yml
大G模式下进入最末行：
复制仓库地址：
deploy:
type: git
repo: https://github.com/atkgc2019wxd/atkgc2019wxd.github.io.git
branch: master部署到远端：hexo d
GitHub Pages提供了免费的域名搭建
免费域名 xxx.github.io xxx是你的GitHub的用户名
现在可以直接通过远端地址访问，比如我的：atkgc2019wxd.github.io
当然，还可以对搭建好的博客做一些优化，具体优化过程如下：
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
然后修改_config.yml配置文件中的theme属性（指定拥有的主题目录即可）：
theme: yilia重新清理：hexo clean
重新生成：hexo g
重新启动：hexo s
访问应用新主题的地址：localhost:4000
推送到远端，完成同步：hexo d
- 其它细节
在public/medias/下添加自己的图片，不要使用hexo clean命令，图片会自动删除，因为hexo clean会删除hexo g生成的public目录。所以可以把自己的图片放到一直存在的目录即可，比如hexo的source/下，注意路径。其实，只要把自己的图片放到themes\主题文件夹名称\source\medias下就行，hexo g会自动生成到hexo的public\medias下，引用时注意路径。
编辑友情链接页（hexo source/_data/）
[{
"avatar": "/medias/1.jpg",
"name": "Loser.",
"introduction": "人生需要一次说走就走的旅行",
"url": "https://blog.csdn.net/wxd772113786",
"title": "let's go"
}, {
"avatar": "/medias/2.jpg",
"name": "Loser2.",
"introduction": "完美的理想主义者，喜欢coding",
"url": "https://blog.csdn.net/wxd772113786",
"title": "click me"
}, {
"avatar": "/medias/3.jpg",
"name": "Loser3.",
"introduction": "人生就像是坐着公车旅行，我们可以不必在乎车会停在哪儿，要在乎的是
经过的景色和看这些景色时的心情。",
"url": "https://blog.csdn.net/wxd772113786",
"title": "don't worry"
}]代码高亮显示
由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：
npm i -S hexo-prism-plugin然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：
highlight:
enable: false
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：
npm install hexo-generator-search --save在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
search:
path: search.xml
field: post修改页脚
页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在应用的主题目录的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。
config.url和config.author的信息都在hexo的_config.xml中
tip: theme.time.year在相应主题的_config.xml中。
hexo d 出现的问题
ERROR Deployer not found: git
npm install --save hexo-deployer-git文章 Front-matter 介绍
Front-matter 选项详解
Front-matter 选项中的所有内容均为非必填的。建议至少填写 title 和 date 的值。Front-matter就是在---和---之间的定义。比如下面：
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---以文章目录为例：
完整配置示例：
---
title: Hello World
date: 2020-02-02 10:10:10
author: Loser.
img: /images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password:
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会
自动截取文章的部分内容作为摘要
categories: Markdown
tags:
- Typora
- Markdown
---修改首页用户名（博主名）
hexo _config.yml文件
设置浏览器主页图标
删除首页导航条关键词链接
修改导航条关键词链接的名称
文章显示作者
找到post-detail.ejs文件
新增如下配置：
<% if (theme.postInfo.author && page.author.length > 0 ) { %>
<div class="post-date info-break-policy">
<% if (page.author && page.author.length > 0) { %>
<i class="far fa-calendar-check fa-fw"></i>作者： <%- page.author %>
<% } %>
</div>
<% } %>
去除歌词的显示
找到相应元素对应的样式文件
去除轮播图上的阴影
找到相应主题下的matery.css文件(../source/css/matery.css)，把width和height对应的值改为0%即可
.bg-cover:before,
.bg-cover:after {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
content: "";
}添加雪花特效
找到相应的位置操作即可，在主题文件夹的js目录中新建js文件，放入特效代码
/*样式一*/
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 5, /* 定义雪花最小尺寸 */
maxSize: 50,/* 定义雪花最大尺寸 */
newOn: 300 /* 定义密集程度，数字越小越密集 */
});
});找到合适的位置，一定要确保引用，比如以下位置
效果：
代码雨实现
在一个会被加载的css文件中，实现画布
实现画布后，在js目录中新建文件放入相关js代码
window.onload = function(){
//获取画布对象
var canvas = document.getElementById("canvas");
//获取画布的上下文
var context =canvas.getContext("2d");
var s = window.screen;
var W = canvas.width = s.width;
var H = canvas.height;
//获取浏览器屏幕的宽度和高度
//var W = window.innerWidth;
//var H = window.innerHeight;
//设置canvas的宽度和高度
canvas.width = W;
canvas.height = H;
//每个文字的字体大小
var fontSize = 12;
//计算列
var colunms = Math.floor(W /fontSize);
//记录每列文字的y轴坐标
var drops = [];
//给每一个文字初始化一个起始点的位置
for(var i=0;i<colunms;i++){
drops.push(0);
}
//运动的文字
var str ="Youth means limitless possibilities.-Loser.";
//4:fillText(str,x,y);原理就是去更改y的坐标位置
//绘画的函数
function draw(){
context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
context.fillRect(0,0,W,H);
//给字体设置样式
context.font = "600 "+fontSize+"px Georgia";
//给字体添加颜色
context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色，十六进制颜色
//写入画布中
for(var i=0;i<colunms;i++){
var index = Math.floor(Math.random() * str.length);
var x = i*fontSize;
var y = drops[i] *fontSize;
context.fillText(str[index],x,y);
//如果要改变时间，肯定就是改变每次他的起点
if(y >= canvas.height && Math.random() > 0.99){
drops[i] = 0;
}
drops[i]++;
}
};
function randColor(){//随机颜色
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
}
draw();
setInterval(draw,35);
};引入js实现即可
安装萌妹子
插件地址：https://github.com/xiazeyu/live2d-widget-models/tree/master/packages
部分对应人物图：https://huaji8.top/post/live2d-plugin-2.0/
npm install --save hexo-helper-live2d
复制模型名称（即对应的包名）：live2d-widget-model-z16
配置到hexo的_config.yml中：
live2d:
enable: true
scriptFrom: local #源于
model:
use: live2d-widget-model-z16 #模型名称
display:
position: right #模型位置
width: 150 #模型宽度
height: 300 #模型高度
hOffset: 50 #水平坐标
vOffset: 0 #垂直坐标
mobile:
show: false #是否在手机端显示常用命令
hexo clean：清除缓存文件（db.json）和已生成的静态文件（public）
hexo g：生成静态文件
hexo d：部署到远端
hexo s：启动服务
hexo s &：后台运行
ps：查看进程任务
hexo new page "tags"：表示新建页面，会在source目录下生成相应的目录和文件；
后台启动方式，正确关闭姿势：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
