Hexo-next-github-node搭建个人博客小结

发表于 | 分类于 ， | | 阅读数
字数统计: 3.1k | 阅读时长 ≈ 15

Hexo 是一个基于nodejs 的静态博客网站生成器，本人折腾好几天，今天小结一下。

github相关操作

github注册

这个简单，去官网https://github.com/，注册，图形界面。

建仓库

建议建一个仓库名和你的网址一样，这样后续搭建个人博客就简单了，我是搞晕过。
几个英文必须知道
repository（仓库）
Create a new repository（建一个新仓库）
Repository name （个人博客地址） #本人这样的，也推荐：xuguojun168.github.io
Public（公用） #默认即可，免费的，创建。

配置SSH keys

检查有无SSH keys

打开终端：输入：

1
cd ~/. ssh  #检查本机的ssh密钥

报错，就说明没有

生成新的SSH Key

终端输入：

1
ssh-keygen -t rsa -C "邮件地址@youremail.com"  #xuxgj_66@sina.com

终端会要求你输入密码，就得到了。#注意这里省略github本地操作，终端操作，设置账号和密码，假设大家知道的。

附注：

终端的本地git的安装和使用，可以百度。
在git的终端，输入
关于 Git 提交中用户名和 Email 的设置

1
2
git config --global user.name "Your name"
git config --global user.email "Your email"

添加SSH Key到GitHub

可能隐藏了，打开本地文件，显示隐藏文件.ssh
/home/xgj/.ssh
用vsc打开id_rsa.pub，将该文件的内容复制内容到网上
setting的SSH keys，即可。

测试一下

打开终端，输入：

1
ssh -T git@github.com #测试

SSH Key配置成功
本机已成功连接到github。

添加远程地址

测试git下的一个新仓库，gitxgj文件夹（与github网上的仓库必须一致）

1
git remote add origin git@github.com/xuguojun168/gitxgj.git

进入.git文件夹，打开config文件，这里会多出一个remote “origin”内容，这就是刚才添加的远程地址，
也可以直接修改config来配置远程地址。马上成功了，来吧。

在gitxgj文件夹下，与.git文件夹在同一个目录下，新建一个read.txt，写一些东西

1
2
git add read.txt
git commit -m "这是你commit的原因，写了方便你我他"

push推送到你的github

1
git push -u origin master  #成功

node安装

node.js安装是个大坑

第一次安装，node，发现版本太高级了，自己发现官网上竟然没有这么高级的版本，之后的npm不能使用，果断删除，从新安装。

官网下载源文件安装

官网：https://nodejs.org/en/
Download for Linux (x64) 13.7.0 Current版本
nodejs自带npm命令

解压、源码安装
使用 ./configure 创建编译文件，并按照：

1
2
3
4
5
mkdir node  #或者解压文件夹，从新命名
cd node
sudo ./configure
sudo make   #太慢了，估计要很久，可以百度查查，估计1个小时
sudo make install

hexo安装

本地的静态博客部署到gitHub

具体看本人本博客的这篇文章
node-hexo-github搭建博客
https://xuguojun168.github.io/2020/01/27/node-hexo-github-blog/#more

初级美化hexo博客

next主题安装

下载 NexT 主题
这是最新版本，老版本不更新了
git clone https://github.com/theme-next/hexo-theme-next themes/next

配置文件名称都是 _config.yml

注意配置文件有2个，是个坑

站点配置文件

/home/xgj/hexo/xuguojun168.github.io目录下
即xuguojun168.github.io这个个人博客站点下的配置文件，总领的意思=全局的意思。建一个备份/复制一个，取名叫：_config（备份站点配置文件）.yml

在其内将主题改为：next即可

注意执行以下三步曲，必须在终端的站点文件目录下
如：本机
xgj@xgj-PC:~/hexo/xuguojun168.github.io$

本地调试步骤三步曲：

我是电脑小白，曾经出过错，认为$也是执行命令的，哈哈哈，后来自己摸索出来，那个最好像上面一样不要写

1
2
3
$ hexo clean
$ hexo g
$ hexo s --debug  #也可不带：hexo s
部署步骤三步曲：

下面我就删除了，但是请注意
执行时的终端，建议在自己的站点目录下
如本机
xgj@xgj-PC:~/hexo/xuguojun168.github.io$
别搞错了，小白一般会，我就是小白，曾经搞错，现在不会了。

1
2
3
hexo clean
hexo g
hexo d

注意：henxo d 用之前必须部署好git deploy功能和站点配置文件的设置

如下操作

即在站点配置文件里修改如下：

1
2
3
4
5
6
7
#主题模板选择
theme: next

#提交git
deploy:
  type: git # 使用 Git 提交
  repo: https://github.com/xuguojun168/xuguojun168.github.io.git # 就是存放博客的仓库地址

主题配置文件

