使用Hexo搭建个人网站
首先，介绍下什么是Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页
在安装Hexo之前---我们需要检查电脑里面是否已经安装了
-
Node.js---https://nodejs.org/en/download/
-
Git---https://git-scm.com/
安装Node.js就选取对应的版本，默认配置就可以
image
然后打开Node.js command prompt.lnk
image
更改npm源（不然下载速度可能很慢）
$ npm config set registry https://registry.npm.taobao.org npm info underscore
安装Hexo
$ npm install -g hexo-cli
到这里不出问题的话，已经在本地机器上搭建了Hexo环境。下面介绍Hexo的具体操作（接下来的操作需要在Hexo目录下用Git Bash运行）
Git的下载步骤介绍---https://www.jianshu.com/p/414ccd423efc
Git的配置步骤---http://rui0.cn/archives/987
创建一个Hexo工程
$ hexo init Hexo
这里Hexo是你想要创建文件夹的名字
image
新建
$ cd Hexo
$ hexo new “Hello”
然后会在...\Hexo\source_posts文件夹下面生成一个Hello的markdown文件
生成静态文件
$ hexo generate
使用Hexo引擎将Markdown格式的文件解析成可以使用浏览器查看的HTML文件，HTML文件存储在blog/public目录下
运行hexo服务器
$ hexo server
image
然后在http://localhost:4000就可以看到你新建的Hello文件
如果找不到则需要运行
$ npm install hexo-server --save
之后，你可以直接修改Hello文件然后在Hexo目录下运行Git Bash输入下面命令就可以在本机看到
$ hexo generate
$ hexo server
Hexo的优化
1：主题
Hexo提供了默认主题landscape。如果想要使用别人的主题则需要用到Git工具。
这里以yilia为例,我们要先进入themes文件夹运行Git Bash
$ git clone https://github.com/litten/hexo-theme-yilia
之后，我们打开_config.yml文件，把theme后面的内容改为你themes文件夹里面想要换的主题的名字，保存退出
image
再次运行下面命令
$ hexo generate
$ hexo server
各种主题：https://github.com/search?q=hexo-theme
2:添加背景音乐--音乐播放器
image
1：需要我们先打开网易云的网页版，点击生成外链播放器，复制代码。
image
image
2：然后进入themes/yilia/layout/_partial/left-col.ejs的路径下，将代码添加到这里（可以自己更改位置），然后就调整大小，我的width是230，height是86。
image
3：添加雪花飘落的背景
image
1：在\themes\yilia\source下新建snow.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 /* 定义密集程度，数字越小越密集 */
});
});
2:在\themes\yilia\layout\layout.ejs中引入js
<!-- 引入jquery 已经引入过了可去掉 -->
<script type="text/javascript" src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<!-- 雪花特效 -->
<script type="text/javascript">
var windowWidth = $(window).width();
if (windowWidth > 480) {
document.write('<script type="text/javascript" src="/snow.js"><\/script>');
}
</script>
3:重新部署你的hexo，雪花效果在Chrome浏览器上很好看，到Edge变成黑色的了，其他浏览器没试过。
4：添加萌萌哒
1：安装插件
$ npm install --save hexo-helper-live2d
2：复制你喜欢的模型名字---下面的是部分模型
Epsilon2.1
image
miku
image
ni-j
image
nico
image
nipsilon
image
shizuku
image
wanko
image
z16
image
haruto
image
koharu
image
3：然后我们打开_config.yml文件
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-模型名字
display:
position: right
width: 150
height: 300
mobile:
show: true
4：（1）我们在站点目录下新建一个名为live2d_models的文件夹
（2）之后在live2d_models文件夹下新建一个文件夹命名为---模型名字
（3）.再在”模型名字的文件夹“下建json文件：模型名字.model.json
5：安装模型
$ npm install --save live2d-widget-model-模型名字
6：运行命令
$ hexo generate
$ hexo server
放上我的网站
image.png
网友评论