如何用Hexo搭建个人博客网站

1、先下载Node.js

2、想要使用Node.js环境加载速度变快，需要获取cnpm环境

npm install -g cnpm --registry=https://registry.npm.taobao.org# -g：全局安装

3、安装Hexo客户端

cnpm install -g hexo-cli

4、初始化一个博客框架

hexo init

5、开启博客

hexo s 或者 hexo server

6、创建博客

# 直接创建名为 我的第一篇博客.md文件
hexo new "我的第一篇博客"# 创建一个tags文件夹，里面有index.md文件
hexo new page tags

7、书写博客的内容

cd source/_posts/vim 我的第一篇博客.md

8、回到原来的目录下

$ pwd
/e/blog

9、清理hexo

hexo clean

10、生成文章页面

hexo generate 或者 hexo g

11、再次启动hexo，即可见到文章的内容

hexo s 或者 hexo server

12、创建github仓库，部署到远端

# 仓库名一定要是自己的账号名+.github.io
lc627595056.github.io# github地址
https://github.com/lc627595056/lc627595056.github.io.git

13、安装hexo与git结合的插件

cnpm install hexo-deployer-git --save

14、修改_config.xml文件，将git仓库的地址部署进去

deploy:type: gitrepo: https://github.com/lc627595056/lc627595056.github.io.gitbranch: master

15、直接部署到远端即可

hexo d 或者 hexo deploy

浏览器访问 lc627595056.github.io 就ok了

替换炫酷的主题

1、首先要克隆到 /blog目录下

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

2、修改 _config.xml文件

theme: yilia

3、

# 清理一下
hexo clean# 重新生成网页
hexo g# 启动hexo
hexo s# 部署到github
hexo d# 访问http://lc627595056.github.io即可
lc627595056.github.io

常见的配置

1、如果这一页太多了，可以另起一页（没起作用）

hexo new page board

2、点击页面出现小红心

// 1、在hexo/themes/yilia/source/js/文件目录下添加love.js文件。内容为：
!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document);// 2、在hexo/themes/yilia/layout/_partial/footer.ejs文件的最后，添加以下代码：<!--页面点击小红心-->
<script type="text/javascript" src="/js/love.js"></script>

3、“关于我” 的标签（没起作用）

//使用 Hexo 命令新建一个名为 about 的页面即可
hexo new page about
//该页面内容在文件 \blog\source\about\index.md 中修改

4、点击页面出现爆竹效果

