hexo博客搭建教程及配置

cjjssa
337 阅读9分钟

hexo博客搭建

1.电脑安装好node.js和git

  • 1-1. 创建博客文件夹根目录进入git bash

  • 1-2. 在git bash中输入 npm install hexo-cli -g 来全局安装hexo-cli，可以输入hexo -v来检测是否安装成功

  • 1-3. 输入hexo init，会自动从github中克隆hexo-starter到本地，从github中克隆很慢，失败几率很大，建议直接把仓库拉到码云在克隆，方法请百度。我发现把仓库拉到码云下载并不会帮我们下载默认主题，我们可以看到themes里的landscape是空的，所以需要我们自行下载，在.gitmodules文件中有下载地址

  • 1-4. 输入npm install hexo --save 安装hexo，进行git初始化，在git bash输入git init就好了，这样就可以使用git指令了

  • 1-5. 输入npm install hexo-server --save安装hexo-server，安装好就可以通过hexo s在本地

  • 1-6. 依次输入hexo clean，hexo g，hexo s。运行hexo s 会出现一个地址，复制去浏览器访问，如果出现显示白板CANNOT /GET那就去public目录查看有没有index.html文件。如果不存在，在git bash输入

    npm install hexo-renderer-ejs --save

    npm install hexo-renderer-stylus --save

    npm install hexo-renderer-marked --save

  • 1-7. 然后再依次进行三步（hexo clean，hexo g，hexo s），浏览器打开发现一片空白，文件都存在，应该是主题的问题，找到themes文件夹里面有个默认的主题landscapes，打开发现空白，解决办法在1-3

  • 1-8. 再次三步，浏览器打开成功!

2.将博客部署到码云

  • 2-1. 注册登录码云及ssh公钥配置及登录git请自行百度。码云创建好仓库之后，点击右边的克隆/下载按钮,然后复制https地址。到你的博客根目录打开_config.yml文件，找到!
  • 2-2. 安装hexo-deployer-git模块，git bash 运行 npm install hexo-deployer-git --save 安装好之后，文件夹会多出来一个.deploy_git,然后运行命令 hexo g -d,就可以把内容推送到码云了。 推送好之后，上码云建立的仓库中可以看到编译之后的文件，然后点击服务，选择page， 开启服务，然后等他部署好之后，会出现一个网址，就是你的博客地址。

3.关于换了电脑如何能够快速部署

  • 经过上面的步骤，已经实现了hexo博客的部署，有经验的工程师应该接下来都会玩了，可以不用继续看接下来的文档了。 下面我讲对加强部署做进一步说明。

  • 你会发现你用了hexo d 命令上传到代码库的只是编译后的静态文件，如果有一天你的电脑发生了意外，文件全部取不出来了，那么重新部署本地工作环境将变得麻烦，可能需要重新下载主题插件，还有一部分插件可能你都忘了是什么了。

  • 基于换了电脑如何快速部署这一个问题，官网建议的一个仓库里面两个分支，这也是大部分网上的解决方案，可以自行百度。

  • 这里提出一个新的解决方案，放弃使用hexo d 命令

  • git bash输入git remote add orgin 仓库地址，推送的时候则输入git push orgin master ，注释:master为你的仓库分支，推送的时候请确保你的仓库是刚建好且不带任何文件，创建仓库请别勾选readme初始话仓库这些选项，不然推送不会成功，当然也有其他解决办法，就是仓库建好就克隆到本地博客根目录，这样远程仓库就会自动跟本地仓库关联起来，可以直接git push推送

  • 原理就是把整个工作目录都上传到码云上面去，包括public文件，每次更新的博客的时候，先用hexo g 命令 进行编译 然后用git add . ，git commit -m "这里是写提交的描述" ， git push 将整个目录更新到码云上面。然后在部署的时候，将根文件选择为public。

    推送时发生错误，而不知道哪里错了，可以选择强制推送git push -u origin master -f

4.常见问题解决方案

  • 4-1. 静态资源加载不出来的情况(css,js)，在博客根目录_config.yml里找到

  • url: yoursite.com root: /newblog/ 这里写你仓库的名字，我的是newblog

  • 4-2. 创建目录及标签
  • git bash中输入hexo new page categories ，hexo new page tags
接着你会在source文件夹里多次两个文件夹分别打开文件夹，在里面都会发现有个index.md，依次打开添加
---
title: categories
date: 2020-03-23 14:01:26
type: "categories"  #这行就是我们要添加的，标签那里就改成tags就行了
---

每次改完配置文件都要进行三步。打开浏览器发现没有标签跟分类，应该是主题里没添加，这时候就要去主题themes里找你所用的主题文件夹，打开找到_config.yml，修改里面配置即可，因为每个主题的配置文件都不相同，这里就不教了，可以进行百度。接下来我会用next主题，所以我会教大家配置

5.next主题配置

  • 5-1. 安装使用next主题:git bash输入
  • git clone https://github.com/theme-next/hexo-theme-next themes/next  #themes/next表示克隆在此文件夹下

  • 在博客根目录的_config.yml文件找到theme行

  • # Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #改成next

  • 在进行三步，浏览成功。next主题有四种风格，找到主题的_config.yml配置文件，修改

  • # Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini    #在你想用的风格前去掉#号，我这里选择Pisces
  • 5-2.改为中文。在博客根目录打开_config.yml文件。找到
  • # Site
