Github搭建hexo博客

首先阅读这篇博文前,博主声明这个博文是博主自己做了博客后,一些过程记录。当然也包括其中遇到的问题的记录。此博客会详细的一步一步介绍搭建过程,并根据博主自己的体验提出一些改进。

下面跟着我一起搭建博客吧:

博主的电脑环境是Windows10 64bit,Linux的也大同小异,博主也在deepin搭建了,只有一些小地方不同

首先要做一些准备工作:下载Git,Nodejs,安装hexo,注册GitHub

1. Git下载安装

git官网:https://git-scm.com

git 64位下载地址:https://git-scm.com/download/win

提示:下载可能会很慢,可以复制下载链接到迅雷下载速度要快些。

安装步骤以及简单git操作:点我传送门

2.Nodejs下载安装

Nodejs官网:https://nodejs.org/en/
Nodejs下载(for Windows):https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi

下载好后,nodejs安装相对于Git很简单,一直下一步就行了。Linux用户注意建立 [软连接] 。没用过Linux的亲,就当上面是个屁无视了^_^。

Git和Node都安装好后,在在桌面或任意文件夹右键点击“Git Bash Here”输入命令测试:

git version
node -v
npm -v //结果都显示相应的版本号即可

然后我们还需要安装淘宝镜像源,因为使用npm很不稳定,下载速度也很慢。(如果错误就重来这一步,因为链接可能不稳定)

npm install -g cnpm --registry=https://registry.npm.taobao.org

检测使用:

cnpm //返回一堆信息即可
cnpm -v //返回版本号即可

 3.hexo安装部署

在你磁盘你想存的地方新建一个文件夹名字英文,如MyBlog,Blog等。然后进入文件夹,右键单击Git Bash Here打开命令行窗口输入:

cnpm install -g hexo-cli

测试使用:hexo -v 显示对应一堆版本信息

然后初始化博客:

hexo init //执行完这条命令,看文件夹里多了很多文件说了成功

同时可以使用

hexo s 
或者
hexo server

执行后显示如下,没有错误,然后打开浏览器输入localhost:4000既可看见初始的博客界面:

runstatus.jpg

之后我们需要安装hexo部署插件,上图可以通过按CTR+C结束,然后输入命令:

cnpm install --save hexo-deployer-git

至此安装完成。

4.hexo相关配置

打开Blog根目录中的_config.yml文件,这里推荐使用VS code编辑器[传送门 点我],notepad也可以打开,或者记事本也行。在末尾type后加git(注意:每个:后面都有一个空格)
添加:

repo: [你Github仓库的地址]
branch: master

你仓库的地址如图:

gitaddress.jpg

常用的命令:

hexo clean //建议每次都清理一遍
hexo generate //生成相关博客文件
hexo server //开启本地服务
浏览器输入localhost:4000可查看博客网站

5.hexo主题更换

hexo默认的主题是landscape,我们可以通过git clone命令使用别人的主题如 [yilia]主题
在你的博客根目录下输入

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

然后更改blog根目录的_config.yml中的theme一项,改landscape为yilia即可,同理可以使用同样的方法clone你觉得可以的别人的模板

注:所有的模板主人做模板也不容易,或多或少如果愿意可以赞助一下别人的。至少我也是这么想的,互助。

6.博客页面加入音乐

博主使用的是Aplayer&&Metingjs组合的播放器。详情见 [传送门]

 7.leancloud存储访问者ip,归属地,操作系统,浏览器

博主根据Leancloud的开发文档做了一个记录博客访问记录的数据库,详情参见 [官方API文档]代码总览

开始之前我们需要注册一个leancloud,注册按流程来就是,不多说,然后我们需要建一个名为Visitor的class,如下图:

class01.jpgclass02.jpg

然后在你的主页面引入如下js:

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.15.0/dist/av-min.js"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-realtime@4.3.1/dist/realtime.browser.min.js"></script>

leancloud数据存储初始化:

AV.init({
appId: "{{ theme.leanclouds.app_id }}", //可以直接写成你的appId和appkey
appKey: "{{ theme.leanclouds.app_key }}", //博主卸载配置文件里了
});

如图打开你的leancloud的引用key复制右边的appID和appKey:

leancloudkey.jpg

获取访问者浏览器:

 

var userAgent = navigator.userAgent;
var info=new Array()   //存储字符串结果
var tempArray  = "";

if(/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)){
    tempArray = /([Ff]irefox)\/(\d+\.\d+)/.exec(userAgent);
    info[0] =  tempArray[1] + tempArray[2];
}else if(/MSIE \d+\.\d+/.test(userAgent)){
    tempArray = /MS(IE) (\d+\.\d+)/.exec(userAgent);
    info[0] =  tempArray[1] + tempArray[2];
}else if(/[Cc]hrome\/\d+/.test(userAgent)){
    tempArray = /([Cc]hrome)\/(\d+)/.exec(userAgent);
    info[0] =  tempArray[1] + tempArray[2];
}else if(/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)){
    tempArray = /[Vv]ersion\/(\d+\.\d+\.\d+)(\.\d)* *([Ss]afari)/.exec(userAgent);
    info[0] =   tempArray[3] + tempArray[1];
}else if(/[Oo]pera.+[Vv]ersion\/\d+\.\d+/.test(userAgent)){
    tempArray = /([Oo]pera).+[Vv]ersion\/(\d+)\.\d+/.exec(userAgent);
    info[0] =   tempArray[1] + tempArray[2];
}else{
    info[0] =  "unknown";
}

 

获取操作系统信息:

