环境配置

在正式安装 Hexo 之前，我们需要确认电脑中是否已安装下列应用程序:

  • GitHub 账号
  • Node.js

    详情安装教程
    查看Node版本：node -v

  • Git

    详情安装教程
    查看git版本：$ git version

    • 打开git的.ssh目录(我的是C:\Users\Administrator.ssh)，然后右键git bash如下图:
    • 执行如下命令： 
      1
      2
      3
      4
      git config --global user.name "你的用户名"  
      git config --global user.email 你的邮箱  
      ssh-keygen -t rsa -C "你的邮箱" 
      // 记住三下回车，提示y/n就输入y
    • 添加SSH key到github或者gitee: 复制密钥文件内容（路径形如C:\Users\Administrator.ssh\id_rsa.pub），粘贴到New SSH Key即可
    • 测试是否添加成功。在命令行（即Git Bash）依次输入以下命令，返回“You’ve successfully authenticated”即成功 
      1
      $ ssh -T git@github.com

在本地安装Hexo

全局安装Hexo，在cmd中运行以下命令：
npm install -g hexo-cli

安装淘宝镜像源：

方式一：npm install -g cnpm –registry=https://registry.npm.taobao.org
方式二：npm config set registry https://registry.npm.taobao.org
检验：npm config get registry
再安装：
npm install -g cnpm

所有必备的应用程序安装完成后，即可使用 cnpm 安装 Hexo。在blog文件下右键点击Git Bash here，输入如下命令:

常用命令

hexo g #完整命令为hexo generate,生成静态文件
hexo s #完整命令为hexo server,启动服务器,本地可以测试
hexo d #完整命令为hexo deploy,将本地编译好的静态文件发布到github上
hexo n #完整命令为hexo new,新建一篇文章
hexo clean #清除当前项目的静态文件
hexo clean && hexo g && hexo s
hexo clean && hexo douban -bgm && hexo g && hexo s #加载豆瓣插件部署博客

安装hexo

以下都是在博客根目录下操作~/blog

npm install -g hexo

初始化博客

$ hexo init

安装本地预览服务

在博客根目录 npm i hexo-server

生成和本地预览

$ hexo clean && hexo g && hexo s

查看浏览器:localhost:4000

原始界面

部署博客到 GitHub Pages

  • 创建一个repo，名称为yourname.github.io, 其中yourname是你的github名称，按照这个规则创建才有用

  • npm install hexo-deployer-git –save

  • 更改自己博客的_config.yml文件，找到如下代码 
    1
    2
    3
    4
    deploy:
    type: git
    repo: 仓库的ssh链接
    branch: master
  • 上传到自己建立的仓库：hexo clean && hexo g && hexo deploy
  • 访问网站方式：https://yourname.github.io/
    具体可以参考

部署到gitee

基本步骤跟github的相同，但是有几个需要注意的点：
1.hexo的yml配置文件,一致

2.需要额外修改root路径，否则css这种静态资源加载不到：

  • blog是你的仓库名
  • url是你仓库在服务里面开通pages后的访问博客地址

注意

搭建好了博客，也有了hexo，但是报错:ERROR Local hexo not found in D:\hexo 解决：
1.cmd进入博客当前文件夹路径
2.执行 npm install
3.执行 hexo server
4.执行成功后,再到博客下的git中执行 hexo d /hexo g 发现可以执行成功。

部署到服务器

以下我以阿里云服务器的centos系统为例：
1.搭建git环境
xshell进入后台，安装git

yum install git

然后

git –version

查看git版本
创建一个git用户，然后按照以下代码步骤一步一步完成：

1
2
3
4
5
6
7
8
9
10
11
12
13
adduser git //添加git用户
passwd git // 设置git密码  
su git // 切换用户  
cd /home/git/   //进入git目录  
mkdir -p projects/blog // 创建文件来放置hexo静态工程  
mkdir repos && cd repos //创建文件放置git仓库  
git init --bare blog.git // 创建一个裸露的仓库  
cd blog.git/hooks  //进入钩子目录
vi post-receive //创建hook钩子函数(git提交时自动部署)  

hook钩子函数内容:  (注xshell命令vi/vim这两个命令的用法，输入之后按一下i字母键代表输入，输入完了之后，先按Esc键，再输入:wq代表保存退出，:q是退出不保存)
#!/bin/sh 
git --work-tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f

修改权限

