环境说明
- 阿里云服务器 ubuntu server操作系统
- NodeJs v6.11.3(v8版本以上使用hexo-admin会有一个error出现，强迫症受不了nodejs降级了)
- Hexo-cli:1.1.0
- Hexo:3.7.1
- Hexo-admin
- Nginx:1.10.3
- 畅言评论系统
- ShareSDK:分享系统（用于分享到微信、微博等）
- 七牛云/极简图床：用于存储外联图片和音乐
安装NodeJS
- 方法一：官网下载安装包进行安装（百度）
- 方法二：换源下载（百度）
nodejs升级或版本降级
- 使用npm安装一个模块n到全局：
npm install -g n
- 使用n加版本号的方式可以安装到其他版本，比如：
n 6.11.3
- 在使用n通过上下键就可以选择不同的版本（注意，从低版本到高版本时可以共存，高到低时只会保留低版本）
安装hexo
npm install hexo-cli -g
hexo init blog(生成的博客文件夹的名字，自定义,会在对应执行该语句的路径生成对应的文件)
cd blog
npm install
hexo server
安装hexo-admin
npm install --save hexo-admin
hexo server -d(开启hexo操作)
- 现在打开http://IP:4000/admin/会发现显示没有找到对应的目录，需要配置hexo-admin,打开blog目录下的_config.yml配置hexo-admin
admin:
username: XXXX(自己设置用户名)
password_hash: XXXXXXXXX(密码，但是是明文经过bcrypt hash加密后生成的)
secret: hey hexo(用于cookie安全)
deployCommand: './admin_script/hexo-generate.sh'(调用该脚本）
- 关于bcrypt加密具体的需要百度，我也没怎么弄懂，但是当时是用JAVA实现的，需要去下载一个jar包，源码如下：
package com.zhou;
import java.security.NoSuchAlgorithmException;//需要引入的包
/**
* Created by 强 on 2018/9/28.
*/
public class BcryptHashingExample {
public static void main(String[] args) throws NoSuchAlgorithmException<br>
{<br>
String originalPassword = "XXXXXX";//设置密码
System.out.println(originalPassword.substring(1, originalPassword.length()));
String generatedSecuredPasswordHash = BCrypt.hashpw(originalPassword, BCrypt.gensalt(12));
System.out.println(generatedSecuredPasswordHash);
boolean matched = BCrypt.checkpw(originalPassword, generatedSecuredPasswordHash);
System.out.println(matched);
}
}
- 在配置完密码后可以登录上面的网址访问管理主页了。
- 由于之前配置了deployCommand,所以现在还需要在_config.yml/admin_scripts创建一个deployCommand文件：
touch hexo-generate.sh;<br>
vim hexo-generate.sh;<br>
文件内容如下：<br>
#!/bin/bash sh<br>
hexo g<br>
- 退出文件后chmod +x deployCommand修改权限，然后启动hexo server, 再访问http://IP:4000/admin登录写文章并且到Deploy中点击deploy发布，发现前台页面生成即可表示成功
- hexo server进程一直在后台运行的办法（执行hexo server -d &在一段时间后会停止hexo，此时无法打开后台）：采用pm2接管hexo进程
- 安装pm2:
npm install -g pm2
- 在博客的根目录下创建一个hexo_run.js的文件，文件内容如下:
const { exec } = require('child_process')
exec('hexo server -d',(error, stdout, stderr) => {
if(error){
console.log('exec error: ${error}')
return
}
console.log('stdout: ${stdout}');
console.log('stderr: ${stderr}');
})
- 运行开启命令: pm2 start hexo_run.js
- 最后附上我写的一个hexo重启脚本restart_hexo.sh(需要先配置好nginx），需要重启刷新的时候执行source restart_hexo.sh即可：
#!/bin/bash
PROCESS=`ps -ef|grep hexo|grep -v grep|grep -v PPID|awk '{ print $2}'`
PROC_NAME="pm2"
for i in $PROCESS
do
echo "Kill the $1 process [ $i ]"
kill -9 $i
done
hexo clean #清除数据
hexo generate #生成静态文件public文件夹
ProcNumber=`ps -ef |grep -w $PROC_NAME|grep -v grep|wc -l`
if [ $ProcNumber -le 0 ];then
pm2 start hexo_run.js
else
pm2 restart hexo_run.js
fi
service nginx restart
nginx配置
- nginx安装（网上教程很多，最简单的方式就是apt-get）:
sudo apt-get install nginx
- 我采用的apt-get方式，然后打开/etc/nginx/nginx.conf文件：
include /etc/nginx/conf.d/*.conf;//注释掉
include /etc/nginx/sites-enabled/*;//注视掉
server {
listen 80; //开启的端口号
server_name xxxx localhost; //解析的域名,多个域名中间用空格
location / {
root /root/my-blog/public; //链接到的hexo的目录，我放在根目录下所以是/root/my-blog,还请根据对应的修改
}
} //加入
修改hexo样式
- 到hexo官网寻找一款觉得满意的主题链接到对应的github，下面一般都有下载说明
- 下载的文件放到对应的theme文件夹下
- 修改/my-blog/下的_config.yml文件：
theme: 对应的theme下要选择的主题文件夹名
- 对相应的样式进行调整修改
hexo主页下的tag标签、category标签无显示找不到
- 解决办法： 在主目录下执行 hexo new page "tags"或者hexo new page "category"
- 在/source/tags/index.md中设置修改
---
date: 2018-10-02 19:31:00
type: "tags"
comments: false
---
- 同理categories:
---
date: 2018-10-02 19:37:05
type: "categories"
comments: false
---
- 或者about me:
---
title: 关于我
type: "about-me"
date: 2018-10-02 19:36:51
comments: false
---
集成畅言评论系统：
- 注册，获取APP ID 和APP KEY
- 进入到theme下的主题下，打开_config.yml文件，找到comment那一段配置，我的配置如下(和具体的主题有关，有的可能比较复杂)：
comment:
# your disqus_shortname
disqus:
changyan:
appid: 'XXXX'
conf: 'XXXXX'
youyan:
# gitment: https://github.com/imsun/gitment
# make sure you know how to set it
gitment:
owner:
repo:
oauth:
client_id:
client_secret:
集成分享系统
- 去mob系统注册账号
- 进入后台管理
- 新建应用
- 进入hexo应用管理页面，添加ShareSDK功能
- 记录AppKey
- 到web集成文档
中找到集成代码，将appkey改成刚才生成的，copy代码待用 - 进入theme下的theme/XXX/layout/_partial文件夹下，新建一个shares.ejs,将刚才的代码拷贝进去
- 打开同目录下的article.ejs，在article body最后引用此代码：
<%- partial('shares') %>
- 重启即可
增加打赏功能
- 在layout/_partial目录下新建donate.ejs文件，输入以下内容：
<! -- 添加捐赠图标 -->
<div class ="post-donate">
<div id="donate_board" class="donate_bar center">
<a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏"></a>
<span class="donate_txt">
↑<br>
<%=theme.donate_message%>
</span>
<br>
</div>
<div id="donate_guide" class="donate_bar center hidden" >
<!-- 支付宝打赏图案 -->
<img src="<%- theme.root_url %>/img/Alipay.jpg" alt="支付宝打赏">
<!-- 微信打赏图案 -->
<!-- img src="/img/weixin.jpg" alt="微信打赏" -->
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
document.getElementById('btn_donate').onclick = function(){
$('#donate_board').addClass('hidden');
$('#donate_guide').removeClass('hidden');
}
</script>
</div>
<! -- 添加捐赠图标 -->
- 在source/css下新建一个donate.css,内容如下：
.donate_bar {
text-align: center;
margin-top: 5%
}
.donate_bar a.btn_donate {
display: inline-block;
width: 82px;
height: 82px;
margin-left: auto;
margin-right: auto;
background: url(http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif)no-repeat;
-webkit-transition: background 0s;
-moz-transition: background 0s;
-o-transition: background 0s;
-ms-transition: background 0s;
transition: background 0s
}
.donate_bar a.btn_donate:hover {
background-position: 0 -82px
}
.donate_bar .donate_txt {
display: block;
color: #9d9d9d;
font: 14px/2 "Microsoft Yahei"
}
.donate_bar.hidden{
display: none
}
.post-donate{
margin-top: 80px;
}
#donate_guide{
height: 210px;
width: 420px;
margin: 0 auto;
}
#donate_guide img{
height: 200px;
height: 200px;
}
- donate.css引入到同目录下的style.css中
- 将支付宝的二维码/微信二维码拷贝到source/img文件夹下，img文件夹新建
- 在layout/_partial/article.ejs中的article的末尾添加以下代码：
<% if (theme.donate){ %>
<%- partial('donate') %>
<% } %>
- 在主题的_config.yml中配置以下内容：
Alipay: /img/Alipay.jpg
#是否开启打赏功能
donate: true
#打赏文案
donate_message: 欣赏此文？求鼓励，求支持！
- 重启测试
参考链接：
https://www.cnblogs.com/conserdao/p/6876381.html
https://hexo.io/zh-cn/
https://www.jianshu.com/p/68e727dda16d
https://hadronw.com/2018/05-28/hexo-addshares/
http://cighao.com/2016/02/23/add-donate-to-hexo/
https://blog.csdn.net/tangcuyuha/article/details/80331169