title: castiel  #标题
subtitle: '努力前行'   #子标题
description: '你不努力，谁能替你前行'  #描述
keywords:
author: castiel  #作者
language: zh-CN  #显示语言，zh-CN是简体中文
timezone: ''
  • 5-3. 鼠标点击特效

  • 5-3.1：点击爱心特效。在/themes/next/source/js下新建文件 clicklove.js ，接着把下面的代码拷贝粘贴到 clicklove.js 文件中：

    !function(e,t,a){function n(){c(".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;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(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 s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

    在\themes\next\layout\ _layout.swig文件末尾添加：

    <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/博客根目录名字/js/clicklove.js"></script>

  • 5-3.2：点击烟花特效：在themes/next/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)};

    打开themes/next/layout/_layout.swig,在</body>上面写下如下代码：

    {% 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>    
{% endif %}          #这里面标签的井号我是为了不让页面识别才加的

    打开主题配置文件_config.yml，在里面最后写下:

    # Fireworks
fireworks: true

  • 爱心和烟花可共用

5-4.作者头像设置：在主题配置文件中找到
  • avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/author.jpg  #将我们的头像图片放置在blog/themes/next/source/images目录下，填写具体地址
  # If true, the avatar would be dispalyed in circle.
  rounded: true #鼠标放在头像上时是否旋转
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1 #头像放缩指数
  # If true, the avatar would be rotated with the cursor.
  rotated: true #头像是否设为圆形，否则为矩形
5-5.文章阴影设置
5-6.修改文章链接样式，显示是蓝色，触碰变黄色。

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式，：

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}
5-7. 网页底部添加建站时间.

在themes/layout/_parrials/footer.swing 中添加

<br>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span><br>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("03/12/2020 18:00:00");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "已上线 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>
5-8.设置网站图标

在网上找到图后，将其放在/themes/next/source/images里面，然后在主题配置文件中修改下图所示图片位置。

favicon:
  small: /images/favicon-16x16-next.png      #修改small和medium就行，记得图片要16*16，32*32的
  medium: /images/favicon-32x32-next-docker.jpg   
  #apple_touch_icon: /images/apple-touch-icon-next.png
  #safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml
5-9. 百度统计:请自行注册
在themes/next/layout/_layout.swig里的</head>之前加入百度统计给的代码
5-10. 浏览页面的时候显示当前浏览进度，右下角的上箭头

打开 themes/next/_config.yml ,搜索关键字 scrollpercent ,把 false 改为 true。

# Scroll percent label in b2t button
  scrollpercent: true
5-11.改变网页底部作者前面的小图标
打开themes\next\layout\_partials\footer.swing
找到<div class="copyright">
  {% set copyright_year = date(null, 'YYYY') %}
  &copy; {% if theme.footer.since and theme.footer.since != copyright_year %}{{ theme.footer.since }} – {% endif %}
  <span itemprop="copyrightYear">{{ copyright_year }}</span>
  <# span class="with-love">
    <# i class="fa fa-heart"></i>  #修改fa-XX 我这里用的时heart，fa是font-awesonme图标库
  <# /span>                     #这里面标签的井号我是为了不让页面识别才加的
5-12.添加网易云音乐
浏览器访问网页版网易云音乐，点开音乐，点击生成外链播放器。
打开themes\next\layout\_macro\sidebar.swing
在</aside>前添加复制的代码即可
播放器会在侧边栏显示
5-13.添加二次元看板娘
5-14.新建文章，并设置分类，标签
git bash输入hexo new "文章标题"    来创建文章。
在博客根目录的source\_posts会看到你新建的文章文件，打开会看到
	---
title: "你的文章标题"
date: 2020-03-24 11:31:48
tags: 随笔             #添加这个就是设置了标签，设置多个的话可以 -XX
categories: "随笔"     #添加这个就是设置了分类
	---

要想在界面侧边栏显示标签分类等选线，打开主题的配置文件找到
menu: 
  home: / || home           #主页
  #about: /about/ || user   #关于我
  tags: /tags/ || tags      #标签
  categories: /categories/ || th    #分类
  archives: /archives/ || archive   #归档
  #schedule: /schedule/ || calendar   
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat    #404
去掉前面的#号就是显示
5-15.添加超链接，图片
在你文章里面添加
[显示的描述](地址)                   #超链接
![图片描述](/博客根目录名字/images/1.jpg)  #图片  括号后面是地址
5-16. 背景添加线条
打开博客根目录/themes/next/layout/_layout.swig文件，在之前添加代码如下
{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}


属性说明：
- color ：线条颜色, 默认: ‘0,0,0’；三个数字分别为(R,G,B)
- opacity: 线条透明度（0~1）, 默认: 0.5
- count: 线条的总数量, 默认: 150
- zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

打开博客根目录/themes/next/_config.yml，找到字段canvas_nest，将其置为true【如果没有找到该字段，请自行添加】，三步后浏览
avatar
文章
阅读
粉丝