1
2
3
chmod +x post-receive
exit // 退出到 root 登录
chown -R git:git /home/git/repos/blog.git // 添加权限

2.建立ssh免密登录：
这里注意，还是git用户，不能退出，不能切换到root管理用户
创建authorized_keys文件

1
2
3
4
5
6
7
8
su git     //切换git用户
cd /home/git   //进入git目录
mkdir .ssh  //创建免密公匙目录
cd /home/git/.ssh  //注意是用git用户进这个目录，不是root
touch authorized_keys  //存放客户端的ssh公钥(id_rsa.pub)  
chmod 600 authorized_keys   //配置权限  
cd .. //退出.ssh目录  
chmod 700 .ssh  //.ssh目录必须700权限

然后用winscap远程连接服务器，打开这个文件，注意看以下操作：
客户端本地(就是我自己的电脑)进入.ssh目录，右键git bash，同上面的操作，然后输入如下命令:
cat id_rsa.pub，复制公匙key，从ssh-rsa开始复制到最后的邮箱地址.com,如下图:
免密key

粘贴到刚刚前面winscap打开的authorized_keys里面，复制完了注意，粘贴的时候后面不能有任何的空格和回车，最后是鼠标点到最后，按del键清空下，这里就是把本地的id_rsa.pub内容复制到authorized_keys里面
测试下能否本地免密登录，首次联系会提示你输入yes，然后输入密码，如下图：
首次连接
免密成功

到这里免密成功，服务器git环境搭建完成，测试下能否可能服务器的目录到本地：
随便打开一个文件夹，输入以下命令：

1
git clone git@server_ip:/home/git/repos/blog.git

成功以后如下：
克隆成功

3.限制git登录
git用户的登录权限禁掉，只能clone和push，修改目录/etc/下面的passwd文件

1
2
3
4
cat /etc/shells // 查看`git-shell`是否在登录方式里面，有则跳过
which git-shell // 查看是否安装 
vi /etc/shells
添加(which git-shell)显示出来的路劲，通常在 /usr/bin/git-shell

修改

1
2
cd /etc  
vi passwd

更改方式如下：

1
2
3
4
将原来的
git:x:1000:1000:/home/git:/bin/bash //原来的
修改为:
git:x:1000:1000:/home/git:/usr/bin/git-shell //修改后的

4.nginx配置
这里非常重点，特别注意，容易出很多错。所以在root根目录，先执行以下几个命令，执行过程中就不会报错了:

1
2
3
4
yum update  //更新  
yum -y install pcre-devel openssl openssl-devel  
yum -y install gcc-c++  
yum install -y zlib-devel

然后安装nginx，执行以下命令，一步一步来:

1
2
3
4
5
centos8系统自带nginx，所以直接yum  
yum install nginx  //安装
nginx -t  //测试安装  
systemctl enable nginx  //添加系统自启动
systemctl start nginx  //启动服务,还有stop/restart

以上代码只要前面的环境都安装了，到这里不会报任何错误的，然后修改nginx配置文件：

1
2
3
4
cd /etc/nginx/
vi nginx.conf
修改 root 路径为: /home/git/projects/blog; 
同时将 user 改为 root

如下图，改三个地方：
修改处

1
2
3
#user everyone;修改为user root; //注意去掉#字符  
server_name localhost;修改为server_name 你的域名or公网IP  
root index;修改为root /home/git/projects/blog;

改完后记得systemctl restart nginx，就可以访问你的域名啦

1
npm  run  start

5.修改hexo配置
返回本地hexo根目录，找到_system.yml，代码样式如下:

1
2
3
4
deploy:
  type: git
  repo: git@serverId:/home/git/repos/blog.git  //serverID是你的服务器地址或者git地址
  branch: master

如果有多个仓库，repo这里填写方式一定要特别注意：

1
2
3
repo:
  linxu: git@serverId:/home/git/repos/blog.git //注意缩进
  github: git@your git site    //注意缩进

每个仓库都可以命名一个名称,我自己的就写的linxu,还有例如github等等，这个可以随便写，没有规定，但是要

特别注意，多个仓库并列，必须要缩进，不能和repo并齐，否则上传会出错

6.上传测试
至此，所有配置均完成，然后本地cmd写一篇文章测试下

hexo new hello

生成的hello.md文件在myblog/source/_pos下面，打开可以看到发现默认的文章title就是你新建的hello.md

的hello，这里有个小技巧，修改myblog\scaffolds下面的post.md，如下：

