如何用Hexo搭建个人博客网站
1、先下载Node.js
2、想要使用Node.js环境加载速度变快，需要获取cnpm环境
npm install -g cnpm --registry=https://registry.# -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.iolc627595056.github.io# github地址/lc627595056/lc627595056.github.io.git
13、安装hexo与git结合的插件
cnpm install hexo-deployer-git --save
14、修改_config.xml文件，将git仓库的地址部署进去
deploy:type: gitrepo: /lc627595056/lc627595056.github.io.gitbranch: master
15、直接部署到远端即可
hexo d 或者 hexo deploy
浏览器访问 lc627595056.github.io 就ok了
替换炫酷的主题
1、首先要克隆到 /blog目录下
git clone /litten/hexo-theme-yilia.git themes/yilia
2、修改 _config.xml文件
theme: yilia
3、
# 清理一下hexo clean# 重新生成网页hexo g# 启动hexohexo s# 部署到githubhexo 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="///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 格式文章正文插入<!-- more -->即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下themes/yilia/_config.yml，重复
# 文章太长，截断按钮文字# excerpt_link: more
如果觉得《如何用Hexo搭建个人博客网站》对你有帮助，请点赞、收藏，并留下你的观点哦！