var sUserAgent = navigator.userAgent;
var os="";   //存储结果字符串
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
if (isMac) os= "Mac";
var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
if (isUnix) os= "Unix";
var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
if (isLinux) os= "Linux";
if (isWin) {
    var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
    if (isWin2K) os= "Windows 2000";
    var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
    if (isWinXP) os= "Windows XP";
    var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
    if (isWin2003) os= "Windows 2003";
    var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
    if (isWinVista) os= "Windows Vista";
    var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
    if (isWin7) os= "Windows 7";
    var isWin10 = sUserAgent.indexOf("Windows NT 10") > -1 || sUserAgent.indexOf("Windows 10") > -1;
    if (isWin10) os= "Windows 10";
}else{
    os= "other";
}

查询leancloud访问者的IP是否存在如果存在更改访问次数times列加一,如果不存在新建对象:

var Todo = AV.Object.extend('Visitor');
  var query = new AV.Query('Visitor');      
  query.equalTo('ip', returnCitySN["cip"]); //Visitor内查询现有访问者IP是否已经存在
  query.find().then(function (visit) {
    if(visit.length==0)     //如果不存在新建存储对象
    {
      var todo = new Todo();
      todo.set('ip',returnCitySN["cip"]);
      todo.set('addr', returnCitySN["cname"]);
      todo.set('times', 1);
      todo.set('OB', os+" "+info);
      todo.save();	
  }else{                    
      var t;
      var times=visit.length+visit[0].get('times');         //如果存在,获取现有访问次数加查找到的符合ip的个数
      var obj = AV.Object.createWithoutData('Visitor', visit[0].id);
      obj.set('times',times);
      obj.save();
      if(visit.length>1)
      {
        for(var i=1;i<visit.length;i++)  //如果出现重复存储,把初第一个外对象销毁。
        {
          t=AV.Object.createWithoutData('Visitor', visit[i].id);
          t.destroy();			
        }					
      }
    }
  });
});

代码总览:

 

<script>
   $(document).ready(function () {
      AV.init({
        appId: "{{ theme.leanclouds.app_id }}",
        appKey: "{{ theme.leanclouds.app_key }}",
      });

        var userAgent = navigator.userAgent;
        var info=new Array()
        var tempArray  = "";

        if(/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)){
            tempArray = /([Ff]irefox)\/(\d+\.\d+)/.exec(userAgent);
            info[0] =  tempArray[1] + tempArray[2];
        }else if(/MSIE \d+\.\d+/.test(userAgent)){
            tempArray = /MS(IE) (\d+\.\d+)/.exec(userAgent);
            info[0] =  tempArray[1] + tempArray[2];
        }else if(/[Cc]hrome\/\d+/.test(userAgent)){
            tempArray = /([Cc]hrome)\/(\d+)/.exec(userAgent);
            info[0] =  tempArray[1] + tempArray[2];
        }else if(/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)){
            tempArray = /[Vv]ersion\/(\d+\.\d+\.\d+)(\.\d)* *([Ss]afari)/.exec(userAgent);
            info[0] =   tempArray[3] + tempArray[1];
        }else if(/[Oo]pera.+[Vv]ersion\/\d+\.\d+/.test(userAgent)){
            tempArray = /([Oo]pera).+[Vv]ersion\/(\d+)\.\d+/.exec(userAgent);
            info[0] =   tempArray[1] + tempArray[2];
        }else{
            info[0] =  "unknown";
        }

    var sUserAgent = navigator.userAgent;
    var os="";
    var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
    var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
    if (isMac) os= "Mac";
    var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
    if (isUnix) os= "Unix";
    var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
    if (isLinux) os= "Linux";
    if (isWin) {
        var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
        if (isWin2K) os= "Windows 2000";
        var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
        if (isWinXP) os= "Windows XP";
        var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
        if (isWin2003) os= "Windows 2003";
        var isWinVista= sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
        if (isWinVista) os= "Windows Vista";
        var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
        if (isWin7) os= "Windows 7";
        var isWin10 = sUserAgent.indexOf("Windows NT 10") > -1 || sUserAgent.indexOf("Windows 10") > -1;
        if (isWin10) os= "Windows 10";
    }else{
        os= "other";
    }

      var Todo = AV.Object.extend('Visitor');
      var query = new AV.Query('Visitor');
      query.equalTo('ip', returnCitySN["cip"]); 
      query.find().then(function (visit) {
        if(visit.length==0)
        {
          var todo = new Todo();
          todo.set('ip',returnCitySN["cip"]);
          todo.set('addr', returnCitySN["cname"]);
          todo.set('times', 1);
          todo.set('OB', os+" "+info);
          todo.save();	
      }else{
          var t;
          var times=visit.length+visit[0].get('times');
          var obj = AV.Object.createWithoutData('Visitor', visit[0].id);
          obj.set('times',times);
          obj.save();
          if(visit.length>1)
          {
            for(var i=1;i<visit.length;i++)
            {
              t=AV.Object.createWithoutData('Visitor', visit[i].id);
              t.destroy();			
            }					
          }
        }
      });
    });
</script>

 8.hexo源码压缩

首先现在一般都在用gulp和neat两种hexo插件来压缩源码,gulp操作复杂这里不做推荐。

第一步:安装hexo-neat

npm install hexo-neat --save

第二步:修改配置文件_config.yml

# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
- '**/love.js'

# 压缩博文配置结束

解释:对应的true和false是对应的压缩开关,exclude下面是不需要被压缩的文件。完成以上操作,当你执行hexo clean && hexo g 时自动完成压缩,建议只在你需要推送博文时,才开启压缩,提高开发效率。

点赞