1
2
3
4
5
title: {{ title }}  //标题：注意窍门，hexo new的是你网页打开的链接显示，title可以改成中文
date: {{ date }}  //时间轴
top:   //置顶排序，数字越大越靠前
categories:   //分类
tags:   //标签

这样下次新建文章，就带有上面的这些字段了，

博客美化

两个yml文件

以下next主题为例：

  • 站点配置文件，位于站点文件夹根目录内
    • ~/blog/_config.yml
  • 主题配置文件，位于主题文件夹根目录内
    • ~/blog/themes/next/_config.yml

主题更换

如更换成yilia主题

  • 下载主题
  • 配置文件 _config.yml 中指定所使用的 theme：yilia
  • 安装插件
    • npm install –save-dev 插件名
  • 注：可以使用cnpm替换npm，下载速度更快，安装淘宝镜像源即可。

yilia主题

  1. 起初博主是根据B站视频来搭建的，选择的yilia主题hexo + yilia主题
    但是主题里面都没有很是中意的，遂改成了Next主题，更加符合我的审美。
  2. 具体的主题优化配置可以参考如下文档:

Next主题

动态背景

仰慕很久了的，总觉得很好玩
* 在主题配置文件中，靠后面，改 canvas_nest: true，想要更改颜色和数量？请参考
修改文件：
> 文件位置：~/blog/themes/next/source/lib/canvas-nest/canvas-nest.min.js
### 使用腾讯云给博客添加动态相册功能
参考小鸡，哈哈，所有的坑我都踩过一遍了，最后幸好出来了
基于此，完善步骤如下：
1.创建腾讯云cos存储桶

2.跨域访问cors设置
* 在基础配置中找到cors设置
引用小鸡的
origin源可以先填为*，然后后面成功了再改成自己的博客地址
引用小鸡的
3.Policy权限设置
* 存储桶访问权限：一般共有读私有写就行, 权限不配置访问存储桶域名可能会依然出现error节点

4.本地创建相册页面
>$ hexo new page photos
* 编辑source/photos路径下的index.md文件，写入以下代码:
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
<div id="box" class="box"></div>

<script type="text/javascript">

function loadXMLDoc(xmlUrl) 
{
    try //Internet Explorer
    {
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    }
    catch(e)
    {
    try //Firefox, Mozilla, Opera, etc.
        {
        xmlDoc=document.implementation.createDocument("","",null);
        }
    catch(e) {alert(e.message)}
    }
    
    try 
    {
        xmlDoc.async=false;
        xmlDoc.load(xmlUrl);
    }
    catch(e) {
        try //Google Chrome  
        {  
            var chromeXml = new XMLHttpRequest();
            chromeXml.open("GET", xmlUrl, false);
            chromeXml.send(null);
            xmlDoc = chromeXml.responseXML.documentElement; 				
            //alert(xmlDoc.childNodes[0].nodeName);
            //return xmlDoc;    
        }  
        catch(e)  
        {  
            alert(e.message)  
        }  		  	
    }
    return xmlDoc; 
}

var xmllink="你的访问域名链接"
//访问域名链接就是我上面提到的那个访问域名xml链接

xmlDoc=loadXMLDoc(xmllink);
var urls=xmlDoc.getElementsByTagName('Key');
var date=xmlDoc.getElementsByTagName('LastModified');
var wid=250;
var showNum=12; //每个相册一次展示多少照片
if ((window.innerWidth)>1200) {wid=(window.innerWidth*3)/18;}
var box=document.getElementById('box');
var i=0;

var content=new Array();
var tmp=0;
var kkk=-1;
for (var t = 0; t < urls.length ; t++) {
    var bucket=urls[t].innerHTML;
    var length=bucket.indexOf('/');
    if(length===bucket.length-1){
        kkk++;
        content[kkk]=new Array();
        content[kkk][0]={'url':bucket,'date':date[t].innerHTML.substring(0,10)};
        tmp=1;
    }
    else {
        content[kkk][tmp++]={'url':bucket.substring(length+1),'date':date[t].innerHTML.substring(0,10)};
    }
}

