如何用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: git
  repo: https://github.com/lc627595056/lc627595056.github.io.git
  branch: 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 格式文章正文插入<!-- more -->即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下 themes/yilia/_config.yml，重复

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