/home/xgj/hexo/xuguojun168.github.io/themes/next目录下
就是主题next的配置文件，故叫：主题配置文件，以后主题美化，主要是这里进行修改。

高级美化hexo-next博客

本博客的这篇博文
Hexo-menu博客的坑
https://xuguojun168.github.io/2020/01/28/hexo-menu%E5%8D%9A%E5%AE%A2%E7%9A%84%E5%9D%91/#more

插入图片的设置

本博客的这篇博文
Hexo博客中插入图片的坑
https://xuguojun168.github.io/2020/01/28/hexo%E5%8D%9A%E5%AE%A2%E4%B8%AD%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E7%9A%84%E5%9D%91/#more

本机hexo-next的相关美化

canvas粒子时钟

在 /themes/next/layout/_custom/ 目录下，新建 clock.swig 文件

内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<div style="">
  <canvas id="canvas" style="width:60%;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
</div>
<script>
(function(){

   var digit=
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0]
        ]//:
    ];

var canvas = document.getElementById('canvas');

if(canvas.getContext){
    var cxt = canvas.getContext('2d');
    //声明canvas的宽高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;
    cxt.fillStyle = '#f00';
    cxt.fillRect(10,10,50,50);

    //存储时间数据
    var data = [];
    //存储运动的小球
    var balls = [];
    //设置粒子半径
    var R = canvas.height/20-1;
    (function(){
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
    })();

    /*生成点阵数字*/
    function renderDigit(index,num){
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }
    }

    /*更新时钟*/
    function updateDigitTime(){
        var changeNumArray = [];
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var NewData = [];
        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        for(var i = data.length-1; i >=0 ; i--){
            //时间发生变化
            if(NewData[i] !== data[i]){
                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
            }
        }
        //增加小球
        for(var i = 0; i< changeNumArray.length; i++){
            addBalls.apply(this,changeNumArray[i].split('_'));
        }
        data = NewData.concat();
    }

    /*更新小球状态*/
    function updateBalls(){
        for(var i = 0; i < balls.length; i++){
            balls[i].stepY += balls[i].disY;
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY;
            if(balls[i].x > W + R || balls[i].y > H + R){
                balls.splice(i,1);
                i--;
            }
        }
    }

    /*增加要运动的小球*/
    function addBalls(index,num){
        var numArray = [1,2,3];
        var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    var ball = {
                        x:14*(R+2)*index + j*2*(R+1)+(R+1),
                        y:i*2*(R+1)+(R+1),
                        stepX:Math.floor(Math.random() * 4 -2),
                        stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                        color:colorArray[Math.floor(Math.random()*colorArray.length)],
                        disY:1
                    };
                    balls.push(ball);
                }
            }
        }
    }

    /*渲染*/
    function render(){
        //重置画布宽度，达到清空画布的效果
        canvas.height = 100;
        //渲染时钟
        for(var i = 0; i < data.length; i++){
            renderDigit(i,data[i]);
        }
        //渲染小球
        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();
        }
    }

    clearInterval(oTimer);
    var oTimer = setInterval(function(){
        //更新时钟
        updateDigitTime();
        //更新小球状态
        updateBalls();
        //渲染
        render();
    },50);
}

})();
</script>
在 /themes/next/layout/_macro/sidebar.swig 中引入：
1
{% include '../_custom/clock.swig' %}

即可

右侧上下猫的配置

只需在 /themes/next/source/css/_custom/custom.styl 添加如下代码：
注意：
第1，原来的备份一下custom（备份）.styl
第2，在末尾复制
第3，将文件名的保留custom.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.back-to-top {
  //right: 60px;
  width: 70px;  //图片素材宽度
  height: 900px;  //图片素材高度
  top: -900px;
  bottom: unset;
  transition: all .5s ease-in-out;
  background: url("/images/scroll.png");
  //隐藏箭头图标
  > i {
    display: none;
  }
  &.back-to-top-on {
    bottom: unset;
    top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;
  }
}

然后修改 background 里的 url 为图片地址。
图
猫

下载图片 保存为 scroll.png 放到 /themes/next/source/images/ 目录即可。

其他的可以参考网上的教程

注意以下几点：

注意是hexo-next主题设置

其次注意站点配置文件和主题配置文件

做笔记

再次建议一边修改，一边做笔记，建一个空白的txt，将自己的步骤放上面，万一错了，及时删除。

注意网上教程有坑

很多文章抄来抄去，可能没有亲测，也可能因为每个人的系统不一样，有的是windows系统，有的是Linux的不同版本，还有点是苹果系统等等，请注意这个细节，我自己就bug好几次，掉过几个坑。

小结

hexo-next-node-github搭建的个人博客，我就学习到这里了，以后学习Python了。

-------------本文结束感谢您的阅读-------------
坚持原创技术分享，您的支持将鼓励我继续创作！