for (var i = 0; i < content.length; i++) {
    var conBox=document.createElement("div");
    conBox.id='conBox'+i;
    box.appendChild(conBox);
    var item=document.createElement("div");
    var title=content[i][0].url;
    item.innerHTML="<button class=title style=background:url("+xmllink+'/'+title+"封面.jpg"+");><span style=display:inline;><strong style=color:#f0f3f6; >"+title.substring(0,title.length-1)+"</strong></span></button>";
    conBox.appendChild(item);

    for (var j = 1; j < content[i].length && j < showNum+1; j++) {
        var con=content[i][j].url;
        var item=document.createElement("li");
        item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+content[i][j].date+"</p>";
        conBox.appendChild(item);
    }
    if(content[i].length > showNum){
        var moreItem=document.createElement("button");
        moreItem.className="btn-more-posts";
        moreItem.id="more"+i;
        moreItem.value=showNum+1;
        let cur=i;
        moreItem.onclick= function (){
            moreClick(this,cur,content[cur],content[cur][0].url);
        }
        moreItem.innerHTML="<span style=display:inline;><strong style=color:#f0f3f6;>加载更多</strong></span>";
        conBox.appendChild(moreItem);
    }
}

function moreClick(obj,cur,cont,title){
    var parent=obj.parentNode;
    parent.removeChild(obj);
    var j=obj.value;
    var begin=j;
    for ( ; j < cont.length && j < Number(showNum) + Number(begin); j++) {
        console.log( Number(showNum) + Number(begin));
        var con=cont[j].url;
        var item=document.createElement("li");
        item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+cont[j].date+"</p>";
        parent.appendChild(item);
    }
    if(cont.length > j){
        obj.value=j;
        parent.appendChild(obj);
    }
}

</script>

* 相册样式可以自行去调整
* 注意：
* 存储桶中应该必须是文件夹，不能图片和文件夹同级，否则报错：Uncaught ypeError: Cannot set property ‘0’ of undefined，
### 手动修改博客css样式，打造属于自己的博客样式
* F12手动查看网页
* 自己主题的themes extsourcecss_custom目录下的custom.styl文件
### 自定义文章底部版权声明
1. 在目录 themes/next/layout/_macro/ 下添加 my-copyright.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
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<!-- JS库 sweetalert 可修改路径 -->
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

<p><span>本文标题:</span>{{ page.title }}</a></p>
<p><span>文章作者:</span>{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
    $(".fa-clipboard").click(function(){
        swal({   
        title: "",   
        text: '复制成功',   
        html: false,
        timer: 500,   
        showConfirmButton: false
        });
    });
    }));  
</script>
{% endif %}

2.在目录 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl，内容如下:
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
.my_post_copyright {
    width: 85%;
    max-width: 45em;
    margin: 2.8em auto 0;
    padding: 0.5em 1.0em;
    border: 1px solid #d3d3d3;
    font-size: 0.93rem;
    line-height: 1.6em;
    word-break: break-all;
    background: rgba(255,255,255,0.4);
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
    display: inline-block;
    width: 5.2em;
    color: #333333; // title color
    font-weight: bold;
    }
    .my_post_copyright .raw {
    margin-left: 1em;
    width: 5em;
    }
    .my_post_copyright a {
    color: #808080;
    border-bottom:0;
    }
    .my_post_copyright a:hover {
    color: #0593d3; // link color
    text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
    color: #000;
    }
    .my_post_copyright .post-url:hover {
    font-weight: normal;
    }
    .my_post_copyright .copy-path {
    margin-left: 1em;
    width: 1em;
    +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
    color: #808080;
    cursor: pointer;
    }

4.修改 themes/next/layout/_macro/post.swig ，如下：
在代码
1
2
3
4
5
{% if theme.wechat_subscriber.enabled and not is_index %}
    <div>
        {% include 'wechat-subscriber.swig' %}
    </div>
{% endif %}

之前，新增如下代码：
1
2
3
4
5
<div>
    {% if not is_index %}
        {% include 'my-copyright.swig' %}
    {% endif %}
</div>

4.打开 themes/next/source/css/_common/components/post/post.styl 文件，在最后一行增加代码:
1
@import "my-post-copyright"

5.设置新建文章自动开启 copyright ，即新建文章自动显示自定义的版权声明，设置 ～/scaffolds/post.md 文件，如下：
1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
copyright: true #新增,开启
---

### 建立标签云及效果展示
Hexo博客建立标签云及效果展示
### Hexo文章简单加密访问
教程：密码 password
### 在Hexo博客中加入豆瓣读书页面
参考链接

参考文档：打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化
参考文档：Hexo NexT主题美化2.0
参考文档：hexo部署到个人服务器