// 1、在/themes/yilia/source/js/下创建fireworks.js，写入"use strict";function updateCoords(e) {pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
}function setParticuleDirection(e) {var t = anime.random(0, 360) * Math.PI / 180,a = anime.random(50, 180),n = [-1, 1][anime.random(0, 1)] * a;return {x: e.x + n * Math.cos(t),y: e.y + n * Math.sin(t)}
}function createParticule(e, t) {var a = {};return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos =setParticuleDirection(a), a.draw = function () {ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()}, a
}function createCircle(e, t) {var a = {};return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth =a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1}, a
}function renderParticule(e) {for (var t = 0; t < e.animatables.length; t++) {e.animatables[t].target.draw()}
}function animateParticules(e, t) {for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {n.push(createParticule(e, t))}anime.timeline().add({targets: n,x: function (e) {return e.endPos.x},y: function (e) {return e.endPos.y},radius: 0.1,duration: anime.random(1200, 1800),easing: "easeOutExpo",update: renderParticule}).add({targets: a,radius: anime.random(80, 160),lineWidth: 0,alpha: {value: 0,easing: "linear",duration: anime.random(600, 800)},duration: anime.random(1200, 1800),easing: "easeOutExpo",update: renderParticule,offset: 0})
}function debounce(e, t) {var a;return function () {var n = this,i = arguments;clearTimeout(a), a = setTimeout(function () {e.apply(n, i)}, t)}
}
var canvasEl = document.querySelector(".fireworks");
if (canvasEl) {var ctx = canvasEl.getContext("2d"),numberOfParticules = 30,pointerX = 0,pointerY = 0,tap = "mousedown",colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],setCanvasSize = debounce(function () {canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width =window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2)}, 500),render = anime({duration: 1 / 0,update: function () {ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)}});document.addEventListener(tap, function (e) {"sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !==e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))}, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
}
"use strict";function updateCoords(e) {pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
}function setParticuleDirection(e) {var t = anime.random(0, 360) * Math.PI / 180,a = anime.random(50, 180),n = [-1, 1][anime.random(0, 1)] * a;return {x: e.x + n * Math.cos(t),y: e.y + n * Math.sin(t)}
}function createParticule(e, t) {var a = {};return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos =setParticuleDirection(a), a.draw = function () {ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()}, a
}function createCircle(e, t) {var a = {};return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth =a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1}, a
}function renderParticule(e) {for (var t = 0; t < e.animatables.length; t++) {e.animatables[t].target.draw()}
}function animateParticules(e, t) {for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {n.push(createParticule(e, t))}anime.timeline().add({targets: n,x: function (e) {return e.endPos.x},y: function (e) {return e.endPos.y},radius: 0.1,duration: anime.random(1200, 1800),easing: "easeOutExpo",update: renderParticule}).add({targets: a,radius: anime.random(80, 160),lineWidth: 0,alpha: {value: 0,easing: "linear",duration: anime.random(600, 800)},duration: anime.random(1200, 1800),easing: "easeOutExpo",update: renderParticule,offset: 0})
}function debounce(e, t) {var a;return function () {var n = this,i = arguments;clearTimeout(a), a = setTimeout(function () {e.apply(n, i)}, t)}
}
var canvasEl = document.querySelector(".fireworks");
if (canvasEl) {var ctx = canvasEl.getContext("2d"),numberOfParticules = 30,pointerX = 0,pointerY = 0,tap = "mousedown",colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],setCanvasSize = debounce(function () {canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width =window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2)}, 500),render = anime({duration: 1 / 0,update: function () {ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)}});document.addEventListener(tap, function (e) {"sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !==e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))}, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
};// 2、在/themes/yilia/layout/layout.ejs中写入<!--鼠标点击烟花爆炸效果，需要引入jQuery-->
<% if (theme.fireworks){ %><canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> <script type="text/javascript" src="/js/fireworks.js"></script>
<% } %>// 3、/themes/yilia/_config.yml中写入# 鼠标点击烟花爆炸效果
fireworks: true

5、“私密文章”

会在source/drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上，链接也访问不到。也就是说如果你想把某一篇文章移除显示，又不舍得删除，可以把它移动到drafts目录之中。
$ hexo new draft "new draft"
如果你希望强行预览草稿，更改配置文件：
render_drafts: true
或者，如下方式启动server：
$ hexo server --drafts
下面这条命令可以把草稿变成文章，或者页面：
$ hexo publish [layout]

6、总文章数

1、将themes\yilia\layout_partialleft-col.ejs文件的

<nav class="header-menu"><ul><% for (var i in theme.menu){ %><li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li><%}%></ul>
</nav>后面加上<nav>总文章数 <%=site.posts.length%>
</nav>

7、文章结束语

1、打开yourblog\themes\yilia\layout_partial文件夹，并编辑article.ejs文件，在

<% if (!post.noDate){ %><%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %><% } %></header><% } %><div class="article-entry" itemprop="articleBody"><% if (post.excerpt && index){ %><%- post.excerpt %><% if (theme.excerpt_link) { %><a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a><% } %><% } else { %><%- post.content %><% } %>之后加上<% if ((theme.essayending_type === 2 || (theme.essayending_type === 1 && post.essayending)) && !index){ %><% if  (!index){ %><div class="essayending"><div><div style="text-align:center;color: #ccc;font-size:22px;"><br/><br/>-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------<br/><br/><br/><br/></div></div></div><% } else {%><div class="essayending" hidden="hidden"></div><% } %><% } %>

2、然后在**\theme\yilia_config.yml**文件中找到合适位置添加：

#文章结束
essayending_type: 1 #0关闭文章结束提示 2全开 1需要在文章开头加上
essayending: true

8、截断显示文件

1、在你 md 格式文章正文插入即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下 themes/yilia/_config.yml，重复

# 文章太长，截断按钮文字
# excerpt_link: more